93 lines
3.5 KiB
Vue
93 lines
3.5 KiB
Vue
<!-- 使用 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 } 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>
|