zzzzzak
253 lines
7.0 KiB
Vue
253 lines
7.0 KiB
Vue
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
|
||
<route lang="json5">
|
||
{
|
||
style: {
|
||
navigationStyle: 'custom',
|
||
navigationBarTitleText: '保障',
|
||
},
|
||
}
|
||
</route>
|
||
<template>
|
||
<view class="invest-page">
|
||
<NavBar />
|
||
<view class="py-20 flex flex-col mx-15 rounded-20 main-content text-white">
|
||
<view class="text-14 pl-15">保险概览</view>
|
||
<view class="flex mt-30">
|
||
<view class="flex-1 text-center">
|
||
<view class="text-14">全部</view>
|
||
<view class="text-16 font-bold mt-15">
|
||
{{ userStore.userInfo?.yanglao + userStore.userInfo?.yiliao }}份
|
||
</view>
|
||
</view>
|
||
<view class="flex-1 text-center">
|
||
<view class="text-14">养老</view>
|
||
<view class="text-16 font-bold mt-15">{{ userStore.userInfo?.yanglao }}份</view>
|
||
</view>
|
||
<view class="flex-1 text-center">
|
||
<view class="text-14">医疗</view>
|
||
<view class="text-16 font-bold mt-15">{{ userStore.userInfo?.yiliao }}份</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flex p-15 mt-15">
|
||
<view
|
||
v-for="item in tabList"
|
||
:key="item.value"
|
||
class="px-24 mr-15 bg-#DEEBFF text-#3B81F3 py-4 rounded-full text-14"
|
||
:class="{ 'btn-gradient text-white': item.value === tabValue }"
|
||
@click="tabValue = item.value"
|
||
>
|
||
{{ item.title }}
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<template v-if="tabValue === 1">
|
||
<view
|
||
v-for="item in investmentList"
|
||
:key="item.id"
|
||
class="p-15 bg-white rounded-20 mx-auto w-345 relative mb-15"
|
||
>
|
||
<view class="flex">
|
||
<image
|
||
class="rounded-10 w-100 h-100"
|
||
mode="aspectFill"
|
||
:src="getImageUrl(item.leftimage)"
|
||
/>
|
||
<view class="flex-1 ml-15">
|
||
<view class="text-15 text-#333 font-bold">{{ item.name }}</view>
|
||
<view class="w-200 flex flex-wrap items-center mt-5">
|
||
<view
|
||
class="px-14 mr-5 mb-5 py-2 whitespace-nowrap text-12 text-#D6A165 rounded-2 bg-#FFEBD4"
|
||
v-for="(tag, index) in item.labeltag.split(',')"
|
||
:key="tag"
|
||
:class="{
|
||
'!text-#3B81F3 !bg-#D4E8FF': index % 2 === 1,
|
||
}"
|
||
>
|
||
{{ tag }}
|
||
</view>
|
||
</view>
|
||
<view class="text-12 mt-15 text-#999" v-html="item.content"></view>
|
||
</view>
|
||
</view>
|
||
<view class="flex items-center mt-15">
|
||
<view class="flex-1 text-center">
|
||
<view class="text-15 text-#FF3B30">{{ item.dividend }}(%)</view>
|
||
<view class="text-14 text-#999">日收益</view>
|
||
</view>
|
||
<view class="text-#D9D9D9">|</view>
|
||
<view class="flex-1 text-center">
|
||
<view class="text-15 text-#FF3B30">{{ item.days }}(天)</view>
|
||
<view class="text-14 text-#999">周期</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="mt-15 px-30 text-center text-15 text-white rounded-full py-8 btn-gradient"
|
||
@click="onInvest(item)"
|
||
>
|
||
购买（{{ item.money }}元）
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<template v-else>
|
||
<view
|
||
v-for="item in investmentList"
|
||
:key="item.id"
|
||
class="p-15 bg-white rounded-20 mx-auto w-345 relative mb-15"
|
||
>
|
||
<view class="flex">
|
||
<image
|
||
class="rounded-10 w-100 h-100"
|
||
mode="aspectFill"
|
||
:src="getImageUrl(item.leftimage)"
|
||
/>
|
||
<view class="flex-1 ml-15">
|
||
<view class="text-15 text-#333 font-bold">{{ item.name }}</view>
|
||
<view class="text-12 mt-15 text-#999" v-html="item.content" />
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="text-center text-15 text-white rounded-full py-8 border-#3B81F3 border-1 border-solid mt-15"
|
||
>
|
||
<text class="text-gradient" @click="onShowRights(item)">查看权益</text>
|
||
</view>
|
||
<view
|
||
class="text-center text-15 text-white rounded-full py-8 btn-gradient mt-15"
|
||
@click="onInvest(item)"
|
||
>
|
||
我要投保（{{ item.money }}元）
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<wd-popup
|
||
v-model="showRightConfig.show"
|
||
:title="`${showRightConfig.data?.name}权益`"
|
||
custom-style="border-radius: 15px"
|
||
>
|
||
<view>
|
||
<image
|
||
class="w-345 h-345"
|
||
:src="getImageUrl(showRightConfig.data?.rightimage)"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
</wd-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import NavBar from '@/components/NavBar.vue'
|
||
import AlipayIcon from '@/static/images/invest/alipay-icon.png'
|
||
import WechatIcon from '@/static/images/invest/wechat-icon.png'
|
||
import UnionpayIcon from '@/static/images/invest/unionpay-icon.png'
|
||
import { getInvestmentListAPI, submitInvestAPI } from '@/service'
|
||
import { useUserStore } from '@/store'
|
||
import { getImageUrl, mergeStep, showModal } from '@/utils'
|
||
|
||
defineOptions({
|
||
name: 'Home',
|
||
})
|
||
|
||
const tabList = [
|
||
{
|
||
value: 1,
|
||
title: '养老',
|
||
},
|
||
{
|
||
value: 2,
|
||
title: '医疗',
|
||
},
|
||
]
|
||
const tabValue = ref(1)
|
||
|
||
const { list: investmentList, onReload } = useListPageRequest((params) =>
|
||
getInvestmentListAPI({
|
||
...params,
|
||
type: tabValue.value,
|
||
}),
|
||
)
|
||
|
||
watch(
|
||
() => tabValue.value,
|
||
() => {
|
||
onReload()
|
||
},
|
||
)
|
||
|
||
const userStore = useUserStore()
|
||
|
||
const onGoInvestDetail = () => {
|
||
uni.navigateTo({
|
||
url: '/pages-sub/invest-detail/index',
|
||
})
|
||
}
|
||
|
||
const showRightConfig = ref({
|
||
show: false,
|
||
data: null,
|
||
})
|
||
watch(
|
||
() => showRightConfig.value.show,
|
||
(val) => {
|
||
if (!val) {
|
||
showRightConfig.value.data = null
|
||
}
|
||
},
|
||
)
|
||
const onShowRights = (item: any) => {
|
||
showRightConfig.value = {
|
||
show: true,
|
||
data: item,
|
||
}
|
||
}
|
||
|
||
const onInvest = mergeStep(async (item: any) => {
|
||
try {
|
||
uni.showLoading()
|
||
await submitInvestAPI({
|
||
investid: item.id,
|
||
type: 3,
|
||
})
|
||
} catch (error) {
|
||
if (error?.data?.msg.includes('邀请')) {
|
||
return uni.switchTab({
|
||
url: '/pages/invite/index',
|
||
})
|
||
}
|
||
return
|
||
} finally {
|
||
uni.hideLoading()
|
||
}
|
||
await userStore.loadUserInfo()
|
||
uni.showToast({
|
||
title: '投保成功',
|
||
icon: 'none',
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.invest-page {
|
||
min-height: 100vh;
|
||
padding-bottom: 100px;
|
||
background-image: url('@/static/images/home/bg.jpg');
|
||
background-position: top;
|
||
background-size: cover;
|
||
}
|
||
.main-content {
|
||
background: linear-gradient(90deg, #71a4f8 0%, #3b81f3 103.83%);
|
||
}
|
||
.bg-blue-red {
|
||
background-image: linear-gradient(90.02deg, #8bb9ff 0.02%, #be4343 100.27%);
|
||
}
|
||
.text-blue-red {
|
||
background-image: linear-gradient(90.02deg, #8bb9ff 0.02%, #be4343 100.27%);
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
</style>
|