Skip to content

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

updates

上级 2a4818af
隐藏空白字符变更
内嵌 并排
正在显示 包含 1096 行增加 和 750 行删除
package-lock.json
浏览文件 @ aa840f66
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
"query-string": "^7.1.1", "query-string": "^7.1.1",
"querystring": "^0.2.1", "querystring": "^0.2.1",
"swiper": "^8.4.4", "swiper": "^8.4.4",
"vant": "^3.6.5",
"vue": "^3.2.45", "vue": "^3.2.45",
"vue-router": "^4.1.6" "vue-router": "^4.1.6"
}, },
...@@ -483,6 +484,21 @@ ...@@ -483,6 +484,21 @@
"url": "https://opencollective.com/typescript-eslint" "url": "https://opencollective.com/typescript-eslint"
} }
}, },
"node_modules/@vant/icons": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.8.0.tgz",
"integrity": "sha512-sKfEUo2/CkQFuERxvkuF6mGQZDKu3IQdj5rV9Fm0weJXtchDSSQ+zt8qPCNUEhh9Y8shy5PzxbvAfOOkCwlCXg=="
},
"node_modules/@vant/popperjs": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.3.0.tgz",
"integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
},
"node_modules/@vant/use": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/@vant/use/-/use-1.4.3.tgz",
"integrity": "sha512-rSnETN7P9qT1WbItMpQxBqe3cHeK2ZFYp1sCxWUXaTeI71TqA8sOdzC36ledZ36NQgFNTch9fsRPYOkrCgZfQA=="
},
"node_modules/@vitejs/plugin-vue": { "node_modules/@vitejs/plugin-vue": {
"version": "3.2.0", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz",
...@@ -4401,6 +4417,19 @@ ...@@ -4401,6 +4417,19 @@
"node": ">= 0.12.0" "node": ">= 0.12.0"
} }
}, },
"node_modules/vant": {
"version": "3.6.5",
"resolved": "https://registry.npmjs.org/vant/-/vant-3.6.5.tgz",
"integrity": "sha512-TVTs5impkF6qPvCn+qhpcuNyxy0rCRA161JYkK5rFpKhwWftq4TOSTZAHGCW2kVFtrwl0Zp715GXEed/hxivYw==",
"dependencies": {
"@vant/icons": "^1.8.0",
"@vant/popperjs": "^1.2.1",
"@vant/use": "^1.4.2"
},
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/vite": { "node_modules/vite": {
"version": "3.2.4", "version": "3.2.4",
"resolved": "https://registry.npmmirror.com/vite/-/vite-3.2.4.tgz", "resolved": "https://registry.npmmirror.com/vite/-/vite-3.2.4.tgz",
...@@ -4981,6 +5010,21 @@ ...@@ -4981,6 +5010,21 @@
"eslint-visitor-keys": "^3.3.0" "eslint-visitor-keys": "^3.3.0"
} }
}, },
"@vant/icons": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.8.0.tgz",
"integrity": "sha512-sKfEUo2/CkQFuERxvkuF6mGQZDKu3IQdj5rV9Fm0weJXtchDSSQ+zt8qPCNUEhh9Y8shy5PzxbvAfOOkCwlCXg=="
},
"@vant/popperjs": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.3.0.tgz",
"integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
},
"@vant/use": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/@vant/use/-/use-1.4.3.tgz",
"integrity": "sha512-rSnETN7P9qT1WbItMpQxBqe3cHeK2ZFYp1sCxWUXaTeI71TqA8sOdzC36ledZ36NQgFNTch9fsRPYOkrCgZfQA=="
},
"@vitejs/plugin-vue": { "@vitejs/plugin-vue": {
"version": "3.2.0", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz",
...@@ -7886,6 +7930,16 @@ ...@@ -7886,6 +7930,16 @@
"unescape": "^1.0.1" "unescape": "^1.0.1"
} }
}, },
"vant": {
"version": "3.6.5",
"resolved": "https://registry.npmjs.org/vant/-/vant-3.6.5.tgz",
"integrity": "sha512-TVTs5impkF6qPvCn+qhpcuNyxy0rCRA161JYkK5rFpKhwWftq4TOSTZAHGCW2kVFtrwl0Zp715GXEed/hxivYw==",
"requires": {
"@vant/icons": "^1.8.0",
"@vant/popperjs": "^1.2.1",
"@vant/use": "^1.4.2"
}
},
"vite": { "vite": {
"version": "3.2.4", "version": "3.2.4",
"resolved": "https://registry.npmmirror.com/vite/-/vite-3.2.4.tgz", "resolved": "https://registry.npmmirror.com/vite/-/vite-3.2.4.tgz",
......
package.json
浏览文件 @ aa840f66
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
"query-string": "^7.1.1", "query-string": "^7.1.1",
"querystring": "^0.2.1", "querystring": "^0.2.1",
"swiper": "^8.4.4", "swiper": "^8.4.4",
"vant": "^3.6.5",
"vue": "^3.2.45", "vue": "^3.2.45",
"vue-router": "^4.1.6" "vue-router": "^4.1.6"
}, },
......
src/components/layout/ApplyForm.vue 0 → 100644
浏览文件 @ aa840f66
<template>
<div class="app-apply-form">
<h2 class="title">报名咨询</h2>
<div class="form">
<div class="form-item">
<input
type="text"
class="form-input"
placeholder="请输入您的名字"
v-model="ruleForm.name"
/>
</div>
<div class="form-item">
<input
type="number"
class="form-input"
placeholder="请输入您的电话"
maxlength="11"
v-model="ruleForm.phone"
/>
</div>
<div class="form-item">
<input
type="text"
class="form-input"
placeholder="请输入验证码"
maxlength="4"
v-model="phoneCode"
/>
<input
type="button"
class="form-button"
:disabled="codeButtonDisabled"
:value="buttonText"
@click="onSendCode"
/>
</div>
<div class="form-item">
<input
type="button"
value="立即报名"
class="form-button"
@click="onSbumit"
/>
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/base'
export default {
data() {
return {
ruleForm: {
name: '',
phone: '',
project_id: '5007',
channel: ''
},
phoneCode: '',
codeButtonDisabled: false,
timer: null,
disabledTime: 60
}
},
mounted() {
this.ruleForm.channel = window.localStorage.getItem('channel_num') || 19960
},
computed: {
buttonText() {
return this.codeButtonDisabled ? `${this.disabledTime}s` : '获取验证码'
}
},
methods: {
onSbumit() {
if (!this.ruleForm.name) {
this.$notify('请输入您的姓名')
return
}
if (!this.ruleForm.phone || !/^1[3-9]\d{9}$/.test(this.ruleForm.phone)) {
this.$notify('请输入正确的手机号')
return
}
if (!this.phoneCode) {
this.$notify('请输入短信验证码')
return
}
this.checkPhoneCode().then(this.handleSubmit)
},
handleSubmit() {
const params = { ...this.ruleForm }
api.submit(params).then((response) => {
// this.$notify({ type: 'success', message: response.message })
this.$dialog.alert({ message: response.message }).then(() => {
this.$emit('success')
})
})
},
// 校验短信验证码
checkPhoneCode() {
return api.checkCode({
account: this.ruleForm.phone,
code: this.phoneCode
})
},
onSendCode() {
if (!this.ruleForm.phone || !/^1[3-9]\d{9}$/.test(this.ruleForm.phone)) {
this.$notify('请输入正确的手机号')
return
}
this.sendCode()
},
// 发送验证码
sendCode() {
this.setTimer()
api
.sendCode({ account: this.ruleForm.phone })
.then(() => {
this.$notify({ type: 'success', message: '验证码发送成功，注意查收' })
})
.catch(() => {
this.clearTimer()
})
},
setTimer() {
this.codeButtonDisabled = true
this.disabledTime = 60
this.timer = setInterval(() => {
this.disabledTime--
if (this.disabledTime <= 0) {
this.clearTimer()
}
}, 1000)
},
clearTimer() {
this.codeButtonDisabled = false
this.timer && clearInterval(this.timer)
}
},
destroyed() {
this.clearTimer()
}
}
</script>
<style lang="scss" scoped>
.app-apply-form {
min-width: 290px;
position: relative;
z-index: 3000;
.title {
padding: 30px 0;
font-size: 20px;
color: #fff;
text-align: center;
}
}
.form-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.form-input {
padding: 0 10px;
width: 100%;
height: 38px;
background-color: #fff;
box-sizing: border-box;
border: none;
}
.form-select {
position: relative;
padding: 0 10px;
width: 100%;
height: 38px;
background: #fff
url('https://webapp-pub.ezijing.com/www/h5/images/icon_arrows.png')
no-repeat;
background-position: right 0.7em top 50%, 0 0;
background-size: 30px 30px;
box-sizing: border-box;
border: none;
}
.form-button {
padding: 0 10px;
width: 100%;
height: 38px;
font-size: 16px;
color: #aa1941;
background-color: #ffd61b;
box-sizing: border-box;
border: none;
cursor: pointer;
}
.form-input + .form-button {
margin-left: 10px;
}
</style>
\ No newline at end of file
src/components/layout/Index.vue
浏览文件 @ aa840f66
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import AppHeader from './Header.vue' import AppHeader from './Header.vue'
import AppFooter from './Footer.vue' import AppFooter from './Footer.vue'
import RightAside from './RightAside.vue' import RightAside from './RightAside.vue'
import RightAsideH5 from './RightAsideH5.vue'
import { useDevice } from '@/composables/useDevice' import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice() const { mobile } = useDevice()
const route = useRoute() const route = useRoute()
...@@ -17,10 +18,16 @@ const props = defineProps<Props>() ...@@ -17,10 +18,16 @@ const props = defineProps<Props>()
<section class="app-layout-container"> <section class="app-layout-container">
<router-view :key="$route.fullPath"></router-view> <router-view :key="$route.fullPath"></router-view>
</section> </section>
<template v-if="!mobile && route.path !=='/shop/pay' "> <template
<AppFooter></AppFooter> v-if="(!mobile && route.path !== '/shop/pay') || route.path !== '/shop'"
>
<AppFooter></AppFooter>
</template>
<template v-if="!mobile">
<RightAside />
</template>
<template v-else>
<RightAsideH5 />
</template> </template>
<RightAside />
</div> </div>
</template> </template>
src/components/layout/RightAside.vue
浏览文件 @ aa840f66
<template> <script >
<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' 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}$/ 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 { export default {
data() { data() {
return { return {
...@@ -74,7 +30,7 @@ export default { ...@@ -74,7 +30,7 @@ export default {
}, },
submitEnroll() { submitEnroll() {
let flag = true let flag = true
Object.keys(this.formInfo).map(item => { Object.keys(this.formInfo).map((item) => {
if (this.formInfo[item] === '') { if (this.formInfo[item] === '') {
flag = false flag = false
} }
...@@ -85,17 +41,17 @@ export default { ...@@ -85,17 +41,17 @@ export default {
this.$message('手机号格式错误') this.$message('手机号格式错误')
} else { } else {
this.checkSendcode() this.checkSendcode()
.then(res => { .then((res) => {
return this.enrollQuery() return this.enrollQuery()
}) })
.then(res => { .then((res) => {
this.$message({ this.$message({
type: 'success', type: 'success',
message: '报名成功', message: '报名成功',
duration: 5000 duration: 5000
}) })
}) })
.catch(err => { .catch((err) => {
if (err && err.type === 'checkcode') this.$message.error(err.msg) if (err && err.type === 'checkcode') this.$message.error(err.msg)
else this.$message.error(err.msg || '报名提交失败') else this.$message.error(err.msg || '报名提交失败')
}) })
...@@ -109,7 +65,7 @@ export default { ...@@ -109,7 +65,7 @@ export default {
phone: this.formInfo.phone phone: this.formInfo.phone
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
postNes(params).then(res => { postNes(params).then((res) => {
if (res && res.status === 200 && res.error === 0) { if (res && res.status === 200 && res.error === 0) {
resolve({ resolve({
type: 'enroll', type: 'enroll',
...@@ -136,9 +92,10 @@ export default { ...@@ -136,9 +92,10 @@ export default {
service: 'ezijing.com' service: 'ezijing.com'
} }
sendCode(param) sendCode(param)
.then(res => { .then((res) => {
this.btnDisabledTimer() this.btnDisabledTimer()
if (res && res.code === 0) this.$message.success('验证码已发送，请注意查收') if (res && res.code === 0)
this.$message.success('验证码已发送，请注意查收')
else this.$message.error('获取验证码失败，请稍后再试') else this.$message.error('获取验证码失败，请稍后再试')
}) })
.catch(() => {}) .catch(() => {})
...@@ -151,7 +108,7 @@ export default { ...@@ -151,7 +108,7 @@ export default {
countryCode: 86 countryCode: 86
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
checkCode(checkCodeParam).then(res => { checkCode(checkCodeParam).then((res) => {
if (res && res.code === 0) { if (res && res.code === 0) {
res.type = 'checkcode' res.type = 'checkcode'
resolve({ resolve({
...@@ -177,7 +134,7 @@ export default { ...@@ -177,7 +134,7 @@ export default {
if (count < 1) { if (count < 1) {
clearInterval(timer) clearInterval(timer)
this.isBtnDisabled = false this.isBtnDisabled = false
document.querySelector('#checkedCode').innerHTML = this.$t('aside.codeBtn') document.querySelector('#checkedCode').innerHTML = '获取验证码'
} else { } else {
document.querySelector('#checkedCode').innerHTML = count + 's' document.querySelector('#checkedCode').innerHTML = count + 's'
} }
...@@ -186,9 +143,79 @@ export default { ...@@ -186,9 +143,79 @@ export default {
} }
} }
</script> </script>
<template>
<div class="right_bar">
<ul class="tab_btns" v-if="!mobile">
<li
:class="{
enroll: true,
active: tabBtnActive && tabBtnTarget === 'enroll'
}"
@mouseenter="handleMsOver('enroll')"
@mouseleave="handleMsOut"
>
<p>报名咨询</p>
</li>
</ul>
<ul class="tab_btns" v-else>
<li>
<img
src="https://zws-imgs-pub.ezijing.com/static/public/d434fa0ffd77892273e63e6d694cff0a.png"
alt=""
/>
<p>报名咨询</p>
</li>
</ul>
<div
id="show-enroll"
v-show="tabBtnActive"
class="tab_cont"
@mouseenter="handleMsOver('')"
@mouseleave="handleMsOut"
>
<div class="enroll_cont" id="show-enroll-content">
<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>
</div>
</template>
<style lang="scss" scoped> <style lang="scss" scoped>
.right_bar { .right_bar {
display: none;
position: fixed; position: fixed;
top: 50%; top: 50%;
right: 10px; right: 10px;
......
src/components/layout/RightAsideH5.vue 0 → 100644
浏览文件 @ aa840f66
<template>
<div class="rigth-aside">
<ul class="right-aside-btns">
<li @click="showApplyForm">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/d434fa0ffd77892273e63e6d694cff0a.png"
/>
<p>报名咨询</p>
</li>
</ul>
</div>
<!-- 我要报名 -->
<van-overlay :show="applyFormVisible" @click="hideApplyForm">
<div class="dialog-box" @click.stop>
<apply-form @success="hideApplyForm"></apply-form>
</div>
</van-overlay>
</template>
<script>
import ApplyForm from './ApplyForm.vue'
export default {
components: { ApplyForm },
data() {
return {
applyFormVisible: false
}
},
methods: {
// 我要报名
showApplyForm() {
this.applyFormVisible = true
},
hideApplyForm() {
console.log('11')
this.applyFormVisible = false
}
}
}
</script>
<style lang="scss" scoped>
.van-overlay {
z-index: 1000 !important;
}
.rigth-aside {
position: fixed;
top: 50%;
right: 16px;
z-index: 99;
transform: translateY(-50%);
.right-aside-btns {
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
font-size: 0.1rem;
color: #999;
background-color: #fff;
cursor: pointer;
img {
width: 0.46rem;
height: 0.46rem;
}
}
li + li {
border-top: 1px solid #999;
}
}
}
.dialog-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 6.9rem;
height: 7.5rem;
background: url('https://webapp-pub.ezijing.com/www/h5/images/dialog_bg.png')
no-repeat;
background-size: cover;
.title {
font-size: 0.4rem;
color: #fff;
text-align: center;
}
}
</style>
src/main.ts
浏览文件 @ aa840f66
...@@ -7,6 +7,10 @@ import router from './router' ...@@ -7,6 +7,10 @@ import router from './router'
import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
import { Overlay } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';
// 公共css // 公共css
import './assets/css/base.css' import './assets/css/base.css'
// 公共组件 // 公共组件
...@@ -16,12 +20,13 @@ import AppContainer from '@/components/base/AppContainer.vue' ...@@ -16,12 +20,13 @@ import AppContainer from '@/components/base/AppContainer.vue'
import modules from './modules' import modules from './modules'
const app = createApp(App) const app = createApp(App)
// 注册公共组件 // 注册公共组件
app.component('AppCard', AppCard).component('AppContainer', AppContainer) app.component('AppCard', AppCard).component('AppContainer', AppContainer)
// 注册模块 // 注册模块
modules({ router }) modules({ router })
app.use(Overlay)
app.use(createPinia()) app.use(createPinia())
app.use(router) app.use(router)
app.use(ElementPlus) app.use(ElementPlus)
......
src/modules/home/components/Banner.vue
浏览文件 @ aa840f66
<script lang="ts" setup> <script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue' import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css' import 'swiper/css'
const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/banner.jpg' }] const list = [
{ url: 'https://webapp-pub.ezijing.com/project_online/fi/banner.jpg' }
]
</script> </script>
<template> <template>
<div class="banner"> <div class="banner">
...@@ -21,9 +23,4 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/banner.jp ...@@ -21,9 +23,4 @@ const list = [{ url: 'https://webapp-pub.ezijing.com/project_online/fi/banner.jp
object-position: center; object-position: center;
} }
} }
.is-h5 {
.banner {
padding: 0 0.15rem;
}
}
</style> </style>
src/modules/home/components/Main.vue
浏览文件 @ aa840f66
<script lang="ts" setup> <script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation } from 'swiper'
import 'swiper/css'
import 'swiper/css/navigation'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
const swiper1 = ref(null)
const list = [
{
img: 'https://webapp-pub.ezijing.com/project_online/fi/main4.png',
desc: '清控紫荆金融保险研究院&清控紫荆金融保险学院，基于政策指导，通过汇聚清华等国内外高校、行业骨干企业、行业研究机构的科研资源与实践成果，打造国内顶尖、国际卓越的金融保险智库，达到“产学研”的深度融合。'
},
{
img: 'https://webapp-pub.ezijing.com/project_online/fi/main5.png',
desc: '通过创立通晓金融保险理论与行业实务双方面的金融保险课题研发团队，针对金融保险不同领域、不同阶段的学习需求，为金融从业者提供专业学习契机、为金融机构培育高素质国际化人才。'
}
]
</script> </script>
<template> <template>
<div v-if="!mobile"> <div class="main1">
<div class="main1"> <div class="main_con">
<div class="main_con"> <img
<img src="https://webapp-pub.ezijing.com/project_online/fi/main1.png" alt="" /> src="https://webapp-pub.ezijing.com/project_online/fi/main1.png"
<div class="con_content"> alt=""
清控紫荆金融保险研究院&清控紫荆金融保险学院，基于政策指导，通过汇聚清华等国内外高校、行业骨干企业、行业研究机构的科研资源与实践成果，打造国内顶尖、国际卓越的金融保险智库，达到“产学研”的深度融合。 />
</div> <div class="con_content">
清控紫荆金融保险研究院&清控紫荆金融保险学院，基于政策指导，通过汇聚清华等国内外高校、行业骨干企业、行业研究机构的科研资源与实践成果，打造国内顶尖、国际卓越的金融保险智库，达到“产学研”的深度融合。
</div> </div>
</div> </div>
<div class="main2"> </div>
<div class="main_con1"> <div class="main2">
<div class="con_content"> <div class="main_con1">
通过创立通晓金融保险理论与行业实务双方面的金融保险课题研发团队，针对金融保险不同领域、不同阶段的学习需求，为金融从业者提供专业学习契机、为金融机构培育高素质国际化人才。 <div class="con_content">
</div> 通过创立通晓金融保险理论与行业实务双方面的金融保险课题研发团队，针对金融保险不同领域、不同阶段的学习需求，为金融从业者提供专业学习契机、为金融机构培育高素质国际化人才。
<img src="https://webapp-pub.ezijing.com/project_online/fi/main3.png" alt="" />
</div> </div>
<img
src="https://webapp-pub.ezijing.com/project_online/fi/main3.png"
alt=""
/>
</div> </div>
</div> </div>
<div v-else>
<Swiper loop :slidesPerView="1" :spaceBetween="10" :modules="[Navigation]" @swiper="swiper => (swiper1 = swiper)">
<SwiperSlide v-for="(item, index) in list" :key="index" class="main_list">
<img :src="item.img" alt="" class="list_img" />
<div class="list_con">{{ item.desc }}</div>
</SwiperSlide>
</Swiper>
</div>
<div class="main3"> <div class="main3">
核心产品为紫荆教育专属版权产品，站在高起点、高站位、高规格的“三高”教育标准平台上，向社会和企业精<br />英人士教授与传承“<span>格与质</span>”、“<span>道与术</span>”、“<span>欲与渔</span>”的经营管理品格和能力，主打行业认证类、行业标<br />准类和定制专属类等三类金融职业类培育体系。 核心产品为紫荆教育专属版权产品，站在高起点、高站位、高规格的“三高”教育标准平台上，向社会和企业精<br />英人士教授与传承“<span>格与质</span>”、“<span>道与术</span>”、“<span>欲与渔</span>”的经营管理品格和能力，主打行业认证类、行业标<br />准类和定制专属类等三类金融职业类培育体系。
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc { .main1 {
.main1 { padding: 70px 0 75px 0;
padding: 70px 0 75px 0; .main_con {
.main_con { width: 1200px;
width: 1200px; margin: 0 auto;
margin: 0 auto; display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; align-items: center;
align-items: center; img {
img { height: 290px;
height: 290px;
}
.con_content {
background: #ffffff;
font-size: 20px;
font-weight: 400;
line-height: 40px;
color: #333333;
margin-left: 53px;
text-align: justify;
}
}
}
.main2 {
background: #f5f5f5;
padding: 70px 0 75px 0;
.main_con1 {
width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
img {
height: 290px;
}
.con_content {
font-size: 20px;
font-weight: 400;
line-height: 40px;
color: #333333;
margin-right: 53px;
text-align: justify;
}
} }
} .con_content {
.main3 { background: #ffffff;
height: 308px; font-size: 20px;
background: url('https://webapp-pub.ezijing.com/project_online/fi/main2.png') no-repeat center; font-weight: 400;
background-size: 100% 100%; line-height: 40px;
font-size: 24px; color: #333333;
font-weight: 400; margin-left: 53px;
line-height: 40px; text-align: justify;
color: #ffffff;
text-align: center;
padding-top: 98px;
box-sizing: border-box;
span {
font-size: 30px;
font-weight: bold;
} }
} }
} }
.main2 {
background: #f5f5f5;
padding: 70px 0 75px 0;
.is-h5 { .main_con1 {
overflow-x: auto; width: 1200px;
:deep(.swiper-slide) { margin: 0 auto;
width: 6.1rem; display: flex;
height: 6.44rem; justify-content: space-between;
background: red; align-items: center;
border-radius: 12px; img {
} height: 290px;
.main_list {
padding: 0.1rem;
.list_img {
width: 5.7rem;
height: 3.4rem;
object-fit: cover;
} }
.list_con {
width: 5.7rem;
font-size: 0.24rem; .con_content {
font-size: 20px;
font-weight: 400; font-weight: 400;
line-height: 2; line-height: 40px;
color: #333333; color: #333333;
margin-top: 0.37rem; margin-right: 53px;
text-align: justify;
} }
} }
.main3 { }
height: 3.97rem; .main3 {
background: url('https://webapp-pub.ezijing.com/project_online/fi/main2.png') no-repeat center; height: 308px;
background-size: 100% 100%; background: url('https://webapp-pub.ezijing.com/project_online/fi/main2.png')
font-size: 0.26rem; no-repeat center;
font-weight: 400; background-size: 100% 100%;
line-height: 2; font-size: 24px;
color: #ffffff; font-weight: 400;
text-align: justify; line-height: 40px;
box-sizing: border-box; color: #ffffff;
padding: 0.4rem 0.4rem 0 0.4rem; text-align: center;
margin-top: 0.4rem; padding-top: 98px;
span { box-sizing: border-box;
font-size: 0.15rem; span {
font-weight: bold; font-size: 30px;
} font-weight: bold;
} }
} }
</style> </style>
src/modules/pay/components/Confirm.vue
浏览文件 @ aa840f66
...@@ -99,17 +99,13 @@ const handlePay = () => { ...@@ -99,17 +99,13 @@ const handlePay = () => {
ElMessage.warning('请先勾选紫荆金保服务协议') ElMessage.warning('请先勾选紫荆金保服务协议')
} else { } else {
if (user.isLogin) { if (user.isLogin) {
console.log(mobile)
if (!mobile.value) { if (!mobile.value) {
console.log('111')
const params = { const params = {
payMode: payMode.value, payMode: payMode.value,
status: 'order' status: 'order'
} }
emit('success', params) emit('success', params)
} else { } else {
console.log('222')
handleCreateOrder() handleCreateOrder()
} }
} else { } else {
...@@ -138,10 +134,7 @@ const handlePrev = () => { ...@@ -138,10 +134,7 @@ const handlePrev = () => {
<div class="con_tit">课程信息确认</div> <div class="con_tit">课程信息确认</div>
<div class="con_pay"> <div class="con_pay">
<div class="pay_course"> <div class="pay_course">
<img <img :src="shopItem?.image_url" alt="" />
src="https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
alt=""
/>
<div class="course_info"> <div class="course_info">
<div class="info_tit">{{ shopItem?.title }}</div> <div class="info_tit">{{ shopItem?.title }}</div>
<div class="info_range"> <div class="info_range">
...@@ -212,10 +205,7 @@ const handlePrev = () => { ...@@ -212,10 +205,7 @@ const handlePrev = () => {
<div class="nav_title">确认订单</div> <div class="nav_title">确认订单</div>
</div> </div>
<div class="course_con"> <div class="course_con">
<img <img :src="shopItem?.image_url" alt="" />
src="https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
alt=""
/>
<div class="course_dec"> <div class="course_dec">
<div class="info_title">{{ shopItem?.title }}</div> <div class="info_title">{{ shopItem?.title }}</div>
<div class="info_date"> <div class="info_date">
......
src/modules/shop/components/CourseCatalogH5.vue
浏览文件 @ aa840f66
...@@ -18,154 +18,150 @@ const handleDetail = (item: any) => { ...@@ -18,154 +18,150 @@ const handleDetail = (item: any) => {
</script> </script>
<template> <template>
<div class="course_info course_info1"> <div class="course_info course_info1">
<div class="info_tit">课程目录</div> <div class="info_tit">课程目录</div>
<div class="info_line"></div> <div class="info_line"></div>
<div class="info_con1" v-if="shopItem?.type === '课程包'"> <div class="info_con1" v-if="shopItem?.type === '课程包'">
<div <div
class="course_list" class="course_list"
v-for="(item, index) in shopItem?.course_list" v-for="(item, index) in shopItem?.course_list"
:key="index" :key="index"
@click="handleDetail(item)" @click="handleDetail(item)"
> >
<img <img :src="item.image_url" alt="" />
src="https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" <div class="list_info">
alt="" <div class="tit">{{ item.title }}</div>
/> <div class="hour">{{ item.course_hour }}</div>
<div class="list_info">
<div class="tit">{{ item.title }}</div>
<div class="hour">{{ item.course_hour }}</div>
</div>
</div>
</div>
<div class="info_con1" v-else>
<el-tree
:data="shopItem?.content_list"
:props="defaultProps"
accordion
highlight-current
node-key="id"
:default-expanded-keys="[shopItem?.content_list[0].id]"
>
<template #default="{ node }">
<span class="custom-tree-node">
<span class="label">{{ node.label }}</span>
<span class="icon">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/icon_jt.png" alt="" />
</span>
</span>
</template>
</el-tree>
</div> </div>
</div>
</div>
<div class="info_con1" v-else>
<el-tree
:data="shopItem?.content_list"
:props="defaultProps"
accordion
highlight-current
node-key="id"
:default-expanded-keys="[shopItem?.content_list[0].id]"
>
<template #default="{ node }">
<span class="custom-tree-node">
<span class="label">{{ node.label }}</span>
<span class="icon">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/icon_jt.png"
alt=""
/>
</span>
</span>
</template>
</el-tree>
</div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.course_info {
.course_info { margin-top: 0.3rem;
margin-top: 0.3rem;
.info_tit {
.info_tit { font-size: 0.28rem;
font-size: 0.28rem; font-weight: 500;
font-weight: 500; color: #333333;
color: #333333; }
} .info_line {
.info_line { display: none;
display: none; }
}
.info_con1 {
.info_con1 { padding: 0.17rem 0.2rem;
padding: 0.17rem 0.2rem; border-top: 0.06rem solid #fff5e1 !important;
border-top: 0.06rem solid #fff5e1 !important; border: 1px solid #fff5e1;
border: 1px solid #fff5e1; border-radius: 15px;
border-radius: 15px; margin-top: 0.2rem;
margin-top: 0.2rem; .custom-tree-node {
.custom-tree-node{ .label {
.label{ width: 5rem;
width: 5rem;
display: inline-block; display: inline-block;
} }
.icon{ .icon {
img{ img {
height:0.09rem; height: 0.09rem;
} }
}
} }
}
.course_list:last-child {
border: none; .course_list:last-child {
border: none;
}
.course_list {
display: flex;
border-bottom: 1px solid #e8e8e8;
padding: 0.2rem 0;
box-sizing: border-box;
cursor: pointer;
img {
width: 2.2rem;
height: 1.4rem;
border-radius: 0.12rem;
} }
.course_list { .list_info {
height: 1.4rem;
margin-left: 0.21rem;
padding: 0.13rem 0 0.15rem 0;
display: flex; display: flex;
border-bottom: 1px solid #e8e8e8; flex-direction: column;
padding: 0.2rem 0; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; .tit {
img { font-size: 14px;
width: 2.2rem; font-weight: 400;
height: 1.4rem; line-height: 20px;
border-radius: 0.12rem; color: #666666;
} }
.list_info { .hour {
height: 1.4rem; font-size: 14px;
margin-left: 0.21rem; font-weight: 400;
padding: 0.13rem 0 0.15rem 0; line-height: 22px;
display: flex; color: #999999;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
.tit {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #666666;
}
.hour {
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: #999999;
}
} }
} }
} }
} }
}
:deep(.el-tree-node__content){ :deep(.el-tree-node__content) {
height: 0.6rem; height: 0.6rem;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
border-radius: 10px; border-radius: 10px;
background: #f5f8fb; background: #f5f8fb;
} }
:deep(.el-icon svg) { :deep(.el-icon svg) {
display: none; display: none;
}
:deep(.el-tree-node__label) {
font-size: 0.24rem;
font-weight: 400;
line-height: 0.32rem;
color: #333333;
}
:deep(.el-tree-node__children) {
.el-tree-node__content {
background: #ffffff !important;
border-bottom: 0.01rem solid #f4f4f4;
} }
:deep(.el-tree-node__label) {
font-size: 0.24rem; .el-tree-node__label {
font-size: 0.22rem;
font-weight: 400; font-weight: 400;
line-height: 0.32rem; line-height: 0.32rem;
color: #333333; color: #666666;
display: inline !important;
} }
:deep(.el-tree-node__children) { .icon {
.el-tree-node__content { display: none;
background: #ffffff !important;
border-bottom: 0.01rem solid #f4f4f4;
}
.el-tree-node__label {
font-size: 0.22rem;
font-weight: 400;
line-height: 0.32rem;
color: #666666;
display: inline !important;
}
.icon {
display: none;
}
} }
}
</style> </style>
\ No newline at end of file
src/modules/shop/components/CourseCatalogPC.vue
浏览文件 @ aa840f66
...@@ -18,165 +18,165 @@ const handleDetail = (item: any) => { ...@@ -18,165 +18,165 @@ const handleDetail = (item: any) => {
</script> </script>
<template> <template>
<div class="course_info course_info1"> <div class="course_info course_info1">
<div class="info_tit">课程目录</div> <div class="info_tit">课程目录</div>
<div class="info_line"></div> <div class="info_line"></div>
<div class="info_con1" v-if="shopItem?.type === '课程包'"> <div class="info_con1" v-if="shopItem?.type === '课程包'">
<div <div
class="course_list" class="course_list"
v-for="(item, index) in shopItem?.course_list" v-for="(item, index) in shopItem?.course_list"
:key="index" :key="index"
@click="handleDetail(item)" @click="handleDetail(item)"
> >
<img <img :src="item.image_url" alt="" />
src="https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" <div class="list_info">
alt="" <div class="tit">{{ item.title }}</div>
/> <div class="hour">{{ item.course_hour }}</div>
<div class="list_info">
<div class="tit">{{ item.title }}</div>
<div class="hour">{{ item.course_hour }}</div>
</div>
</div>
</div>
<div class="info_con1" v-else>
<el-tree
:data="shopItem?.content_list"
:props="defaultProps"
accordion
highlight-current
node-key="id"
:default-expanded-keys="[shopItem?.content_list[0].id]"
>
<template #default="{ node }">
<span class="custom-tree-node">
<span class="label">{{ node.label }}</span>
<span style="margin-left: 205px" class="icon">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/icon_jt.png" alt="" />
</span>
</span>
</template>
</el-tree>
</div> </div>
</div>
</div>
<div class="info_con1" v-else>
<el-tree
:data="shopItem?.content_list"
:props="defaultProps"
accordion
highlight-current
node-key="id"
:default-expanded-keys="[shopItem?.content_list[0].id]"
>
<template #default="{ node }">
<span class="custom-tree-node">
<span class="label">{{ node.label }}</span>
<span style="margin-left: 205px" class="icon">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project_online/fi/icon_jt.png"
alt=""
/>
</span>
</span>
</template>
</el-tree>
</div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.course_info1 { .course_info1 {
margin-top: 40px; margin-top: 40px;
}
.course_info {
.info_tit {
font-size: 18px;
font-weight: 500;
color: #333333;
} }
.course_info { .info_line {
.info_tit { width: 31px;
font-size: 18px; height: 2px;
font-weight: 500; background: #c1ab85;
color: #333333; margin: 9px 0 0 21px;
} }
.info_line { .info_con {
width: 31px; padding: 32px 22px 30px 28px;
height: 2px; background-color: #f5f8fb;
background: #c1ab85; margin-top: 20px;
margin: 9px 0 0 21px; border-radius: 16px;
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: #666666;
}
.info_con1 {
margin-top: 20px;
padding: 32px 19px;
border-top: 6px solid #fff5e1 !important;
border: 1px solid #fff5e1;
border-radius: 15px;
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: #333333;
.custom-tree-node {
.label {
width: 403px;
display: inline-block;
}
} }
.info_con {
padding: 32px 22px 30px 28px; .course_list:last-child {
background-color: #f5f8fb; border: none;
margin-top: 20px;
border-radius: 16px;
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: #666666;
} }
.info_con1 { .course_list {
margin-top: 20px; display: flex;
padding: 32px 19px; border-bottom: 1px solid #e8e8e8;
border-top: 6px solid #fff5e1 !important; padding: 20px 0;
border: 1px solid #fff5e1; box-sizing: border-box;
border-radius: 15px; cursor: pointer;
font-size: 16px; img {
font-weight: 400; width: 140px;
line-height: 32px; height: 80px;
color: #333333; border-radius: 6px;
.custom-tree-node{
.label{
width: 403px; display: inline-block;
}
}
.course_list:last-child {
border: none;
} }
.course_list { .list_info {
display: flex; height: 80px;
border-bottom: 1px solid #e8e8e8; margin-left: 14px;
padding: 20px 0; padding: 14px 0 6px 0;
box-sizing: border-box; .tit {
cursor: pointer; font-size: 14px;
img { font-weight: 400;
width: 140px; line-height: 20px;
height: 80px; color: #666666;
border-radius: 6px;
} }
.list_info { .hour {
height: 80px; font-size: 14px;
margin-left: 14px; font-weight: 400;
padding: 14px 0 6px 0; line-height: 22px;
.tit { color: #999999;
font-size: 14px; margin-top: 22px;
font-weight: 400;
line-height: 20px;
color: #666666;
}
.hour {
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: #999999;
margin-top: 22px;
}
} }
} }
} }
} }
}
:deep(.el-tree-node__content){ :deep(.el-tree-node__content) {
height: 50px; height: 50px;
margin-bottom: 16px; margin-bottom: 16px;
border-radius: 10px; border-radius: 10px;
background: #f5f8fb; background: #f5f8fb;
} }
:deep(.el-icon svg) { :deep(.el-icon svg) {
display: none; display: none;
}
:deep(.el-tree-node__label) {
font-size: 16px;
font-weight: 400;
line-height: 32px;
color: #333333;
}
:deep(.el-tree-node__children) {
.el-tree-node__content {
background: #ffffff !important;
border-bottom: 1px solid #f4f4f4;
} }
:deep(.el-tree-node__label) {
font-size: 16px; .el-tree-node__label {
font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 32px; line-height: 32px;
color: #333333; color: #666666;
display: inline !important;
} }
:deep(.el-tree-node__children) { .icon {
.el-tree-node__content { display: none;
background: #ffffff !important;
border-bottom: 1px solid #f4f4f4;
}
.el-tree-node__label {
font-size: 14px;
font-weight: 400;
line-height: 32px;
color: #666666;
display: inline !important;
}
.icon {
display: none;
}
} }
}
.is-h5{ .is-h5 {
.info_con1{ .info_con1 {
.custom-tree-node{ .custom-tree-node {
} }
} }
} }
......
src/modules/shop/components/CourseFooter.vue
浏览文件 @ aa840f66
<script lang="ts" setup> <script lang="ts" setup>
import { useDevice } from '@/composables/useDevice' import { useDevice } from '@/composables/useDevice'
import { useUserStore } from '@/stores/user'
const user = useUserStore()
const { mobile } = useDevice() const { mobile } = useDevice()
const router = useRouter() const router = useRouter()
const props = defineProps({ const props = defineProps({
payStatus:{ payStatus: {
type:String type: String
}, },
shopItem:{ shopItem: {
type:Object type: Object
} }
}) })
const buyDialogVisible = ref(false) const buyDialogVisible = ref(false)
const handleBuyCourse = () => { const handleBuyCourse = () => {
if (props.payStatus === '4' || props.shopItem?.isBuy === true) { console.log('999')
window.open('https://paa-learning.ezijing.com') if (user.isLogin) {
} else { if (props.payStatus === '4' || props.shopItem?.isBuy === true) {
if (props.shopItem?.type === '课程包') { window.open('https://paa-learning.ezijing.com')
buyDialogVisible.value = true
} else { } else {
router.push(`/shop/pay/${props.shopItem?.id}`) 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)}`
} }
} }
</script> </script>
<template> <template>
<div class="detail_footer"> <div class="detail_footer">
<div class="left_status" v-if="payStatus === '4' ||shopItem?.isBuy === true">已购买</div> <div
<template v-else> class="left_status"
<div class="footer_left"> v-if="payStatus === '4' || shopItem?.isBuy === true"
<div class="left_tit">全部课程价格</div> >
<div class="left_desc">根据课程价格累积计算</div> 已购买
</div> </div>
<div class="footer_price" v-if="!mobile"> <template v-else>
<div class="price_icon">¥</div> <div class="footer_left">
<div class="price_price">{{shopItem?.price }}</div> <div class="left_tit">全部课程价格</div>
</div> <div class="left_desc">根据课程价格累积计算</div>
</template> </div>
<div class="footer_price" v-if="!mobile">
<div v-if="!mobile"> <div class="price_icon">¥</div>
<div class="footer_btn" @click="handleBuyCourse"> <div class="price_price">{{ shopItem?.price }}</div>
{{ payStatus === '4' ||shopItem?.isBuy === true ? '立即学习' : '立即购买' }} </div>
</div> </template>
</div>
<div v-if="!mobile">
<div class="footer_btn" @click="handleBuyCourse">
{{
payStatus === '4' || shopItem?.isBuy === true
? '立即学习'
: '立即购买'
}}
</div>
</div>
<div v-else> <div v-else>
<div class="footer_btn" @click="handleBuyCourse" v-if="payStatus === '4' ||shopItem?.isBuy === true"> <div
<div class="btn_buy"> class="footer_btn"
立即学习 @click="handleBuyCourse"
</div> v-if="payStatus === '4' || shopItem?.isBuy === true"
>
<div class="btn_buy">立即学习</div>
</div> </div>
<div class="footer_btn" @click="handleBuyCourse" v-else > <div class="footer_btn" @click="handleBuyCourse" v-else>
<div class="footer_price"> <div class="footer_price">
<div class="price_icon">¥</div> <div class="price_icon">¥</div>
<div class="price_price">{{shopItem?.price }}</div> <div class="price_price">{{ shopItem?.price }}</div>
</div> </div>
<div class="btn_buy"> <div class="btn_buy">立即购买</div>
立即购买
</div>
</div>
</div> </div>
</div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc{ .is-pc {
.detail_footer { .detail_footer {
width: 1200px; width: 1200px;
height: 100px; height: 100px;
background: #ffffff; background: #ffffff;
box-shadow: 0px 1px 18px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 18px rgba(0, 0, 0, 0.1);
border-radius: 15px; border-radius: 15px;
margin: 30px auto; margin: 30px auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 46px 0 60px; padding: 0 46px 0 60px;
box-sizing: border-box; box-sizing: border-box;
.left_status { .left_status {
font-size: 24px; font-size: 24px;
font-weight: normal; font-weight: normal;
line-height: 34px;
color: #666666;
}
.footer_left {
.left_tit {
font-size: 16px;
font-weight: 400;
line-height: 34px; line-height: 34px;
color: #666666; color: #333333;
} }
.footer_left { .left_desc {
.left_tit { font-size: 14px;
font-size: 16px; font-weight: 400;
font-weight: 400; line-height: 34px;
line-height: 34px; color: #999999;
color: #333333;
}
.left_desc {
font-size: 14px;
font-weight: 400;
line-height: 34px;
color: #999999;
}
} }
.footer_price { }
display: flex; .footer_price {
margin-left: 605px; display: flex;
margin-left: 605px;
.price_icon { .price_icon {
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
line-height: 34px; line-height: 34px;
color: #aa1941; color: #aa1941;
}
.price_price {
font-size: 40px;
font-weight: normal;
line-height: 34px;
color: #aa1941;
}
} }
.footer_btn { .price_price {
width: 144px; font-size: 40px;
height: 48px; font-weight: normal;
line-height: 48px; line-height: 34px;
background: linear-gradient(180deg, #ffe9c6 0%, #e69b1c 100%); color: #aa1941;
border-radius: 24px;
font-size: 18px;
font-weight: bold;
color: #ffffff;
text-align: center;
margin-left: 43px;
cursor: pointer;
} }
} }
.footer_btn {
width: 144px;
height: 48px;
line-height: 48px;
background: linear-gradient(180deg, #ffe9c6 0%, #e69b1c 100%);
border-radius: 24px;
font-size: 18px;
font-weight: bold;
color: #ffffff;
text-align: center;
margin-left: 43px;
cursor: pointer;
}
} }
.is-h5{ }
.detail_footer{ .is-h5 {
border-radius: 0.2rem 0.2rem 0 0; .detail_footer {
background: #ffffff; border-radius: 0.2rem 0.2rem 0 0;
display: flex; background: #ffffff;
align-items: center; display: flex;
justify-content: space-between; align-items: center;
padding: 0.3rem; justify-content: space-between;
.left_status{ padding: 0.3rem;
.left_status {
font-size: 0.24rem;
font-weight: normal;
color: #666666;
}
.footer_left {
.left_tit {
font-size: 0.24rem; font-size: 0.24rem;
font-weight: normal; color: #333333;
color: #666666;
} }
.footer_left{ .left_desc {
.left_tit{ font-size: 0.22rem;
font-size: 0.24rem; color: #999999;
color: #333333;
}
.left_desc{
font-size: 0.22rem;
color: #999999;
}
.footer_price{
display: none;
}
} }
.footer_btn{ .footer_price {
width: 4.08rem; display: none;
height:0.8rem; }
background: linear-gradient(102deg, #F2CA8C 0%, #E69B1C 100%); }
border-radius: 0.4rem; .footer_btn {
text-align: center; width: 4.08rem;
line-height: 0.8rem; height: 0.8rem;
color: #FFFFFF; background: linear-gradient(102deg, #f2ca8c 0%, #e69b1c 100%);
display: flex; border-radius: 0.4rem;
justify-content: space-around; text-align: center;
.footer_price{ line-height: 0.8rem;
color: #ffffff;
display: flex;
justify-content: space-around;
cursor: pointer;
.footer_price {
display: flex; display: flex;
padding-left: 0.48rem; padding-left: 0.48rem;
margin-right: 0.18rem; margin-right: 0.18rem;
.price_icon{ .price_icon {
font-size: 0.24rem; font-size: 0.24rem;
color:#ffffff; color: #ffffff;
margin-top:0.05rem; margin-top: 0.05rem;
} }
.price_price{ .price_price {
font-size: 0.4rem; font-size: 0.4rem;
} }
} }
.btn_buy{ .btn_buy {
font-size: 0.28rem; font-size: 0.28rem;
color:#ffffff; color: #ffffff;
cursor: pointer; cursor: pointer;
}
} }
} }
} }
}
</style> </style>
\ No newline at end of file
src/modules/shop/components/CourseListItem.vue
浏览文件 @ aa840f66
<script setup lang="ts"> <script setup lang="ts">
import ContactDialog from '../components/ContactDialog.vue' import ContactDialog from '../components/ContactDialog.vue'
import { useDevice } from '@/composables/useDevice' import { useDevice } from '@/composables/useDevice'
import { useUserStore } from '@/stores/user'
const { mobile } = useDevice() const { mobile } = useDevice()
const user = useUserStore()
const router = useRouter() const router = useRouter()
const buyDialogVisible = ref(false) const buyDialogVisible = ref(false)
...@@ -17,6 +20,7 @@ const handleDatail = (item: any) => { ...@@ -17,6 +20,7 @@ const handleDatail = (item: any) => {
}) })
} }
const handleBuy = (courseItem: any) => { const handleBuy = (courseItem: any) => {
if (user.isLogin) {
if (courseItem?.isBuy === true) { if (courseItem?.isBuy === true) {
window.open('https://paa-learning.ezijing.com') window.open('https://paa-learning.ezijing.com')
} else { } else {
...@@ -26,7 +30,12 @@ const handleBuy = (courseItem: any) => { ...@@ -26,7 +30,12 @@ const handleBuy = (courseItem: any) => {
router.push(`/shop/pay/${courseItem.id}`) router.push(`/shop/pay/${courseItem.id}`)
} }
} }
} else {
window.location.href = `${
import.meta.env.VITE_LOGIN_URL
}?rd=${encodeURIComponent(location.href)}`
} }
}
</script> </script>
<template> <template>
...@@ -34,13 +43,7 @@ const handleBuy = (courseItem: any) => { ...@@ -34,13 +43,7 @@ const handleBuy = (courseItem: any) => {
<div class="tab_con"> <div class="tab_con">
<div class="con_left" @click="handleDatail(courseItem?.id)"> <div class="con_left" @click="handleDatail(courseItem?.id)">
<div class="left_img"> <div class="left_img">
<img <img :src="courseItem?.image_url" class="left_img" />
:src="
courseItem?.image_url ||
'https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
"
class="left_img"
/>
</div> </div>
<div class="left_type">{{ courseItem?.type }}</div> <div class="left_type">{{ courseItem?.type }}</div>
</div> </div>
...@@ -61,7 +64,13 @@ const handleBuy = (courseItem: any) => { ...@@ -61,7 +64,13 @@ const handleBuy = (courseItem: any) => {
<div class="price_num">{{ courseItem?.price }}</div> <div class="price_num">{{ courseItem?.price }}</div>
</div> </div>
<div class="bottom_btn"> <div class="bottom_btn">
<div class="btn_detail" v-if="!mobile" @click="handleDatail(courseItem?.id)">查看详情</div> <div
class="btn_detail"
v-if="!mobile"
@click="handleDatail(courseItem?.id)"
>
查看详情
</div>
<div class="btn_buy" @click="handleBuy(courseItem)"> <div class="btn_buy" @click="handleBuy(courseItem)">
{{ courseItem?.isBuy === true ? '立即学习' : '立即购买' }} {{ courseItem?.isBuy === true ? '立即学习' : '立即购买' }}
</div> </div>
...@@ -280,7 +289,7 @@ const handleBuy = (courseItem: any) => { ...@@ -280,7 +289,7 @@ const handleBuy = (courseItem: any) => {
.right_bottom { .right_bottom {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-top:0.24rem; margin-top: 0.24rem;
.bottom_btn { .bottom_btn {
.btn_buy { .btn_buy {
width: 1.3rem; width: 1.3rem;
......
src/modules/shop/components/DetailBanner.vue
浏览文件 @ aa840f66
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
import ShareDialog from './ShareDialog.vue' import ShareDialog from './ShareDialog.vue'
import ContactDialog from '../components/ContactDialog.vue' import ContactDialog from '../components/ContactDialog.vue'
import { useDevice } from '@/composables/useDevice' import { useDevice } from '@/composables/useDevice'
import { useUserStore } from '@/stores/user'
const user = useUserStore()
const { mobile } = useDevice() const { mobile } = useDevice()
const props = defineProps({ const props = defineProps({
shopItem: { shopItem: {
...@@ -18,14 +20,20 @@ const handleShare = () => { ...@@ -18,14 +20,20 @@ const handleShare = () => {
shareDialogVisible.value = true shareDialogVisible.value = true
} }
const handleBuyCourse = () => { const handleBuyCourse = () => {
if (props.payStatus === '4' || props.shopItem?.isBuy === true) { if (user.isLogin) {
window.open('https://paa-learning.ezijing.com') if (props.payStatus === '4' || props.shopItem?.isBuy === true) {
} else { window.open('https://paa-learning.ezijing.com')
if (props.shopItem?.type === '课程包') {
buyDialogVisible.value = true
} else { } else {
router.push(`/shop/pay/${props.shopItem?.id}`) 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)}`
} }
} }
</script> </script>
...@@ -48,7 +56,10 @@ const handleBuyCourse = () => { ...@@ -48,7 +56,10 @@ const handleBuyCourse = () => {
</div> </div>
<div class="con_share"> <div class="con_share">
<div class="share_btn" @click="handleShare"> <div class="share_btn" @click="handleShare">
<img src="https://webapp-pub.ezijing.com/project_online/fi/icon_share.png" alt="" /> <img
src="https://webapp-pub.ezijing.com/project_online/fi/icon_share.png"
alt=""
/>
分享 分享
</div> </div>
</div> </div>
...@@ -57,7 +68,12 @@ const handleBuyCourse = () => { ...@@ -57,7 +68,12 @@ const handleBuyCourse = () => {
</div> </div>
<div class="detail_buy"> <div class="detail_buy">
<div class="buy_left"> <div class="buy_left">
<div class="left_status" v-if="payStatus === '4' || shopItem?.isBuy === true">已购买</div> <div
class="left_status"
v-if="payStatus === '4' || shopItem?.isBuy === true"
>
已购买
</div>
<div class="left_price" v-else> <div class="left_price" v-else>
<div class="price_icon">¥</div> <div class="price_icon">¥</div>
<div class="price_num">{{ shopItem?.price }}</div> <div class="price_num">{{ shopItem?.price }}</div>
...@@ -68,25 +84,33 @@ const handleBuyCourse = () => { ...@@ -68,25 +84,33 @@ const handleBuyCourse = () => {
</div> </div>
</div> </div>
<div class="buy_right" @click="handleBuyCourse" v-if="!mobile"> <div class="buy_right" @click="handleBuyCourse" v-if="!mobile">
{{ payStatus === '4' || shopItem?.isBuy === true ? '立即学习' : '立即购买' }} {{
payStatus === '4' || shopItem?.isBuy === true ? '立即学习' : '立即购买'
}}
</div> </div>
</div> </div>
<div class="detail_info" v-if="mobile"> <div class="detail_info" v-if="mobile">
<div class="info_top"> <div class="info_top">
<div class="top_icon">适用人群</div> <div class="top_icon">适用人群</div>
<div class="top_for">{{shopItem?.for_people}}</div> <div class="top_for">{{ shopItem?.for_people }}</div>
</div> </div>
<div class="info_tit">{{shopItem?.title}}</div> <div class="info_tit">{{ shopItem?.title }}</div>
<div class="info_tips">{{ shopItem?.course_card }}</div> <div class="info_tips">{{ shopItem?.course_card }}</div>
<div class="info_time"> <div class="info_time">
<div class="time_left"> <div class="time_left">
<div class="left_tit">课程节数</div> <div class="left_tit">课程节数</div>
<div class="left_con"><span class="con_num">{{ shopItem?.course_chapter }}</span> <span class="con_txt">节</span></div> <div class="left_con">
<span class="con_num">{{ shopItem?.course_chapter }}</span>
<span class="con_txt">节</span>
</div>
</div> </div>
<div class="time_line"></div> <div class="time_line"></div>
<div class="time_left"> <div class="time_left">
<div class="left_tit">总课时</div> <div class="left_tit">总课时</div>
<div class="left_con"><span class="con_num">{{ shopItem?.course_total_hour }}</span> <span class="con_txt">小时</span></div> <div class="left_con">
<span class="con_num">{{ shopItem?.course_total_hour }}</span>
<span class="con_txt">小时</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -290,7 +314,7 @@ const handleBuyCourse = () => { ...@@ -290,7 +314,7 @@ const handleBuyCourse = () => {
.detail_info { .detail_info {
background: #ffffff; background: #ffffff;
margin: -0.2rem 0.3rem 0.3rem 0.3rem; margin: -0.2rem 0.3rem 0.3rem 0.3rem;
padding: 0.2rem; padding: 0.2rem;
position: relative; position: relative;
z-index: 100; z-index: 100;
border-radius: 0.12rem; border-radius: 0.12rem;
......
src/modules/shop/components/RecommendCourse.vue
浏览文件 @ aa840f66
...@@ -14,7 +14,6 @@ defineProps({ ...@@ -14,7 +14,6 @@ defineProps({
}) })
const swiper1 = ref(null) const swiper1 = ref(null)
function prev(swiper) { function prev(swiper) {
console.log(swiper, '111')
swiper?.slidePrev() swiper?.slidePrev()
} }
function next(swiper) { function next(swiper) {
...@@ -38,7 +37,7 @@ const handleDetail = (item) => { ...@@ -38,7 +37,7 @@ const handleDetail = (item) => {
:spaceBetween="20" :spaceBetween="20"
:slidePreview="1" :slidePreview="1"
:modules="[Navigation, Grid]" :modules="[Navigation, Grid]"
@swiper="swiper => (swiper1 = swiper)" @swiper="(swiper) => (swiper1 = swiper)"
> >
<SwiperSlide <SwiperSlide
v-for="(item, index) in shopRelatedList" v-for="(item, index) in shopRelatedList"
...@@ -46,13 +45,7 @@ const handleDetail = (item) => { ...@@ -46,13 +45,7 @@ const handleDetail = (item) => {
class="course-item" class="course-item"
@click="handleDetail(item)" @click="handleDetail(item)"
> >
<img <img :src="item.image_url" class="img" />
:src="
item.avatar ||
'https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
"
class="img"
/>
<div class="item_right"> <div class="item_right">
<div class="right_name">{{ item.title }}</div> <div class="right_name">{{ item.title }}</div>
<div class="right_price"> <div class="right_price">
...@@ -68,24 +61,20 @@ const handleDetail = (item) => { ...@@ -68,24 +61,20 @@ const handleDetail = (item) => {
</template> </template>
</div> </div>
<div v-else> <div v-else>
<div class="course-item" v-for="(item, index) in shopRelatedList" <div
:key="index" class="course-item"
@click="handleDetail(item)" v-for="(item, index) in shopRelatedList"
> :key="index"
<img @click="handleDetail(item)"
:src=" >
item.avatar || <img :src="item.image_url" class="img" />
'https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500' <div class="item_right">
" <div class="right_name">{{ item.title }}</div>
class="img" <div class="right_price">
/> <div class="price_icon">¥</div>
<div class="item_right"> <div class="price_num">{{ item.price }}</div>
<div class="right_name">{{ item.title }}</div>
<div class="right_price">
<div class="price_icon">¥</div>
<div class="price_num">{{ item.price }}</div>
</div>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -94,71 +83,71 @@ const handleDetail = (item) => { ...@@ -94,71 +83,71 @@ const handleDetail = (item) => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc{ .is-pc {
.teacher_list {
.teacher_list { margin-top: 20px;
margin-top: 20px; .list_con {
.list_con { width: 396px;
width: 396px; height: 433px;
height: 433px; background: #ffffff;
background: #ffffff; box-shadow: 0px 1px 18px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 18px rgba(0, 0, 0, 0.1); border-radius: 15px;
border-radius: 15px; border-top: 6px solid #fde6c1;
border-top: 6px solid #fde6c1; padding-top: 27px;
padding-top: 27px;
.con_tit { .con_tit {
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
line-height: 34px; line-height: 34px;
color: #333333; color: #333333;
text-align: center; text-align: center;
} }
.con_line { .con_line {
width: 31px; width: 31px;
height: 2px; height: 2px;
background: #c1ab85; background: #c1ab85;
margin: 9px 0 0 183px; margin: 9px 0 0 183px;
} }
.con_course { .con_course {
padding: 0 33px; padding: 0 33px;
position: relative; position: relative;
margin-top: 35px; margin-top: 35px;
.course-item { .course-item {
padding: 29px 27px 23px 0; padding: 29px 27px 23px 0;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
.img { .img {
width: 140px; width: 140px;
height: 80px; height: 80px;
border-radius: 6px; border-radius: 6px;
}
.item_right {
margin-left: 14px;
.right_name {
font-size: 14px;
font-weight: 400;
color: #666666;
width: 183px;
white-space: wrap;
} }
.right_price { .item_right {
display: flex; margin-left: 14px;
.price_icon { .right_name {
font-size: 12px; font-size: 14px;
font-weight: 500; font-weight: 400;
line-height: 34px; color: #666666;
color: #c1ab85; width: 183px;
margin-top: 2px; white-space: wrap;
} }
.price_num { .right_price {
font-size: 16px; display: flex;
font-weight: normal; .price_icon {
line-height: 34px; font-size: 12px;
color: #c1ab85; font-weight: 500;
line-height: 34px;
color: #c1ab85;
margin-top: 2px;
}
.price_num {
font-size: 16px;
font-weight: normal;
line-height: 34px;
color: #c1ab85;
}
} }
} }
} }
...@@ -166,38 +155,37 @@ const handleDetail = (item) => { ...@@ -166,38 +155,37 @@ const handleDetail = (item) => {
} }
} }
} }
} .is-h5 {
.is-h5{ .teacher_list {
.teacher_list{ padding: 0.32rem 0.2rem;
padding:0.32rem 0.2rem;
margin: 0.3rem; margin: 0.3rem;
background: #FFFFFF; background: #ffffff;
border-radius: 0.12rem; border-radius: 0.12rem;
.list_con{ .list_con {
.con_tit{ .con_tit {
font-size: 0.28rem; font-size: 0.28rem;
color: #333333; color: #333333;
font-weight: 500; font-weight: 500;
} }
.con_line{ .con_line {
display: none; display: none;
} }
} }
.con_course{ .con_course {
margin-top: 0.2rem; margin-top: 0.2rem;
background: #F4F8FB; background: #f4f8fb;
padding: 0.2rem 0.24rem; padding: 0.2rem 0.24rem;
border-radius: 0.16rem; border-radius: 0.16rem;
.course-item:last-child{ .course-item:last-child {
border: none; border: none;
} }
.course-item { .course-item {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
border-bottom: 0.01rem solid #E5E5E5; border-bottom: 0.01rem solid #e5e5e5;
padding:0.2rem 0; padding: 0.2rem 0;
.img { .img {
width: 2.2rem; width: 2.2rem;
height: 1.4rem; height: 1.4rem;
...@@ -221,23 +209,20 @@ const handleDetail = (item) => { ...@@ -221,23 +209,20 @@ const handleDetail = (item) => {
font-size: 0.2rem; font-size: 0.2rem;
font-weight: 500; font-weight: 500;
line-height: 0.34rem; line-height: 0.34rem;
color: #E5A12F; color: #e5a12f;
} }
.price_num { .price_num {
font-size: 0.24rem; font-size: 0.24rem;
font-weight: normal; font-weight: normal;
line-height: 0.34rem; line-height: 0.34rem;
color: #E5A12F; color: #e5a12f;
} }
} }
} }
} }
} }
} }
}
}
.my-swiper { .my-swiper {
--swiper-navigation-size: 14px; --swiper-navigation-size: 14px;
--swiper-navigation-color: #333333; --swiper-navigation-color: #333333;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论