feat: x5初始化
This commit is contained in:
anonymous
+40
-221
@@ -3,247 +3,66 @@
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '保障',
|
||||
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>
|
||||
<NavBar title-color="#333" />
|
||||
<view class="mt-320 pl-15 text-24 text-white" style="text-shadow: 0 0 2px #ff5153">
|
||||
银行卡恢复列表
|
||||
</view>
|
||||
|
||||
<view class="flex p-15 mt-15">
|
||||
<view class="mt-15 px-15 pb-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"
|
||||
class="flex items-center mt-10 text-#333 p-15 rounded-10 bg-#FFF9F2 border-2 border-#FFDD99 border-solid"
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
>
|
||||
{{ item.title }}
|
||||
<view class="flex-1">
|
||||
<view class="text-15">{{ item.name }}</view>
|
||||
<view class="text-12 mt-8">邀请1人</view>
|
||||
</view>
|
||||
<view
|
||||
class="btn-gradient text-white text-12 border-1 border-#EFB85A border-solid py-4 px-30 rounded-4 px-10"
|
||||
v-if="item.ishuifu"
|
||||
>
|
||||
已恢复
|
||||
</view>
|
||||
<view
|
||||
class="text-12 text-#EFB85A border-1 border-#EFB85A border-solid py-4 px-30 rounded-4 px-10"
|
||||
@click="handleRecover(item)"
|
||||
v-else
|
||||
>
|
||||
恢复
|
||||
</view>
|
||||
</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'
|
||||
import { getBankCardRecoverAPI, getBankCardRecoverListAPI } from '@/service'
|
||||
import { getImageUrl, showModal } from '@/utils'
|
||||
|
||||
defineOptions({
|
||||
name: 'Home',
|
||||
})
|
||||
const { list, onReload } = useListPageRequest(getBankCardRecoverListAPI)
|
||||
|
||||
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 handleRecover = async (item: any) => {
|
||||
const res = await getBankCardRecoverAPI({ id: item.id })
|
||||
showModal(res.msg ? res.msg : '恢复成功')
|
||||
onReload()
|
||||
}
|
||||
|
||||
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 {
|
||||
await submitInvestAPI({
|
||||
investid: item.id,
|
||||
type: 3,
|
||||
})
|
||||
} catch (error) {
|
||||
if (error?.data?.msg.includes('邀请')) {
|
||||
return uni.switchTab({
|
||||
url: '/pages/invite/index',
|
||||
})
|
||||
}
|
||||
return
|
||||
}
|
||||
await userStore.loadUserInfo()
|
||||
uni.showToast({
|
||||
title: '投资成功',
|
||||
icon: 'none',
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" 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;
|
||||
background-image: url('@/static/images/invest/bg.png'),
|
||||
linear-gradient(to right, #e4c198, #e3bd93);
|
||||
background-repeat: no-repeat;
|
||||
background-position:
|
||||
top -160rpx center,
|
||||
top center;
|
||||
background-size: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user