mirror of
http://112.124.100.131/happyinsurance_eco/ebiz-sunful-eco-web.git
synced 2025-12-06 17:36:50 +08:00
feat(views):重构公司介绍和发展历程页面- 公司介绍页面: - 使用 v-html 解析富文本内容 - 移除调试日志- 发展历程页面: -从后端 API 获取动态数据 - 使用字典树解析历史事件 - 更新时间线组件以显示动态数据- 移除 nav-layout 和 page-layout 中的拖拽滚动功能
This commit is contained in:
陈昱达
@@ -80,36 +80,34 @@ export default {
|
||||
this.handleResize()
|
||||
window.addEventListener('resize', this.debounce(this.handleResize, 300))
|
||||
|
||||
|
||||
const dragScroll = document.querySelector('.nav-container')
|
||||
|
||||
let isDragging = false
|
||||
let lastClientY = 0
|
||||
|
||||
dragScroll.addEventListener('mousedown', e => {
|
||||
isDragging = true
|
||||
lastClientY = e.clientY
|
||||
dragScroll.style.cursor = 'grabbing'
|
||||
})
|
||||
|
||||
window.addEventListener('mousemove', e => {
|
||||
if (!isDragging) return
|
||||
|
||||
const deltaY = e.clientY - lastClientY
|
||||
window.scrollBy({
|
||||
top: -deltaY,
|
||||
left: 0,
|
||||
behavior: 'auto' // 立即滚动
|
||||
})
|
||||
|
||||
lastClientY = e.clientY
|
||||
})
|
||||
|
||||
window.addEventListener('mouseup', () => {
|
||||
isDragging = false
|
||||
dragScroll.style.cursor = 'grab'
|
||||
})
|
||||
|
||||
// const dragScroll = document.querySelector('.nav-container')
|
||||
//
|
||||
// let isDragging = false
|
||||
// let lastClientY = 0
|
||||
//
|
||||
// dragScroll.addEventListener('mousedown', e => {
|
||||
// isDragging = true
|
||||
// lastClientY = e.clientY
|
||||
// dragScroll.style.cursor = 'grabbing'
|
||||
// })
|
||||
//
|
||||
// window.addEventListener('mousemove', e => {
|
||||
// if (!isDragging) return
|
||||
//
|
||||
// const deltaY = e.clientY - lastClientY
|
||||
// window.scrollBy({
|
||||
// top: -deltaY,
|
||||
// left: 0,
|
||||
// behavior: 'auto' // 立即滚动
|
||||
// })
|
||||
//
|
||||
// lastClientY = e.clientY
|
||||
// })
|
||||
//
|
||||
// window.addEventListener('mouseup', () => {
|
||||
// isDragging = false
|
||||
// dragScroll.style.cursor = 'grab'
|
||||
// })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -80,34 +80,69 @@ export default {
|
||||
this.handleResize()
|
||||
window.addEventListener('resize', this.debounce(this.handleResize, 300))
|
||||
|
||||
const dragScroll = document.querySelector('.nav-container')
|
||||
// let wheelTimeout = null
|
||||
// let isHandlingScroll = false
|
||||
//
|
||||
// window.addEventListener(
|
||||
// 'wheel',
|
||||
// function(event) {
|
||||
// event.preventDefault()
|
||||
//
|
||||
// // if (isHandlingScroll) return
|
||||
//
|
||||
// // 清除旧的定时器
|
||||
// // if (wheelTimeout) {
|
||||
// // clearTimeout(wheelTimeout)
|
||||
// // }
|
||||
//
|
||||
// wheelTimeout = setTimeout(() => {
|
||||
// isHandlingScroll = true
|
||||
//
|
||||
// const direction = event.deltaY > 0 ? 1 : -1
|
||||
// const windowHeight = 1920 - 350
|
||||
//
|
||||
// window.scrollBy({
|
||||
// top: direction * windowHeight,
|
||||
// behavior: 'smooth'
|
||||
// })
|
||||
//
|
||||
// // 动画完成后恢复
|
||||
// setTimeout(() => {
|
||||
// isHandlingScroll = false
|
||||
// }, 800)
|
||||
// }, 300) // 等待用户停止滚动 300ms 后才触发
|
||||
// },
|
||||
// { passive: false }
|
||||
// )
|
||||
|
||||
let isDragging = false
|
||||
let lastClientY = 0
|
||||
|
||||
dragScroll.addEventListener('mousedown', e => {
|
||||
isDragging = true
|
||||
lastClientY = e.clientY
|
||||
dragScroll.style.cursor = 'grabbing'
|
||||
})
|
||||
|
||||
window.addEventListener('mousemove', e => {
|
||||
if (!isDragging) return
|
||||
|
||||
const deltaY = e.clientY - lastClientY
|
||||
window.scrollBy({
|
||||
top: -deltaY,
|
||||
left: 0,
|
||||
behavior: 'auto' // 立即滚动
|
||||
})
|
||||
|
||||
lastClientY = e.clientY
|
||||
})
|
||||
|
||||
window.addEventListener('mouseup', () => {
|
||||
isDragging = false
|
||||
dragScroll.style.cursor = 'grab'
|
||||
})
|
||||
// const dragScroll = document.querySelector('.nav-container')
|
||||
//
|
||||
// let isDragging = false
|
||||
// let lastClientY = 0
|
||||
//
|
||||
// dragScroll.addEventListener('mousedown', e => {
|
||||
// isDragging = true
|
||||
// lastClientY = e.clientY
|
||||
// dragScroll.style.cursor = 'grabbing'
|
||||
// })
|
||||
//
|
||||
// window.addEventListener('mousemove', e => {
|
||||
// if (!isDragging) return
|
||||
//
|
||||
// const deltaY = e.clientY - lastClientY
|
||||
// window.scrollBy({
|
||||
// top: -deltaY,
|
||||
// left: 0,
|
||||
// behavior: 'auto' // 立即滚动
|
||||
// })
|
||||
//
|
||||
// lastClientY = e.clientY
|
||||
// })
|
||||
//
|
||||
// window.addEventListener('mouseup', () => {
|
||||
// isDragging = false
|
||||
// dragScroll.style.cursor = 'grab'
|
||||
// })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
import { TimeSelect } from 'element-ui'
|
||||
import timeLine from './components/time-line.vue'
|
||||
import timeLineHistory from './components/time-line-history.vue'
|
||||
import { active } from 'sortablejs'
|
||||
|
||||
import { getSysDictTree } from '@/api/generatedApi'
|
||||
import { findDictByCode, getDictIdByCode } from '@/assets/js/utils/dict-utils.js'
|
||||
export default {
|
||||
name: 'development',
|
||||
components: {
|
||||
@@ -12,36 +12,9 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timelineList: [
|
||||
{
|
||||
2025: '2025年幸福人寿将生态建设提升为公司重点任务，与各个领域的前沿机构、组织、企业通力合作，围绕“健康医疗、养老服务、子女教育、财富管理、生活娱乐”五个方面，打造五位一体的“幸福生态圈”。'
|
||||
},
|
||||
{
|
||||
2023: '幸福人寿全国空中客服业务中心在日肃兰州成立。通过“空中客服”这一全新服务模式，客户借助手机视频连线公司客服人员，即可在线办理业务享受优质快捷、有温度的服务体验。'
|
||||
},
|
||||
{
|
||||
2022: '幸福人寿创新推出品牌吉祥物“小福鹿鹿”完善公司品牌体系，极大提升了品牌活力。'
|
||||
},
|
||||
{
|
||||
2020: '原中国银保监会批复幸福人寿变更股东的请示。中国信达资产管理股份有限公司持有的幸福人寿股权转让给诚泰财产保险股份有限公司和东莞市交通投资集团有限公司。<br/><br/>为塑造品牌形象，持续提升品牌影响力，幸福人寿启用全新企业标识，发布了新版视觉识别体系。'
|
||||
},
|
||||
{
|
||||
2016: '经原中国保监会批复，幸福人寿获得经营税优健康险业务资格。'
|
||||
},
|
||||
{
|
||||
2015: '经原中国保监会批准，幸福人寿开发的“幸福房来宝”成为保险行业首款反向抵押养老险产品。'
|
||||
},
|
||||
{
|
||||
2012: '幸福人寿VIP客户管理系统、咨询投诉系统、电子保单系统上线，致力于为客户提供更便捷、优质的服务。'
|
||||
},
|
||||
{
|
||||
2008: '幸福人寿与“国际SOS”签署《急难援助服务协议》，为客户提供全球范围内的紧急救援服务。'
|
||||
},
|
||||
{
|
||||
2007: '2007年10月31日，获得原中国保监会的开业批复，11月5日，幸福人寿正式成立。<br/><br/>幸福人寿电话中心正式上线运营，开通全国统一客户服务热线，整合电话接听、在线服务等功能，打造综合性服务平台。'
|
||||
}
|
||||
],
|
||||
active: null
|
||||
timelineList: [],
|
||||
active: null,
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -51,10 +24,61 @@ export default {
|
||||
return list
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tableData: {
|
||||
handler(newVal) {
|
||||
// 将tableData转换为timelineList格式
|
||||
this.timelineList = newVal.map(item => {
|
||||
const obj = {}
|
||||
obj[item.year] = item.event
|
||||
return obj
|
||||
})
|
||||
this.active = newVal[0].year
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTimeChange(time) {
|
||||
this.active = time
|
||||
},
|
||||
// 获取发展历程数据
|
||||
fetchDevelopmentHistoryData() {
|
||||
getSysDictTree({ dictCode: 'FZLC', getDetail: 1 })
|
||||
.then(response => {
|
||||
if (response.success && response.content && response.content.content) {
|
||||
// 解析数据并填充到页面
|
||||
this.parseDictData(response.content.content)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取FZLC字典数据失败:', error)
|
||||
this.$message.error('获取数据失败')
|
||||
})
|
||||
},
|
||||
|
||||
// 解析字典数据并填充到页面
|
||||
parseDictData(dictData) {
|
||||
// 查找发展历程数据
|
||||
const historySection = findDictByCode(dictData, 'FZLC')
|
||||
if (historySection && historySection.children && historySection.children.length > 0) {
|
||||
// 查找子节点"FZLC-FZLC"
|
||||
const childSection = findDictByCode([historySection], 'FZLC-FZLC')
|
||||
if (childSection && childSection.sysDictDetailDTOs) {
|
||||
this.historyData = childSection.sysDictDetailDTOs.map(item => ({
|
||||
year: item.detailName || '',
|
||||
event: item.detailContent || ''
|
||||
}))
|
||||
// 同步更新tableData
|
||||
this.tableData = JSON.parse(JSON.stringify(this.historyData))
|
||||
}
|
||||
}
|
||||
|
||||
// 更新原始数据副本
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchDevelopmentHistoryData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -38,11 +38,11 @@ export default {
|
||||
<div class="intro-text">
|
||||
<h2>COMPANY PROFILE</h2>
|
||||
<h1>关于幸福</h1>
|
||||
<p>
|
||||
{{ content.paragraph1 }}
|
||||
</p>
|
||||
<p>
|
||||
{{ content.paragraph2 }}
|
||||
<p v-html="content.paragraph1"></p>
|
||||
<!-- {{ content.paragraph1 }}-->
|
||||
<!-- </p>-->
|
||||
<p v-html="content.paragraph2">
|
||||
<!-- {{ }}-->
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -84,7 +84,6 @@ export default {
|
||||
fetchCompanyProfileData() {
|
||||
getSysDictTree({ dictCode: 'GSJS', getDetail: 1 })
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
if (response.success && response.content && response.content.content) {
|
||||
// 处理返回的字典数据
|
||||
// 保存原始字典数据
|
||||
@@ -100,9 +99,6 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.fetchCompanyProfileData()
|
||||
|
||||
console.log(this.aboutData)
|
||||
console.log(this.businessData)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user