<script setup>
|
import{ ref ,onMounted} from 'vue'
|
|
const choosedMoney = ref()
|
const disabled = ref(true)
|
//选择金额
|
const moneyList = ref([
|
{value:50,active:true},
|
{value:100,active:false},
|
{value:200,active:false},
|
{value:500,active:false},
|
{value:1000,active:false},
|
{value:'其他金额',active:false},
|
])
|
const activeStyle = ref({
|
backgroundColor:'#5EADFF',
|
color:'#fff'
|
})
|
function chooseMoney(index1){
|
moneyList.value.forEach((item,index) =>{
|
if(item.active == true){
|
item.active = false
|
}
|
})
|
moneyList.value[index1].active = true
|
if(index1 == 5){
|
disabled.value = false
|
choosedMoney.value = ''
|
}else{
|
choosedMoney.value = moneyList.value[index1].value
|
otherMoney.value = ''
|
disabled.value = true
|
}
|
}
|
//输入金额
|
const otherMoney = ref()
|
//支付方式
|
const payMethod = ref()
|
const payList = ref([
|
{text:"支付宝支付",value:1,checked:true,img:'../../static/images/recharge/pay.png'},
|
{text:"微信支付",value:2,checked:false,img:'../../static/images/recharge/wx.png'},
|
{text:"余额",value:3,checked:false,img:'../../static/images/recharge/balance.png'},
|
])
|
function choosePay(index1){
|
payList.value.forEach((item,index) =>{
|
if(item.checked == true){
|
item.checked = false
|
}
|
})
|
payList.value[index1].checked = true
|
payMethod.value = payList.value[index1].value
|
}
|
function submit(){
|
let money = ''
|
if(disabled.value){
|
money = choosedMoney.value
|
}else{
|
money = otherMoney.value
|
}
|
console.log('money',money)
|
}
|
</script>
|
<template>
|
<view class="container">
|
<navbar title="账户充值"></navbar>
|
<view class="content">
|
<view class="main">
|
<view class="money">
|
<view class="money-title">
|
<view class="title-icon"></view>
|
<view class="title-text">充值金额</view>
|
</view>
|
<view class="money-list">
|
<block v-for="(item,index) in moneyList" :key="index">
|
<view class="money-box" :style="item.active ? activeStyle : ''" @click="chooseMoney(index)">￥{{item.value}}</view>
|
</block>
|
</view>
|
</view>
|
<view class="other-money">
|
<view class="money-title">
|
<view class="title-icon"></view>
|
<view class="title-text">其他金额</view>
|
</view>
|
<view class="money-input">
|
<input :disabled = 'disabled' :focus = '!disabled' placeholder="请输入其他金额" v-model="otherMoney"/>
|
</view>
|
</view>
|
<view class="pay-methods">
|
<view class="money-title">
|
<view class="title-icon"></view>
|
<view class="title-text">请选择支付方式</view>
|
</view>
|
<view class="methods-list">
|
<block v-for="(item,index) in payList">
|
<view class="pay-item">
|
<view class="pay-item-right">
|
<image :src="item.img" alt=""></image>
|
<view>{{item.text}}</view>
|
</view>
|
<radio :value="item.value" :checked="item.checked" @click="choosePay(index)"/>
|
</view>
|
</block>
|
</view>
|
</view>
|
</view>
|
<view class="submit-btn" @click="submit()">立即充值</view>
|
</view>
|
</view>
|
</template>
|
|
<style lang="scss" scoped>
|
.container{
|
width: 100%;
|
height: 100vh;
|
.content{
|
width: 100%;
|
height:calc(100vh - 176rpx);
|
background:linear-gradient(to top,#FFFFFF,#E8EFFF);
|
overflow-y: scroll;
|
.main{
|
width: 686rpx;
|
height:1262rpx;
|
background: #FFFFFF;
|
border-top-right-radius: 24rpx;
|
border-top-left-radius: 24rpx;
|
margin: 20rpx auto 0;
|
padding:0 25rpx;
|
box-sizing: border-box;
|
.money{
|
width: 100%;
|
height:378rpx;
|
padding-top: 58rpx;
|
// background: #65ffb2;
|
box-sizing: border-box;
|
.money-list{
|
margin-top:40rpx;
|
width:100%;
|
height: 240rpx;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
flex-wrap: wrap;
|
.money-box{
|
width:160rpx;
|
height: 100rpx;
|
border:2rpx solid #75C8EB;
|
border-radius: 8rpx;
|
font-weight: 300;
|
font-size: 28rpx;
|
color: #4EB6E3;
|
text-align: center;
|
line-height: 100rpx;
|
}
|
}
|
}
|
.other-money{
|
width: 100%;
|
height:164rpx;
|
margin-top:58rpx;
|
.money-input{
|
margin:40rpx auto 0;
|
width:calc(100% - 40rpx);
|
height: 80rpx;
|
box-sizing: border-box;
|
border-radius:8rpx;
|
border: 2rpx solid #75C8EB;
|
input{
|
width:94%;
|
height: 80rpx;
|
margin-left:6%;
|
}
|
}
|
}
|
.pay-methods{
|
width: 100%;
|
margin-top:58rpx;
|
.methods-list{
|
margin-top:40rpx;
|
width: 100%;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
// background: #49B4E3;
|
height:216rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: flex-start;
|
.pay-item{
|
width:100%;
|
display: flex;
|
justify-content:space-between;
|
align-items: center;
|
.pay-item-right{
|
display: flex;
|
image{
|
width: 42rpx;
|
height: 42rpx;
|
margin-right:34rpx;
|
}
|
view{
|
font-weight: 300;
|
font-size: 28rpx;
|
color: #111111;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
.submit-btn{
|
width: 686rpx;
|
height: 98rpx;
|
background:#5EA1FA;
|
border-radius:50rpx;
|
text-align: center;
|
line-height: 98rpx;
|
letter-spacing:3rpx;
|
margin:0 auto;
|
font-weight: 300;
|
font-size: 36rpx;
|
color: #FFFFFF;
|
}
|
}
|
.money-title{
|
display: flex;
|
align-items: center;
|
.title-icon{
|
width:8rpx;
|
height:36rpx;
|
background:#49B4E3;
|
margin-right:12rpx;
|
}
|
.title-text{
|
font-weight: 300;
|
font-size: 28rpx;
|
color: #000000;
|
}
|
}
|
</style>
|
