anonymous
138 lines
4.0 KiB
Vue
138 lines
4.0 KiB
Vue
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
|
||
<route lang="json5" type="page">
|
||
{
|
||
style: {
|
||
navigationStyle: 'custom',
|
||
navigationBarTitleText: '投资',
|
||
},
|
||
}
|
||
</route>
|
||
<template>
|
||
<view class="invest-page">
|
||
<NavBar>
|
||
<template #right>
|
||
<view @click="onGoInvestDetail" class="text-14 text-#486CCF">投资明细</view>
|
||
</template>
|
||
</NavBar>
|
||
<view
|
||
class="flex shadow-[0_1px_4px_rgba(255,255,255,0.8)] mt-100 pt-12 pb-8 flex-col mx-15 rounded-10 items-center bg-[linear-gradient(180deg,rgba(212,232,255,1),rgba(229,239,249,0.8))]"
|
||
>
|
||
<view class="text-15 text-#486CCF">我的投资金</view>
|
||
<view class="text-30 text-#333 font-bold">{{ userStore.userInfo.member_investment }}</view>
|
||
</view>
|
||
|
||
<view class="mt-60">
|
||
<view
|
||
v-for="item in fundList"
|
||
:key="item.id"
|
||
class="invest-item relative flex flex-col items-center pt-15"
|
||
>
|
||
<view class="text-15 text-#3F88F6">{{ item.fund_name }}</view>
|
||
<view class="flex w-full mt-15">
|
||
<view class="flex-1 text-center">
|
||
<view class="text-22 text-#333 font-bold">{{ item.buy_price }}</view>
|
||
<view class="text-12 mt-4 text-#3B81F3">投资金额</view>
|
||
</view>
|
||
<view class="flex-1 text-center">
|
||
<view class="text-22 text-#FF3B30 font-bold">{{ item.day_income }}</view>
|
||
<view class="text-12 mt-4 text-#3B81F3">每日分红</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="text-center px-50 absolute bottom-0 left-0 text-12 text-#fff rounded-full py-8 bg-[linear-gradient(80deg,rgba(59,129,243,1),rgba(55,230,236,1))]"
|
||
@click="onInvest(item)"
|
||
>
|
||
立即投资
|
||
</view>
|
||
<view
|
||
class="text-center px-16 absolute bottom-13 right-33 text-12 text-#fff rounded-br-10 rounded-tl-10 py-4 bg-[linear-gradient(80deg,rgba(59,129,243,1),rgba(55,230,236,1))]"
|
||
:class="{
|
||
'!bg-[linear-gradient(80deg,#E2AF74,#FFCC40)]': item.is_ai,
|
||
'!text-#9B6F33': item.is_ai,
|
||
}"
|
||
>
|
||
{{ item.is_ai ? '会员产品' : '新手体验' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<wd-action-sheet v-model="showPayType" :panels="panels" @select="onSelectPayType" />
|
||
</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 { buyFundAPI, getFundListAPI } from '@/service'
|
||
import { useUserStore } from '@/store'
|
||
import { mergeStep, showModal } from '@/utils'
|
||
|
||
defineOptions({
|
||
name: 'Home',
|
||
})
|
||
|
||
const userStore = useUserStore()
|
||
|
||
const showPayType = ref(false)
|
||
const panels = ref([
|
||
{
|
||
iconUrl: WechatIcon,
|
||
title: '微信支付',
|
||
},
|
||
{
|
||
iconUrl: AlipayIcon,
|
||
title: '支付宝支付',
|
||
},
|
||
{
|
||
iconUrl: UnionpayIcon,
|
||
title: '银联支付',
|
||
},
|
||
])
|
||
|
||
const onGoInvestDetail = () => {
|
||
uni.navigateTo({
|
||
url: '/pages-sub/invest-detail/index',
|
||
})
|
||
}
|
||
|
||
const onSelectPayType = ({ item, index }: any) => {
|
||
console.log(item, index)
|
||
alert(item.title)
|
||
}
|
||
|
||
const onInvest = mergeStep(async (item: any) => {
|
||
await showModal('确认投资?')
|
||
await buyFundAPI({
|
||
fund_id: item.id,
|
||
})
|
||
await userStore.loadUserInfo()
|
||
uni.showToast({
|
||
title: '投资成功',
|
||
icon: 'none',
|
||
})
|
||
})
|
||
const { list: fundList } = useListPageRequest(getFundListAPI)
|
||
</script>
|
||
|
||
<style>
|
||
.invest-page {
|
||
min-height: 100vh;
|
||
padding-bottom: 100px;
|
||
background-image: url('@/static/images/invest/bg.png');
|
||
background-repeat: no-repeat;
|
||
background-attachment: fixed;
|
||
background-position: top -80rpx center;
|
||
background-size: 100%;
|
||
}
|
||
.invest-item {
|
||
width: 690rpx;
|
||
height: 352rpx;
|
||
margin: 0 auto 30rpx;
|
||
background-image: url('@/static/images/invest/item-bg.png');
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: 100%;
|
||
}
|
||
</style>
|