mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-07 03:14:59 +08:00
349ffa4f34
- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能 - 优化状态管理和事件处理逻辑，简化代码结构 - 更新样式和布局以适应新组件结构 - 添加新功能和修复已知问题，提升用户体验
127 lines
2.4 KiB
Vue
127 lines
2.4 KiB
Vue
<template>
|
|
<view class="page">
|
|
<view class="form-card">
|
|
<view class="title">充值金额</view>
|
|
<view class="amount-row">
|
|
<text class="currency">￥</text>
|
|
<u-input
|
|
v-model="price"
|
|
type="digit"
|
|
border="none"
|
|
placeholder="请输入充值金额"
|
|
input-align="left"
|
|
class="amount-input"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="submit" :class="{ disabled: flag }" @click="handlerRecharge">充值</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
import { recharge } from '@/api/members'
|
|
|
|
const price = ref('')
|
|
const flag = ref(true)
|
|
|
|
watch(price, (val) => {
|
|
flag.value = !(Number(val) > 0)
|
|
})
|
|
|
|
async function handlerRecharge() {
|
|
const amount = Number(price.value)
|
|
if (!(amount > 0)) {
|
|
uni.showToast({ title: '请输入充值金额', icon: 'none' })
|
|
return
|
|
}
|
|
const res = await recharge({ price: amount })
|
|
if (res.data.success) {
|
|
uni.navigateTo({
|
|
url: `/pages/cart/payment/payOrder?orderType=RECHARGE&recharge_sn=${res.data.result.rechargeSn}`,
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
min-height: 100vh;
|
|
background: #f5f5f5;
|
|
padding: 24rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-card {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 32rpx;
|
|
}
|
|
|
|
.title {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.amount-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 16rpx 0 8rpx;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.currency {
|
|
flex-shrink: 0;
|
|
margin-right: 16rpx;
|
|
font-size: 56rpx;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
color: #333;
|
|
}
|
|
|
|
.amount-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
:deep(.amount-input .u-input) {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
:deep(.amount-input .u-input__content) {
|
|
background: transparent !important;
|
|
}
|
|
|
|
:deep(.amount-input .u-input__content__field-wrapper__field) {
|
|
height: 72rpx !important;
|
|
min-height: 72rpx !important;
|
|
font-size: 56rpx !important;
|
|
font-weight: 600 !important;
|
|
color: #333 !important;
|
|
}
|
|
|
|
:deep(.amount-input .u-input__content__field-wrapper__field--placeholder) {
|
|
font-size: 32rpx !important;
|
|
font-weight: 400 !important;
|
|
color: #c0c4cc !important;
|
|
}
|
|
|
|
.submit {
|
|
margin-top: 80rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
background: $light-color;
|
|
color: #fff;
|
|
border-radius: 44rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
|
|
&.disabled {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
</style>
|