feat: 完成对接

2024-12-31 21:07:08 +08:00
parent ecd30a2e82
commit fecf6535a8
99 changed files with 2253 additions and 299 deletions
@@ -0,0 +1,134 @@
+<!-- 使用 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">1000000</view>
+    </view>
+
+    <view class="mt-100">
+      <view
+        v-for="item in 10"
+        :key="item"
+        class="invest-item relative flex flex-col items-center pt-15"
+      >
+        <view class="text-15 text-#3F88F6">5G通讯</view>
+        <view class="flex w-full mt-15">
+          <view class="flex-1 text-center">
+            <view class="text-22 text-#333 font-bold">1000.00</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">1000.00</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'
+
+defineOptions({
+  name: 'Home',
+})
+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 = (item: any) => {
+  // uni.navigateTo({
+  //   url: '/pages-sub/invest-immediately/index',
+  // })
+  showPayType.value = true
+}
+</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>