150 lines
4.3 KiB
Vue
150 lines
4.3 KiB
Vue
<template>
|
||
<!-- 余额 -->
|
||
<view class="jy-balance-container underpainting">
|
||
<JyCommonHead title="余额"></JyCommonHead>
|
||
<view class="jy-balance-content ">
|
||
<view class="df aifc fdc mt20 plr40">
|
||
<text class="jy-balance-title">可用余额（元）</text>
|
||
<text class="jy-balance-pcie">1.00</text>
|
||
</view>
|
||
<image class="mineBalance" :src="mineBalance" mode="aspectFit"></image>
|
||
<view class="btn-group">
|
||
<view class="jy-balance-btn cz">充值</view>
|
||
<view @click="withdrawalPopup.open()" class="jy-balance-btn tx">提现</view>
|
||
</view>
|
||
</view> <!-- 明细变动 列表 -->
|
||
<view class="jy-balance-list">
|
||
<uni-section class="line" title="明细变动" @click="goto('/pages/mine/balance-details/index')">
|
||
<template v-slot:default>
|
||
<JyBalanceItem></JyBalanceItem>
|
||
</template>
|
||
<template v-slot:right>
|
||
<uni-icons type="right"></uni-icons>
|
||
</template>
|
||
</uni-section>
|
||
</view>
|
||
<!-- 提现弹窗 -->
|
||
<uni-popup ref="withdrawalPopup" type="center">
|
||
<view class="jy-withdrawal-popup f1 bfff pr">
|
||
<view class="title">
|
||
<text>输入提现账号</text>
|
||
</view>
|
||
<view class="close-btn" @click="withdrawalPopup.close()">×</view>
|
||
<view class="p25">
|
||
<uni-forms :modelValue="formData">
|
||
<uni-forms-item label="输入卡号" name="name">
|
||
<uni-easyinput :inputBorder="false" type="text" suffixIcon="scan" v-model="formData.bankNub"
|
||
placeholder="点击输入本人银行卡号"></uni-easyinput>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
<button class="save-btn" @click="savePost">保存</button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import { ref, reactive } from 'vue'
|
||
import JyCommonHead from '@/components/public/jy-common-head'
|
||
import JyBalanceItem from './components/jy-balance-item'
|
||
|
||
import mineBalance from '@/static/mine-balance.png'
|
||
const withdrawalPopup = ref(null)
|
||
const formData = reactive({
|
||
bankNub: ''
|
||
})
|
||
const savePost = () => {
|
||
console.log('我是保存');
|
||
withdrawalPopup.close()
|
||
}
|
||
const goto = (url) => {
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.jy-balance-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 0 40rpx;
|
||
|
||
.jy-balance-content {
|
||
background: #FFFFFF;
|
||
height: 318rpx;
|
||
width: 100%;
|
||
margin-top: 60rpx;
|
||
border-radius: 20rpx;
|
||
z-index: 1;
|
||
|
||
.jy-balance-title {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.jy-balance-pcie {
|
||
font-size: 72rpx;
|
||
color: #3D3D3D;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.mineBalance {
|
||
width: 200rpx;
|
||
height: 224rpx;
|
||
position: absolute;
|
||
top: 60rpx;
|
||
right: 60rpx;
|
||
}
|
||
|
||
.btn-group {
|
||
display: flex;
|
||
margin-top: 66rpx;
|
||
|
||
|
||
.jy-balance-btn {
|
||
margin: 0 20rpx;
|
||
height: 84rpx;
|
||
width: 323rpx;
|
||
border-radius: 2306rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.tx {
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
|
||
}
|
||
|
||
.cz {
|
||
color: #333333;
|
||
font-size: 32rpx;
|
||
border: 2rpx solid #DDDDDD;
|
||
}
|
||
}
|
||
}
|
||
|
||
.jy-balance-list {
|
||
margin-top: 20rpx;
|
||
width: 100%;
|
||
border-radius: 20rpx;
|
||
|
||
}
|
||
|
||
|
||
|
||
::v-deep .uni-section {
|
||
border-radius: 20rpx;
|
||
|
||
.uni-section__content-title {
|
||
color: #333333;
|
||
font-size: 32rpx !important;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
</style> |