input框输入数量自动计算价格

<template>

  <div class="container">

    <div class="bei">

    <!-- 头部 -->

    <div class="header">

      <img class="logo" src="../../assets/electronic/logo.png" alt="">

      <p>事务所</p>

    </div>

    <!-- 内容 -->

    <div class="main">

        <div class="main-left">当前剩余(份): 10</div>

        <div class="main-txt">

          <!-- tab切换栏 -->

            <ul>

              <li 

                v-for="(item,index) in navList" 

                :class="index == activeNum ? 'active_calass' : '' " 

                :key="index"

                @click="handleTab(index,item.value)">{{item.label}}</li>

            </ul>

        </div>

    </div>

    <!-- 底部 -->

    <div class="footer">

      <!-- 支付宝 -->

      <div class="zhifubao" v-if="!isshowZhi">

        <div class="footer-logo">

          <img class="tu2" src="../../assets/electronic/zhifubao.jpg" alt="">

        </div>

        <!-- 输入框 -->

        <div class="footer-txt">

              <div class="demo-input-suffix" ref="Form" :rules="rules"> 

                    

                    电子章(份):  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-input

                      :validate-event="true"

                      prop="num"

                      placeholder="请输入份数"

                      v-model="Form.num">

                    </el-input>

                    <br>

                    <br>

                    充值金额(元): &nbsp;&nbsp;<el-input

                      :disabled="true"

                      v-model="sum">

                    </el-input>

                     <br>

                     <br>

                     <el-button type="primary" @click="submitForm('Form')">确认充值</el-button>

              </div>

        </div>

        </div>

        <!-- 微信支付 -->

        <div class="weixin" v-if="isshowZhi">

            <div class="footer-weixinlogo">

              <img class="weixintu" src="../../assets/electronic/weixin.jpg" alt="">

            </div>

            <!-- 输入框 -->

                 <div class="demo-input-suffix" ref="Form">

                    电子章(份):  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-input

                      :validate-event="true"

                      prop="num"

                      placeholder="请输入份数"

                      v-model="Form.num">

                    </el-input>

                    <br>

                    <br>

                    充值金额(元): &nbsp;&nbsp;<el-input

                      :disabled="true"

                      v-model="sum">

                    </el-input>

                     <br>

                     <br>

                     <el-button type="primary" @click="submitForm('Form')">确认充值</el-button>

              </div>

        </div>

        </div>

    </div>

    <!-- 支付后弹框 -->

    <el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>

    <el-dialog

      :visible.sync="centerDialogVisible"

      width="22%"

      center>

      <span>

        <img class="tankuang" src="../../assets/electronic/ty1.png" alt="">

        <p>本次充值失败</p>

        <p>请重新充值！</p>

      </span>

      <span slot="footer" class="dialog-footer">

        <el-button class="again" type="primary" @click="centerDialogVisible = false">重新充值</el-button>

      </span>

    </el-dialog>

  </div>

</template>

<script>

export default {

  name: 'recharge',

  computed: {

    sum: function() {

      if(this.num < 0) {

        return parseFloat(0).toFixed(2);

      }

      return parseFloat(this.Form.num * this.Form.money).toFixed(2);

    }

  },

  watch: {

    sum: {

      handler(val) {

        this.Form.totle = val

      },

      immediate:true,

      deep:true

    }

  },

  data() {

    return {

            centerDialogVisible: false,

            isshowZhi: false,

             navList: [

          {

            label: "支付宝支付",

            value: 0

          },

          {

            label: "微信支付",

            value: 1

          }

        ],

        activeNum:0,

        Form: {

          domains: [{

            value: ''

          }],

          num: '',

          money: '5',

          totle:''

      },

        rules:{

              num: [ 

                { required: true, message: '请输入份数', trigger: 'blur' },

                { pattern: /^[1-9][0-9]*$/,  message: '请输入正确的份数', trigger: ['blur', 'change'] }

               ]

              },

    }

  },

methods:{

   created() {

    console.log(sum())

  },

  // 充值tab切换

     handleTab(index,value){

        this.activeNum = index;

        this.isshowZhi=!this.isshowZhi;

        console.log(value)

      },

      // 确认充值按钮

        submitForm(FormName) {

        this.$refs[FormName].validate((valid) => {

          if (valid) {

            alert('submit!');

          } else {

            console.log('error submit!!');

            return false;

          }

        });

      },

      removeDomain(item) {

        var index = this.Form.domains.indexOf(item)

        if (index !== -1) {

          this.Form.domains.splice(index, 1)

        }

      },

    }

}

</script>

<style scoped lang="scss">

// 头部样式

  .container {

    margin: 0;

    padding: 0;

    background-color: rgba(240,240,246,1);

    .bei {

       97%;

      height: 600px;

      background-color: #fff;

      margin: 15px auto;

    }

  }

  .header {

    .logo {

      98px;

      height:98px;

      border-radius:50%;

    }

    p {

      170px;

      height:18px;

      font-size:18px;

      font-family:Source Han Sans CN;

      font-weight:400;

      color:rgba(42,43,47,1);

      line-height:28px;

      margin: 0 auto;

    }

  }

  // 内容样式

    .main {

      margin: 0 auto;

      overflow: hidden;

        .main-left {

          text-align: center;

          margin-left: 266px;

          margin-top: 15px;

          156px;

          height:20px;

          font-size:16px;

          font-family:Source Han Sans CN;

          font-weight:400;

          color:rgba(42,43,47,1);

          line-height:28px;

        }

    }

      // tab类名

      .active_calass{

        color: #409EFF;

        background-color: rgba(240,240,246,1);

    }

      ul li[data-v-605f44a0] {

          // text-align: center;

          line-height: 50px;

          height: 50px;

           130px;

      }

      .main-txt {

        margin-left: 230px;

      }

      ul li{

        list-style-type:none;

        float: left;

        padding-left: 30px;

        padding-top: 8px;

        160px;

        font-size:16px;

        height:60px;

        background:#fff2;

  }

      // 底部样式

      .footer {

        .tu2 {

          margin: 30px 0 0 560px;

          114px;

          height:40px;

          margin-bottom: 15px;

        }

        .weixin {

          margin-left: 220px;

        }

        // 微信图片样式

        .weixintu {

          margin-left: 330px;

          154px;

          height:100px;

          margin-bottom: 15px;

        }

        .footer-weixinlogo {

          height: 89px;

        }

      }

      // 输入框盒子样式

        .demo-input-suffix {

          margin-left: 200px;

        }

        // .demo-input-suffix[data-v-605f44a0] {

        //   margin-left: 340px;

        // }

      // 输入框样式

        .el-input {

           40%;

        

        }

        .footer-txt {

          margin-left: 220px;

        }

        .el-button {

          margin-left: 175px;

        }

        // 弹框样式

        p {

          font-size:24px;

          font-weight: 500;

          text-align: center;

          color: #000;

        }

        // 弹框按钮

        .again {

          margin-left: 10px;

        }

        // 弹框图片

        .tankuang {

          margin-left: 90px;

        }

</style>