2025-06-06 03:08:19 +08:00

217 lines
6.6 KiB
Vue

<template>
<view class="page">
<nav-bar :title="$t('address.add.title')" bgColor="#fff"></nav-bar>
<view style="width: 92%; margin: 10px auto; padding: 15px 10px;">
<uni-forms :modelValue="model" label-position="top" :rules="rules" ref="model" label-width="50%">
<uni-forms-item label="Select network">
<view class="cell_list" style="padding: 10px; margin: 0px; background-color: #F8F8F8;" @click="open">
<view style="color: #333; font-size: 14px; font-weight: 600; line-height: 25px;">
<image src="/static/images/s1.png" v-if="model.network == 'TRC-20'" style="width: 25px; height: 25px; float: left;" mode="cover"></image>
<image src="/static/images/s2.png" v-if="model.network == 'BEP-20'" style="width: 25px; height: 25px; float: left;" mode="cover"></image>
<view style="float: left; margin-left: 10px;" v-if="model.network == 'TRC-20'" >Tron(TRC20)</view>
<view style="float: left; margin-left: 10px;" v-if="model.network == 'BEP-20'" >BSC-BNB(BEP20)</view>
<view style="clear: both;"></view>
</view>
<view class="cell_right arrow"></view>
</view>
</uni-forms-item>
<uni-forms-item label="Wallet address" name="address">
<uni-easyinput :disabled="model.id != ''" v-model="model.address" placeholder="Enter address" style="background-color: #F5F7FA;">
<template #right>
<image src="/static/images/sm.png" @click="scanCode" style="width: 25px; height: 25px;" mode="cover"></image>
</template>
</uni-easyinput>
</uni-forms-item>
<uni-forms-item label="Set the name" name="name">
<uni-easyinput v-model="model.title" placeholder="Set the name" style="background-color: #F5F7FA !important;"></uni-easyinput>
</uni-forms-item>
</uni-forms>
</view>
<view style="bottom: 0px; position: absolute; width:100vw; height: 60px;">
<button type="primary" round style="width: 90%; margin: auto;" @click="submit">Save</button>
</view>
<uni-popup ref="popup" type="dialog" :is-mask-click="true" background-color="#fff" borderRadius="40rpx">
<view style="width: 80vw; padding: 20rpx 30rpx; border-radius: 40rpx; line-height: 50rpx;">
<view style="font-size: 36rpx; font-weight: bold; text-align: center; margin-bottom: 30rpx;">Select a network</view>
<view style="padding-bottom: 20px; width: 100%;">
<view @click="switchnetwork('TRC-20')">
<uni-row>
<uni-col :span="22">
<image style="width: 25px; height: 25px; float: left;" src="/static/images/s1.png" mode="cover"></image>
<view style="font-weight: 600;font-size: 16px;color: #333333; float:left; margin-left: 10px;">Tron(TRC20)</view>
</uni-col>
<uni-col :span="2">
<uni-icons type="checkbox-filled" size="20" v-if="model.network=='TRC-20'" style="color: rgb(64, 158, 255);"></uni-icons>
</uni-col>
</uni-row>
</view>
<view @click="switchnetwork('BEP-20')">
<uni-row :gutter="0" style="margin-top: 40px;">
<uni-col :span="22">
<image style="width: 25px; height: 25px; float: left;" src="/static/images/s2.png" fit="cover"></image>
<view style="font-weight: 600;font-size: 16px;color: #333333; float:left; margin-left: 10px;">BSC-BNB(BEP20)</view>
</uni-col>
<uni-col :span="2">
<uni-icons type="checkbox-filled" size="20" v-if="model.network=='BEP-20'" style="color: rgb(64, 158, 255);"></uni-icons>
</uni-col>
</uni-row>
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex';
export default {
data() {
return {
model: {
network: 'TRC-20',
address: '',
title: '',
status: '1',
id: '',
},
rules: {
address: {
rules:[{required: true,errorMessage: 'Please input address'}],
},
title: {
rules:[{required: true,errorMessage: 'Please input name'}],
}
}
};
},
computed: {
...mapState(['userInfo'])
},
//第一次加载
onLoad(e) {
if(e.id != typeof(undefined) && e.id != undefined){
this.getAddres(e.id);
}
},
//页面显示
onShow() {},
//方法
methods: {
open(){
if(this.model.id != ''){
return;
}
this.$refs.popup.open('dialog');
},
onPageJump(url) {
uni.navigateTo({
url: url
});
},
onTokenJump(url) {
this.judgeLogin(() => {
uni.navigateTo({
url: url
});
});
},
switchnetwork(type){
this.model.network = type;
this.$refs.popup.close();
},
getAddres(id){
this.$http.get('/api/address/detail?id='+id).then(res => {
if(res.code == 0){
this.model.network = res.data.network;
this.model.address = res.data.address;
this.model.title = res.data.title;
this.model.id = res.data.id;
}
});
},
scanCode() {
if(this.model.id != ''){
uni.showToast({
title:'Not editable'
})
return;
}
let _self = this;
// 调用扫码API
uni.scanCode({
success: function (res) {
console.log(res);
_self.model.address = res.result;
},
fail: function (err) {
console.error('Error:', err);
}
});
},
submit(){
this.$refs.model.validate().then(res=>{
if(this.model.id != ''){
let data = {
id: this.model.id,
title: this.model.title,
status: 1,
}
this.$http.post('/api/address/update', data).then(res => {
if(res.code == 0){
uni.showToast({
title: res.data.mes
});
setTimeout(() => {
uni.navigateBack()
}, 1000);
}
});
}else{
this.$http.post('/api/address/create', this.model).then(res => {
if(res.code == 0){
uni.showToast({
title: res.data.mes
});
setTimeout(() => {
uni.navigateBack()
}, 1000);
}
});
}
}).catch(err =>{})
}
},
//页面隐藏
onHide() {},
//页面卸载
onUnload() {},
//页面下来刷新
onPullDownRefresh() {},
//页面上拉触底
onReachBottom() {},
//用户点击分享
onShareAppMessage(e) {
return this.wxShare();
}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
body{background-color: #fff;}
.page{min-height: 100vh;position: relative;}
.rechargeTitle{
font-weight: 400;font-size: 16px;color: #999999;line-height: 23px; text-align: center; margin-top: 30px;
}
.rechargeNet{
font-weight: 600;font-size: 20px;color: #333;line-height: 23px; text-align: center; margin-top: 20px;
}
.txt{
font-size: 14px; color:#999; font-weight: 500;
}
.cell_right{
font-size: 14px; color:#333; font-weight: 500;
}
</style>