x-forend/src/pages/invest/index.vue

<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  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 mt-30 flex-col mx-15 rounded-10 px-40 py-32 main-content">
      <view class="text-14 text-#6784C7">我的投资金</view>
      <view class="text-35 leading-35 mt-10 text-#BE7143 font-bold">
        {{ userStore.userInfo?.money }}
      </view>
    </view>

    <view class="mt-100">
      <view
        v-for="item in investmentList"
        :key="item.id"
        class="invest-item relative flex flex-col items-center pt-15"
      >
        <view class="text-15 text-#3F88F6">{{ item.name }}</view>
        <view class="flex w-full mt-15">
          <view class="flex-1 text-center">
            <view class="text-22 text-#333 font-bold">{{ item.money }}</view>
            <view class="text-12 mt-4 text-blue-red">投资金额</view>
          </view>
          <view class="flex-1 text-center">
            <view class="text-22 text-#FF3B30 font-bold">{{ item.dividend }}</view>
            <view class="text-12 mt-4 text-blue-red">每日分红</view>
          </view>
        </view>
        <view
          class="text-center px-50 absolute bottom-0 left-0 text-12 text-#fff rounded-full py-8 bg-blue-red"
          @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-blue-red"
        >
          新手体验
        </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 { getInvestmentListAPI, submitInvestAPI } from '@/service'
import { useUserStore } from '@/store'
import { mergeStep, showModal } from '@/utils'

defineOptions({
  name: 'Home',
})
const showPayType = ref(false)
const panels = ref([
  {
    iconUrl: WechatIcon,
    title: '微信支付',
  },
  {
    iconUrl: AlipayIcon,
    title: '支付宝支付',
  },
  {
    iconUrl: UnionpayIcon,
    title: '银联支付',
  },
])

const { list: investmentList } = useListPageRequest(getInvestmentListAPI)

const userStore = useUserStore()

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 submitInvestAPI({
    investid: item.id,
    type: 3,
  })
  await userStore.loadUserInfo()
  uni.showToast({
    title: '投资成功',
    icon: 'none',
  })
})
</script>

<style>
.invest-page {
  min-height: 100vh;
  padding-bottom: 100px;
  background-color: #ebbf92;
  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%;
}
.main-content {
  background-image: url('@/static/images/invest/main-bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.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>