快捷導(dǎo)航

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

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

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

頁(yè)面效果

實(shí)現(xiàn)代碼

html部分

<template>
  <!-- 導(dǎo)航欄 -->
  <div>
    <van-nav-bar title="我的錢(qián)包" @click-left="onClickLeft" left-arrow>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
  </div>
 <!-- 總資產(chǎn) -->
  <div class="money">
    <van-row justify="space-around">  
      <van-col span="7">
        <van-row>
          <van-col span="24">總資產(chǎn)(元)</van-col>
          <van-col span="24">{{ detailmoney }}</van-col> //插值語(yǔ)法
        </van-row>
      </van-col>
      <van-col span="7">
        <van-col span="24">累計(jì)充值(元)</van-col>
        <van-col span="24">{{ parply }}</van-col>
      </van-col>
      <van-col span="7">
        <van-col span="24">累計(jì)消費(fèi)(元)</van-col>
        <van-col span="24">{{consume}}</van-col>
      </van-col>
    </van-row>
  </div>
  <!-- 充值 -->
  <div class="chong">
    <van-row>
      <van-col span="13">充值￥100贈(zèng)送￥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贈(zèng)送￥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="確認(rèn)">
<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, //自行編寫(xiě)數(shù)據(jù)
        parply:2488.33,
        consume:6680.09,
        show:false,      //設(shè)定初始值
        money:false   //資產(chǎn)的變動(dòng)
      }
  },
// 限制溢出
  computed:{
    detailmoney(){
   return this.allmoney.toFixed(2) //保留后兩位
    }
  },
  methods: {
    chongzhi(){      //充值按鈕
      this.show=true //彈窗是否顯示
      this.money=true //第一個(gè)按鈕為true
    },
    chongzhi1(){
      this.show=true
      this.money=false//第二個(gè)按鈕為false
    },
    confirmFn(){    //確認(rèn)按鈕
      if(this.money){    //判斷：如果為true執(zhí)行第一個(gè)，為false執(zhí)行第二個(gè)
        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')
    },
  }
}

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

您可能感興趣的文章: