335 lines
10 KiB
Vue
335 lines
10 KiB
Vue
<script>
|
||
import { Image as VanImage, Icon, Dialog } from 'vant';
|
||
import Swiper from './components/swiper/swiper.vue';
|
||
import { getEcosystem } from '@/assets/js/utils/ecosystem'
|
||
import { fetchUserInfo } from '@/api/user/token'
|
||
import { getParamsFromUrl } from '@/assets/js/utils/get-url'
|
||
|
||
export default {
|
||
name: "home",
|
||
components: {
|
||
VanImage,
|
||
VanIcon: Icon,
|
||
SwiperBanner: Swiper
|
||
},
|
||
data() {
|
||
return {
|
||
bannerList: [
|
||
{
|
||
imgUrl: require("./img/swiper-image.svg")
|
||
},
|
||
{
|
||
imgUrl: require("./img/swiper-image.svg")
|
||
}
|
||
],
|
||
name: "",
|
||
sex: "",
|
||
type: "",
|
||
permission: {
|
||
goNext: true
|
||
},
|
||
titleSrc: "http://ncc.ebiz-digits.com:39527/gsc/IHRHN5/7b/04/63/7b0463aa135f4a1f922b5171bcec1d14/images/主页/u26.png",
|
||
bannerSrc: "http://ncc.ebiz-digits.com:39527/gsc/IHRHN5/7b/04/63/7b0463aa135f4a1f922b5171bcec1d14/images/主页/u44.svg",
|
||
}
|
||
},
|
||
computed: {
|
||
title() {
|
||
if (!Number(this.type)) return "欢迎使用幸福人寿生态系统！"
|
||
return `亲爱的${this.name}${this.sex == 1 ? '女士' : '先生'}！`
|
||
}
|
||
},
|
||
methods: {
|
||
goEcosystem(ecosystem, swe) {
|
||
this.permission.goNext && this.$router.push({
|
||
name: 'service',
|
||
params: {
|
||
ecosystem: getEcosystem(ecosystem)
|
||
},
|
||
query: {
|
||
swe: swe
|
||
}
|
||
})
|
||
}
|
||
},
|
||
mounted() {
|
||
const params = getParamsFromUrl(globalThis.location.href)
|
||
const token = params.get('token')
|
||
if (token) {
|
||
globalThis.localStorage.setItem('token', token)
|
||
fetchUserInfo().then(res => {
|
||
const { content } = res.content
|
||
this.name = content.name
|
||
this.sex = content.sex
|
||
this.type = content.type
|
||
})
|
||
}
|
||
else Dialog({
|
||
message: '页面访问有误，请重试',
|
||
}).then(() => {
|
||
this.$router.go(-1)
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section class="container-wrap">
|
||
<div class="home-container">
|
||
<!-- 标题提示语部分 -->
|
||
<section class="title">
|
||
<img width="78px" :src="titleSrc" />
|
||
<h2> <span>您好</span> {{ title }}</h2>
|
||
</section>
|
||
<!-- 轮播图部分 -->
|
||
<section class="swiper">
|
||
<!-- <van-image width="100%" :src="bannerSrc" /> -->
|
||
<swiper-banner :list="bannerList" />
|
||
</section>
|
||
<!-- 服务提示语部分 -->
|
||
<section class="tips">
|
||
<van-icon name="info-o" />
|
||
<span>服务项目及费用仅供参考，具体以供应商实际提供为准。</span>
|
||
</section>
|
||
<!-- 生态系统部分 -->
|
||
<section class="ecosystem">
|
||
<h3>生态服务</h3>
|
||
<div class="service-grid">
|
||
<div class="service-item" style="grid-column: 1 / 16;">
|
||
<div>
|
||
<h4>健康管理</h4>
|
||
<p>点击下方查看更多服务</p>
|
||
</div>
|
||
<button class="go-btn" @click="goEcosystem(1, true)">去看看</button>
|
||
</div>
|
||
<div style="grid-column: 16 / 24;">
|
||
<div class="line-bg" style="margin-bottom: 10px;">
|
||
<span>子女教育</span>
|
||
<button class="go-btn-v" @click="goEcosystem(38)">去看看</button>
|
||
</div>
|
||
<div class="line-bg">
|
||
<span>财富管理</span>
|
||
<button class="go-btn-v" @click="goEcosystem(48)">去看看</button>
|
||
</div>
|
||
</div>
|
||
<div class="service-item" style="grid-column: 1 / 12;">
|
||
<div>
|
||
<h4>养老服务</h4>
|
||
<p>点击下方查看更多服务</p>
|
||
</div>
|
||
<button class="go-btn" @click="goEcosystem(28)">去看看</button>
|
||
</div>
|
||
<div class="service-item" style="grid-column: 12 / 24;">
|
||
<div>
|
||
<h4>生活娱乐</h4>
|
||
<p>点击下方查看更多服务</p>
|
||
</div>
|
||
<button class="go-btn" @click="goEcosystem(55)">去看看</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
$title-height: 120px;
|
||
$primary-color: #c9202d;
|
||
$card-bg-color: #FFFFFF;
|
||
$border-radius: 12px;
|
||
$ecosystem-bg-color: linear-gradient(#fbeef0 10px, #FFF 50px);
|
||
|
||
.container-wrap {
|
||
position: relative;
|
||
background-color: #F5F5F5;
|
||
min-height: 100vh;
|
||
|
||
padding-bottom: 20px;
|
||
|
||
.home-container {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
position: relative;
|
||
|
||
.title {
|
||
width: 100%;
|
||
height: $title-height;
|
||
background-color: $primary-color;
|
||
color: white;
|
||
padding: 15px 20px;
|
||
position: relative;
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
span {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
h2 {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
|
||
span {
|
||
font-size: 25px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
|
||
&::before {
|
||
content: "“";
|
||
}
|
||
|
||
&::after {
|
||
content: "”";
|
||
}
|
||
}
|
||
}
|
||
|
||
.swiper {
|
||
padding: 0;
|
||
margin-top: -70px;
|
||
position: relative;
|
||
// z-index: 10;
|
||
|
||
.banner-card {
|
||
background-color: $card-bg-color;
|
||
border-radius: $border-radius;
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
|
||
span {
|
||
color: #8BC34A;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.banner-content {
|
||
h3 {
|
||
color: #8BC34A;
|
||
font-size: 24px;
|
||
margin-bottom: 5px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
p {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin: 5px 0;
|
||
}
|
||
|
||
.en-text {
|
||
font-size: 10px;
|
||
color: #999;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
margin: 15px 10px;
|
||
padding: 12px 15px;
|
||
background-color: #fff;
|
||
border-radius: $border-radius;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
span {
|
||
margin-left: 10px;
|
||
font-size: 12px;
|
||
color: #795548;
|
||
}
|
||
}
|
||
|
||
.ecosystem {
|
||
margin: 10px 10px;
|
||
border-radius: $border-radius;
|
||
padding: 15px 15px;
|
||
background: $ecosystem-bg-color;
|
||
|
||
h3 {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin: 15px 0;
|
||
color: #333;
|
||
}
|
||
|
||
.service-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(24, 1fr);
|
||
gap: 15px;
|
||
|
||
.line-bg {
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
border-radius: 8px;
|
||
// height: 38%;
|
||
background: $ecosystem-bg-color;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
padding: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.go-btn-v {
|
||
width: 60px;
|
||
align-self: flex-end;
|
||
background-color: #fff;
|
||
color: #E53935;
|
||
border: 1px solid #E53935;
|
||
border-radius: 15px;
|
||
padding: 3px 10px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.service-item {
|
||
background: $ecosystem-bg-color;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
min-height: 120px;
|
||
|
||
h4 {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
p {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
|
||
|
||
.go-btn {
|
||
align-self: center;
|
||
width: 60px;
|
||
background-color: #E53935;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 15px;
|
||
padding: 3px 10px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|