<template>
<div class="container">
<div class="bei">
<!-- 头部 -->
<div class="header">
<img class="logo" src="../../assets/electronic/logo.png" >
<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" >
</div>
<!-- 输入框 -->
<div class="footer-txt">
<div class="demo-input-suffix" ref="Form" :rules="rules">
电子章(份): <el-input
:validate-event="true"
prop="num"
placeholder="请输入份数"
v-model="Form.num">
</el-input>
<br>
<br>
充值金额(元): <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" >
</div>
<!-- 输入框 -->
<div class="demo-input-suffix" ref="Form">
电子章(份): <el-input
:validate-event="true"
prop="num"
placeholder="请输入份数"
v-model="Form.num">
</el-input>
<br>
<br>
充值金额(元): <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" >
<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 {
width: 97%;
height: 600px;
background-color: #fff;
margin: 15px auto;
}
}
.header {
.logo {
width:98px;
height:98px;
border-radius:50%;
}
p {
width: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;
width: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;
width: 130px;
}
.main-txt {
margin-left: 230px;
}
ul li{
list-style-type:none;
float: left;
padding-left: 30px;
padding-top: 8px;
width:160px;
font-size:16px;
height:60px;
background:#fff2;
}
// 底部样式
.footer {
.tu2 {
margin: 30px 0 0 560px;
width:114px;
height:40px;
margin-bottom: 15px;
}
.weixin {
margin-left: 220px;
}
// 微信图片样式
.weixintu {
margin-left: 330px;
width: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 {
width: 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>
input框输入数量自动计算价格
原文：https://www.cnblogs.com/xiaoxiao95/p/12738485.html
