添加充值金额页面

2025-08-19 17:18:39 +08:00
parent 8f515ba020
commit 0dc8897e96
1 changed files with 92 additions and 0 deletions
--- a/src/pages-sub/store-recharge/store-recharge.vue
+++ b/src/pages-sub/store-recharge/store-recharge.vue
@ -0,0 +1,92 @@
+<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
+<route lang="jsonc" type="page">{
+	"layout": "tabbar",
+	"style": {
+		"navigationStyle": "custom"
+	}
+}</route>
+<template>
+	<view>
+		<view>
+			<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent;" :height="navbarHeight">
+				<template #left>
+					<view class="h-48rpx flex items-center" @click="storeRecharge.back">
+						<wd-img width="48rpx" height="48rpx" :src="`${OSS}icon/icon_arrow_left.png`" class="mt-6rpx"></wd-img>
+						<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">充值</view>
+					</view>
+				</template>
+			</wd-navbar>
+		</view>
+
+        <view class="mt-34rpx mx-70rpx flex items-center">
+            <view class="font-400 text-30rpx text-[#303133] leading-42rpx">转入方式</view>
+            <view class="flex-1 ml-72rpx flex items-center">
+                <wd-img width="52rpx" height="52rpx" :src="`${OSS}icon/icon_weichat.png`"></wd-img>
+                <view class="ml-18rpx text-[#303133] text-32rpx leading-44rpx fon-bold">微信</view>
+            </view>
+        </view>
+
+        <view class="bg-white mt-26rpx rounded-16rpx px-38rpx py-28rpx mx-32rpx">
+            <view class="text-28rpx font-400 text-[#303133] leading-40rpx">转入金额</view>
+            <view class="mt-44rpx flex items-center">
+                <view class="text-[#303133] text-36rpx font-400 leading-50rpx">￥</view>
+                <wd-input v-model="rechargeMoney" inputmode="decimal" size="large" placeholder="请输入金额" required no-border placeholderStyle="font-size: 48rpx; color: #c9c9c9;"></wd-input>
+            </view>
+        </view>
+
+        <view class="text-28rpx font-400 text-[#303133] leading-40rpx mx-70rpx mt-38rpx">推广方式</view>
+
+        <view class="bg-white mt-28rpx rounded-16rpx px-38rpx mx-32rpx h-150rpx flex items-center">
+            <view class="text-[#303133] text-30rpx font-bold leading-42rpx">门店推广</view>
+            <view class="flex-1 bg-[#F8F9FA] text-[#9CA3AF] rounded-8rpx ml-28rpx h-80rpx leading-80rpx rounded-8rpx pl-28rpx">上海浦东新区茶室店铺</view>
+        </view>
+
+        <view @click="storeRecharge.handleRecharge" class="fixed left-0 right-0 bottom-0 z-50 mx-60rpx flex items-center justify-center bg-[#4C9F44] rounded-8rpx text-[#fff] text-30rpx font-bold" :style="{ height: '90rpx', bottom: 'calc(env(safe-area-inset-bottom) + 26rpx)', opacity: canRecharge ? 1 : 0.5 }">
+            确定转入
+        </view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { ref, inject } from 'vue'
+	import { getNavBarHeight } from '@/utils/index'
+
+	let navbarHeight = ref<number>(0)
+	let OSS = inject('OSS')
+    let rechargeMoney = ref<string>('')
+    let canRecharge = ref<boolean>(false)
+
+	onLoad(() => {
+		navbarHeight.value = getNavBarHeight()
+	})
+
+    const storeRecharge = {
+        back: () => {       
+            uni.navigateBack({
+                delta: 1,
+            })
+        },
+
+        handleRecharge: () => {
+            if (rechargeMoney.value) {
+                // 这里可以添加充值逻辑
+                uni.showToast({
+                    title: '充值成功',
+                    icon: 'success'
+                })
+                storeRecharge.back()
+            } else {
+                uni.showToast({
+                    title: '请输入充值金额',
+                    icon: 'none'
+                })
+            }
+        }
+    }  
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #F6F7F8;
+	}
+</style>