vue实现我的钱包（充值功能）

要求：点击充值按钮弹出弹窗，点击相应弹窗中的确认按钮可进行相应充值，点击取消弹窗隐藏

页面效果

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>