feat: 完成页面开发

src/pages/invest/index.vue

@@ -40,6 +40,7 @@
         </view>
         <view
           class="text-center px-50 absolute bottom-0 left-0 text-12 text-#fff rounded-full py-8 bg-[linear-gradient(45deg,rgba(59,129,243,1),rgba(55,230,236,1))]"
+          @click="onInvest(item)"
         >
           立即投资
         </view>
@@ -50,20 +51,52 @@
         </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>
@@ -72,6 +105,7 @@ const onGoInvestDetail = () => {
   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%;
 }