基于Vue實現(xiàn)我的錢包充值功能的示例代碼

更新時間：2024年01月28日 11:00:22 作者：Briar.荊棘

這篇文章主要為大家詳細介紹了如何基于Vue實現(xiàn)我的錢包充值功能,文中的示例代碼簡潔易懂,具有一定的借鑒價值,有需要的小伙伴可以參考一下

頁面效果

實現(xiàn)代碼

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>

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;
}

script方法部分

export default {
  data() {
      return {
        allmoney:5048.22, //自行編寫數(shù)據(jù)
        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執(zhí)行第一個，為false執(zhí)行第二個
        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')
    },
  }
}

到此這篇關于基于Vue實現(xiàn)我的錢包充值功能的示例代碼的文章就介紹到這了,更多相關Vue充值內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: