You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
576 lines
17 KiB
Vue
576 lines
17 KiB
Vue
<script setup>
|
|
import {uuid} from "@/utils/index.js"
|
|
const { proxy } = getCurrentInstance();
|
|
// 完成状态
|
|
const finish = ref(1);
|
|
// 验证
|
|
const dialogVisible = ref(false);
|
|
// 解密
|
|
const tableData = reactive([
|
|
{
|
|
node:'企业',
|
|
redpackageAddress:'',
|
|
balance:'/',
|
|
deposit:'10000',
|
|
name:""
|
|
},
|
|
{
|
|
node:'消费者',
|
|
redpackageAddress: "",
|
|
balance: "",
|
|
deposit: "5000",
|
|
name:""
|
|
},
|
|
{
|
|
node:'商业银行',
|
|
redpackageAddress: "48C8E181-DEC9-5438-9BC6-404D23A62922",
|
|
balance: "1000000000",
|
|
deposit: "10000000000",
|
|
},
|
|
{
|
|
node:'中央银行',
|
|
redpackageAddress: "0A99D0E3-ECC5-FA84-F1D2-F445CE7B3BE5",
|
|
balance: "100000000",
|
|
deposit: "100000000",
|
|
},
|
|
]);
|
|
const tablist =reactive([
|
|
{
|
|
name:'构建交易节点',
|
|
id:1
|
|
},
|
|
{
|
|
name:'设置合约代码',
|
|
id:2
|
|
},
|
|
{
|
|
name:'触发交易条件',
|
|
id:3
|
|
},
|
|
{
|
|
name:'自动完成交易',
|
|
id:4
|
|
}
|
|
]);
|
|
// 商品form变量
|
|
const form = ref({
|
|
name: "",
|
|
price: "",
|
|
});
|
|
// 触发交易条件变量
|
|
const conditionForm=reactive({
|
|
name:'',
|
|
price:'',
|
|
number:'',
|
|
money:''
|
|
|
|
})
|
|
const fileInput=ref(null)
|
|
const tabsid=ref(1)
|
|
// 演练切换函数
|
|
const go = (idx) => {
|
|
if(idx==4){
|
|
document.getElementsByClassName('machine')[0].style.display='block'
|
|
}else{
|
|
document.getElementsByClassName('machine')[0].style.display='none'
|
|
}
|
|
tabsid.value = idx;
|
|
|
|
}
|
|
// 创建钱包
|
|
const createWallet = (val,money) => {
|
|
// if()
|
|
console.log(val,"val");
|
|
tableData.forEach(item=>{
|
|
if(item.node==val){
|
|
//生成uuid
|
|
if(item.name == ''){
|
|
proxy.$modal.msgError('请先创建节点')
|
|
return
|
|
}
|
|
const uuids=uuid()
|
|
item.redpackageAddress=uuids
|
|
item.balance='0'
|
|
}
|
|
})
|
|
};
|
|
// 充值
|
|
const recharge = (money) => {
|
|
// 商品名称和单价不等于空
|
|
|
|
tableData.forEach(item=>{
|
|
if(item.node=='消费者'){
|
|
if(item.redpackageAddress == ''){
|
|
proxy.$modal.msgError('请先创建钱包')
|
|
return
|
|
}
|
|
item.balance=item.deposit
|
|
item.deposit='0'
|
|
finish.value++
|
|
}
|
|
})
|
|
//
|
|
};
|
|
// 企业设置上架商品
|
|
const setGoods = () => {
|
|
if(form.value.name==''||form.value.price==''){
|
|
proxy.$modal.msgError('商品名称和单价不能为空')
|
|
return
|
|
}
|
|
conditionForm.name=form.value.name
|
|
conditionForm.price=form.value.price
|
|
proxy.$modal.msgSuccess('合约上链成功')
|
|
finish.value++
|
|
};
|
|
// 支付计算
|
|
const pay = () => {
|
|
// 拿到购买数量和单价
|
|
const number=conditionForm.number
|
|
const price=conditionForm.price
|
|
// 计算总价
|
|
const money=number*price
|
|
console.log(money,"money")
|
|
// 拿到消费者余额
|
|
const balance=tableData[1].balance
|
|
// 拿到支付金额
|
|
const payMoney=+conditionForm.money
|
|
console.log(payMoney,"payMoney")
|
|
// 支付金额必须全等于总价
|
|
if(payMoney==money){
|
|
proxy.$modal.msgSuccess('支付成功')
|
|
finish.value++
|
|
// 支付成功后消费者余额减去支付金额
|
|
tableData[1].balance=balance-payMoney
|
|
// 企业余额加上支付金额
|
|
tableData[0].balance=+tableData[0].balance+payMoney
|
|
}else{
|
|
proxy.$modal.msgError('支付失败')
|
|
}
|
|
}
|
|
//创建节点
|
|
const createNode=(val)=>{
|
|
if(val=='消费者'){
|
|
console.log(val,"val");
|
|
// 获取class为item4
|
|
const item4=document.getElementsByClassName('item4')[0]
|
|
// 添加id名
|
|
item4.setAttribute('id','item4')
|
|
tableData[1].name='消费者'
|
|
}else{
|
|
// 获取class为item3
|
|
const item3=document.getElementsByClassName('item3')[0]
|
|
item3.setAttribute('id','item3')
|
|
tableData[0].name='企业'
|
|
console.log(tableData,"tableData");
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="app-contract">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<img src="../../../assets/images/29.png" alt="" />
|
|
<span>智能合约演练</span>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="contract-content">
|
|
<div class="manoeuvre">
|
|
<div class="manoeuvre_item" v-for="(item,index) in tablist" :key="item" @click="go(index+1)" :class="{'manoeuvre_item_complete':index<finish}">
|
|
<span>{{ item.name }}</span>
|
|
<img src="../../../assets//images/企业用户-切图/智能合约演练/向右.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="manoeuvre-conter">
|
|
<div class="manoeuvre_conter_item" v-show="tabsid==1">
|
|
<p class="reseda">以自动售卖机为例，交易涉及四方：消费者、企业、中央银行</p>
|
|
<div class="step">
|
|
<div class="stop_title">第一步</div>
|
|
<span>构建网络交易点，企业和消费者加入中央银行和商业银行构建的合约代码平台，创建钱包，并充值</span>
|
|
</div>
|
|
<div class="el-tab el-tab1" style="width: 70%;margin-top: 20px;">
|
|
<el-table
|
|
:data="tableData"
|
|
style="width: 100%"
|
|
stripe
|
|
>
|
|
<el-table-column align="center" prop="node" label="节点" >
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="redpackageAddress" label="钱包地址" >
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="balance" label="数字货币账户余额" >
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="deposit" label="人民币存款" >
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="name" label="操作" >
|
|
<template #default="scope" >
|
|
<el-button link v-if="scope.row.node =='消费者'||scope.row.node =='企业'" @click="createNode(scope.row.node)">创建节点</el-button>
|
|
<el-button link v-if="scope.row.node =='消费者'||scope.row.node =='企业'" @click="createWallet(scope.row.node)">创建钱包</el-button>
|
|
<el-button link v-if="scope.row.node =='消费者'" @click="recharge(scope.row,)" v-preReClick>充值</el-button>
|
|
<span v-if="scope.row.node =='商业银行'||scope.row.node =='中央银行'">/</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
|
|
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<div class="manoeuvre_conter_item" v-show="tabsid==2">
|
|
<p class="reseda">以自动售卖机为例，交易涉及四方：消费者、企业、中央银行</p>
|
|
<div class="step">
|
|
<div class="stop_title">第二步</div>
|
|
<span>企业上架商品，设置合约代码、合约触发条件</span>
|
|
</div>
|
|
<div class="item-form" style="width: 40%;margin-top: 30px;">
|
|
<el-form label-width="120px">
|
|
<el-form-item label="商品名称：">
|
|
<el-input placeholder="请输入商品名称" v-model="form.name"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="单价：">
|
|
<el-input placeholder="请输入商品单价" v-model="form.price"></el-input>
|
|
<span style="margin-left: 20px;" >e--cny</span>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="setGoods">合约上链</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<div class="manoeuvre_conter_item" v-show="tabsid==3">
|
|
<p class="reseda">以自动售卖机为例，交易涉及四方：消费者、企业、中央银行</p>
|
|
<div class="step">
|
|
<div class="stop_title">第二步</div>
|
|
<span>企业上架商品，设置合约代码、合约触发条件</span>
|
|
</div>
|
|
<div class="item-form" style="width: 40%;margin-top: 30px;">
|
|
<el-form label-width="120px">
|
|
<el-form-item label="商品名称:">
|
|
<el-input placeholder="请输入商品名称" v-model="conditionForm.name"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="单价：">
|
|
<el-input placeholder="请输入商品名称" v-model="conditionForm.price"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="购买数量：">
|
|
<el-input placeholder="请输入购买数量" v-model="conditionForm.number"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="支付金额：">
|
|
<el-input placeholder="请输入支付金额" v-model="conditionForm.money"></el-input>
|
|
<span style="margin-left: 20px;">e--cny</span>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="pay">支付</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<div class="manoeuvre_conter_item" v-show="tabsid==4">
|
|
<p class="reseda">以自动售卖机为例，交易涉及四方：消费者、企业、中央银行</p>
|
|
<div class="step">
|
|
<div class="stop_title">第四步</div>
|
|
<span>资金完成从消费者到企业的转账，售货机开门掉出商品</span>
|
|
</div>
|
|
<div class="el-tab el-tab1" style="width: 50%;margin-top: 20px;">
|
|
<el-table
|
|
:data="tableData"
|
|
style="width: 100%"
|
|
stripe>
|
|
<el-table-column align="center" prop="node" label="节点" >
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="redpackageAddress" label="钱包地址" >
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="balance" label="数字货币账户余额" >
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="deposit" label="人民币存款" >
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;">
|
|
<div class="contract-footer">
|
|
<div class="footer-item">
|
|
</div>
|
|
<div class="item1 item"></div>
|
|
<div class="item2 item"></div>
|
|
<div class="item3 item"></div>
|
|
<div class="item4 item"></div>
|
|
</div>
|
|
<div class="machine">
|
|
<div :class="{'machine_item':finish==4}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
:deep(.el-button.is-link){
|
|
color: #00F0FF;
|
|
}
|
|
:deep(.el-button--primary){
|
|
width: 202px;
|
|
height: 42px;
|
|
border: 2px solid #25F4F9;
|
|
background: linear-gradient(0deg, #0654B5 0%, #003155 50%, #2CD1E4 100%);
|
|
box-shadow: 0px 5px 6px 0px rgba(0,48,255,0.77);
|
|
border-radius: 8px;
|
|
}
|
|
.grabble{
|
|
display: flex;
|
|
height: 38px;
|
|
label{
|
|
width: 132px;
|
|
text-align: center;
|
|
line-height: 38px;
|
|
margin-left: 54px;
|
|
font-size: 14px;
|
|
}
|
|
:deep(.el-input__wrapper){
|
|
background-color: transparent !important;
|
|
width: 275px;
|
|
height: 41px;
|
|
background:url('../../../assets/images/企业用户-切图/钱包管理/筛选框.png') no-repeat !important;
|
|
background-size: 100% 100% !important;
|
|
box-shadow: none !important;
|
|
// 输入框光标改变颜色
|
|
caret-color: #ffffff;
|
|
}
|
|
// 按钮
|
|
|
|
}
|
|
.el-col-24 {
|
|
height: 69px;
|
|
padding: 15px 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
span {
|
|
padding-left: 15px;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
.el-tab {
|
|
padding: 0 13px;
|
|
}
|
|
.el-tab1 {
|
|
border: 1px solid #1854a6;
|
|
padding: 6px;
|
|
--el-table-row-hover-bg-color: transparent;
|
|
:deep(.el-table .el-table__header-wrapper th) {
|
|
background-color: #06B675 !important;
|
|
color: #ffffff !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
}
|
|
.svg-icon{
|
|
margin-right: 6px;
|
|
}
|
|
.app-contract{
|
|
.contract-content{
|
|
padding: 0px 20px;
|
|
.manoeuvre{
|
|
width: calc(100% - 45%);
|
|
// background-color: pink;
|
|
display: flex;
|
|
padding: 0px 10px;
|
|
border-bottom: 1px solid #06B675;
|
|
.manoeuvre_item{
|
|
position: relative;
|
|
width: 178px;
|
|
height: 40px;
|
|
background: linear-gradient(0deg, #6F6F8D 0%, #D2D6E5 100%);
|
|
border-radius: 10px 10px 0px 0px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
margin-right: 44px;
|
|
// 鼠标小手
|
|
cursor: pointer;
|
|
span{
|
|
line-height:40px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
img{
|
|
position: absolute;
|
|
top: 15px;
|
|
right: -35px;
|
|
}
|
|
}
|
|
.manoeuvre_conter_item{
|
|
:deep(.item-form){
|
|
// background-color: ;
|
|
.el-form-item__label{
|
|
color: #ffffff;
|
|
}
|
|
.el-input--default{
|
|
width: 403px;
|
|
height: 46px;
|
|
background: #2B539C;
|
|
border: 1px solid #265AB9;
|
|
color: #ffffff;
|
|
}
|
|
.el-input__wrapper{
|
|
box-shadow: none;
|
|
// background-color: pink;
|
|
background: url('../../../assets/images/企业用户-切图/智能合约演练/输入框.png') no-repeat !important;
|
|
background-size: 100% 100% !important;
|
|
// 输入框光标改变颜色
|
|
caret-color: #ffffff;
|
|
// 输入框内提示文字颜色
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.reseda{
|
|
font-size: 12px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 500;
|
|
color: #2FDD93;
|
|
}
|
|
.step{
|
|
width: calc(100% - 55%);
|
|
height: 32px;
|
|
border: 1px solid #2FDD93;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0px 5px;
|
|
.stop_title{
|
|
width: 70px;
|
|
height: 23px;
|
|
background: #06B675;
|
|
border-radius: 12px;
|
|
line-height: 23px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
}
|
|
span{
|
|
font-size: 12px;
|
|
font-family: Source Han Sans CN;
|
|
padding-left: 22px;
|
|
}
|
|
}
|
|
}
|
|
.contract-footer{
|
|
position: relative;
|
|
width: calc(100% - 35%);
|
|
height: 458px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background:url('../../../assets/images/框.png') no-repeat !important;
|
|
background-size: 100% 100% !important;
|
|
margin-left: 32px;
|
|
.footer-item{
|
|
width:687.9px;
|
|
height:260px;
|
|
|
|
background:url('../../../assets/images/图（无按钮）.png') no-repeat !important;
|
|
background-size: 100% 100% !important;
|
|
}
|
|
.item{
|
|
position: absolute;
|
|
width: 112px;
|
|
height: 71px;
|
|
}
|
|
.item1{
|
|
top: 225px;
|
|
left: 138px;
|
|
background:url('../../../assets/images/1-中央银行.png') no-repeat !important;
|
|
background-size: 100% 100% !important;
|
|
}
|
|
.item2{
|
|
top: 225px;
|
|
left: 828px;
|
|
background:url('../../../assets/images/4-商业银行.png') no-repeat !important;
|
|
background-size: 100% 100% !important;
|
|
}
|
|
.item3{
|
|
display: none;
|
|
top: 316px;
|
|
left: 363px;
|
|
background:url('../../../assets/images/3-企业.png') no-repeat !important;
|
|
background-size: 100% 100% !important;
|
|
}
|
|
.item4{
|
|
display: none;
|
|
top: 316px;
|
|
left: 605px;
|
|
background:url('../../../assets/images/2-消费者.png') no-repeat !important;
|
|
background-size: 100% 100% !important;
|
|
}
|
|
#item4{
|
|
display: block;
|
|
animation: item4 1s;
|
|
}
|
|
@keyframes item4{
|
|
// 慢慢的动画显示出来
|
|
0%{
|
|
opacity: 0;
|
|
}
|
|
100%{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
#item3{
|
|
display: block;
|
|
animation: item4 1s;
|
|
}
|
|
@keyframes item3{
|
|
// 慢慢的动画显示出来
|
|
0%{
|
|
opacity: 0;
|
|
}
|
|
100%{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
.machine{
|
|
position: absolute;
|
|
top:200px;
|
|
right: 86px;
|
|
width: 497px;
|
|
height: 738px;
|
|
background:url('../../../assets/images/售卖机（未打开）.png') no-repeat !important;
|
|
background-size: 100% 100% !important;
|
|
display:none;
|
|
.machine_item{
|
|
position: absolute;
|
|
top: 29%;
|
|
left: 37%;
|
|
width: 150px;
|
|
height: 112px;
|
|
// commodity
|
|
background:url('../../../assets/images/commodity.png') no-repeat !important;
|
|
background-size: 100% 100% !important;
|
|
// 图片旋转
|
|
animation: machine_item 1s;
|
|
|
|
|
|
}
|
|
@keyframes machine_item{
|
|
// 慢慢的动画显示出来
|
|
0%{
|
|
transform: rotate(0deg);
|
|
}
|
|
100%{
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
//有一个从上往下掉落的动画
|
|
|
|
}
|
|
|
|
:deep(.el-input__inner){
|
|
color: #ffffff !important;
|
|
}
|
|
.manoeuvre_item_complete{
|
|
width: 178px;
|
|
height: 40px;
|
|
background: linear-gradient(0deg, #007D61 0%, #00E07E 100%) !important ;
|
|
border-radius: 10px 10px 0px 0px;
|
|
}
|
|
</style> |