要求:点击充值按钮弹出弹窗,点击相应弹窗中的确认按钮可进行相应充值,点击取消弹窗隐藏
页面效果
1.html部分
<template>
<!-- 导航栏 -->
<div>
<van-nav-bar title="我的钱包" @click-left="onClickLeft" left-arrow>
<template #right>
<van-icon name="search" size="18" />
</template>
</van-nav-bar>
</div>
<!-- 总资产 -->
<div class="money">
<van-row justify="space-around">
<van-col span="7">
<van-row>
<van-col span="24">总资产(元)</van-col>
<van-col span="24">{{ detailmoney }}</van-col> //插值语法
</van-row>
</van-col>
<van-col span="7">
<van-col span="24">累计充值(元)</van-col>
<van-col span="24">{{ parply }}</van-col>
</van-col>
<van-col span="7">
<van-col span="24">累计消费(元)</van-col>
<van-col span="24">{{consume}}</van-col>
</van-col>
</van-row>
</div>
<!-- 充值 -->
<div class="chong">
<van-row>
<van-col span="13">充值¥100赠送¥10</van-col>
<van-col span="5" offset="5">
<div class="chong1" @click="chongzhi">充值</div>
</van-col>
</van-row>
<van-row>
<van-col span="24" style="height: 20px"></van-col>
<van-col span="13">充值¥1赠送¥1000</van-col>
<van-col span="5" offset="5">
<div class="chong1" @click="chongzhi1">充值</div>
</van-col>
</van-row>
<!-- 弹窗 -->
<van-dialog v-model:show="show" title="充值" show-cancel-button @confirm="confirmFn" @cancel="cancelFn" confirmButtonText="确认">
<p>确定充值</p >
</van-dialog>
</div>
</template>
2.css样式部分
<style>
.money {
background-color: rgb(67, 64, 64);
height: 80px;
border-radius: 10px;
color: white;
line-height: 40px;
text-align: center;
margin-top: 10px;
}
.chong {
text-align: center;
margin-top: 10px;
padding: 20px;
border: 1px solid rgb(235, 229, 229);
}
.chong1 {
border-radius: 15px;
background-color: rgb(219, 8, 8);
color: white;
}
3.script方法部分
<script>
export default {
data() {
return {
allmoney:5048.22, //自行编写数据
parply:2488.33,
consume:6680.09,
show:false, //设定初始值
money:false //资产的变动
}
},
// 限制溢出
computed:{
detailmoney(){
return this.allmoney.toFixed(2) //保留后两位
}
},
methods: {
chongzhi(){ //充值按钮
this.show=true //弹窗是否显示
this.money=true //第一个按钮为true
},
chongzhi1(){
this.show=true
this.money=false//第二个按钮为false
},
confirmFn(){ //确认按钮
if(this.money){ //判断:如果为true执行第一个,为false执行第二个
this.allmoney=this.allmoney+110
this.parply=this.parply+110
}else{
this.allmoney=this.allmoney+1001
this.parply=this.parply+1001
}
},
onClickLeft() { //头部返回按钮
this.$router.push('/my')
},
}
}
</script>