You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
379 lines
9.2 KiB
379 lines
9.2 KiB
<template>
|
|
<view class="main">
|
|
<!-- nav -->
|
|
<navigation>{{ i18n.ChooseAddress }}
|
|
<view slot="right" class="right" @click="editFlag = !editFlag;">{{
|
|
editFlag ? i18n.OK : i18n.Edit
|
|
}}
|
|
</view>
|
|
</navigation>
|
|
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="content">
|
|
<!-- #endif -->
|
|
<!-- #ifdef H5 -->
|
|
<view class="content" style="margin-top: 100rpx;">
|
|
<!-- #endif -->
|
|
|
|
<view class="message-item">
|
|
{{ i18n.message4 }}
|
|
</view>
|
|
<view class="message-item last">
|
|
{{ i18n.message5 }}
|
|
</view>
|
|
<view class="card" v-if="userInfoObj.length > 0">
|
|
<view class="dataBody" v-for="(item, index) in userInfoObj" :key="index">
|
|
<view class="coinTitle">{{item.coinEnname}}</view>
|
|
<!-- v-for="(addressItem, addressIndex) in 2" :key="addressIndex" -->
|
|
<view class="addressItem"
|
|
@click="itemClick(index, item)">
|
|
<view class="radio"
|
|
:class="{ select: (editCoinIndex === index && editCoinAddressIndex === item.id) }"
|
|
v-if="editFlag"></view>
|
|
<view class="addressInfo">
|
|
<view class="addressTitle">{{item.remark}}</view>
|
|
<view class="address">{{item.address}}</view>
|
|
<view class="time">{{item.timestr}}</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-empty :text="i18n.Dataisempty" mode="data" v-if="userInfoObj.length==0"></u-empty>
|
|
<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
|
|
:nomore-text="nomoreText" v-if="userInfoObj.length" height="80" />
|
|
<!-- 确认框 -->
|
|
<u-modal :show="modalShow" :confirmText="i18n.OK" :cancelText="i18n.Cancel" :showCancelButton="true"
|
|
:title="i18n.WarmTips" :content='i18n.WarmTipsText' @confirm="deleteAddress" @cancel="modalShow = false"
|
|
confirmColor="#00E8A2" cancelColor="#96959E">
|
|
</u-modal>
|
|
<!-- 编辑按钮 -->
|
|
<view class="buttonBg">
|
|
<u-button class="button" :color="editFlag ? '#F4506A' : '#00E8A2'" throttleTime="500" @click="btnClick"
|
|
:disabled="btnIsCanClick">
|
|
{{ editFlag ? i18n.DeleteAddress : i18n.AddAddress }}
|
|
</u-button>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue';
|
|
import api from '@/utils/api'
|
|
import constant from '@/utils/constant.js';
|
|
export default {
|
|
components: {
|
|
KeyValueRow
|
|
},
|
|
name: "chooseAddress",
|
|
data() {
|
|
return {
|
|
// 币种代码
|
|
coinCode:'',
|
|
coinList: [{}],
|
|
coinAddressList: [{}],
|
|
editFlag: false, // 是否在编辑状态
|
|
editCoinIndex: '',
|
|
editCoinAddressIndex: '',
|
|
coinAddress: 'SDIHJSD9809U9ERF9IOU0980970',
|
|
currentCoin: 'USDT',
|
|
modalShow: false,
|
|
|
|
isLoadMore: false, //是否加载中
|
|
loadStatus: 'loadmore',
|
|
loadingText: this.$t("login").toload,
|
|
loadmoreText: this.$t("login").pullup,
|
|
nomoreText: this.$t("login").Nomore,
|
|
form: {
|
|
pageNumber: 1,
|
|
pageSize: 20,
|
|
type: 'crypto',
|
|
},
|
|
userInfoObj: [],
|
|
|
|
};
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t("withdrawal");
|
|
},
|
|
btnIsCanClick() { // 按钮是否可以点击
|
|
if (this.editFlag) {
|
|
// console.log(`${this.editCoinIndex}` ? false : true);
|
|
return `${this.editCoinIndex}` ? false : true; // 在编辑模式,有值才能点
|
|
} else {
|
|
return false; // 不在编辑模式始终可以点
|
|
}
|
|
}
|
|
},
|
|
onLoad(res) {
|
|
// 1)用户选好币种后，如果用户点击choose到 Choose address页面，只展示用户已选择币种的地址，withdrawAddressList接口可以传多一个参数coinCode，
|
|
//如果用户不是从withdrawl页面进到地址页，则展示全部币种的地址，而个人中心进去地址页和添加地址才是所有币种的
|
|
// 2)从提现界面的choose进入地址页，点击添加地址，币种不能选择，只能添加提现界面所选币种的地址，也只显示提现界面选择币种的地址列表
|
|
if(res.coinCode){
|
|
// 传后台的
|
|
this.form.coinCode=res.coinCode2
|
|
// 回显到页面的
|
|
this.coinCode=res.coinCode
|
|
this.getList()
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
getList() {
|
|
this.isLoadMore = true
|
|
api.withdrawAddressList(this.form).then(res => {
|
|
if (res.content.length) {
|
|
if (this.form.pageNumber > 1) {
|
|
this.userInfoObj = this.userInfoObj.concat(res.content)
|
|
for (var i = 0; i < this.userInfoObj.length; i++) {
|
|
if (this.userInfoObj[i].addTime) {
|
|
this.userInfoObj[i].timestr = this.$index.formatyymmddhhmmss(this.userInfoObj[
|
|
i].addTime)
|
|
}
|
|
}
|
|
} else {
|
|
this.userInfoObj = res.content
|
|
for (var i = 0; i < this.userInfoObj.length; i++) {
|
|
if (this.userInfoObj[i].addTime) {
|
|
this.userInfoObj[i].timestr = this.$index.formatyymmddhhmmss(this.userInfoObj[
|
|
i].addTime)
|
|
}
|
|
}
|
|
}
|
|
if (this.userInfoObj.length >= Number(res.totalElements)) { // 判断接口返回数据量小于请求数据量，则表示此为最后一页
|
|
this.isLoadMore = true
|
|
this.loadStatus = 'nomore'
|
|
} else {
|
|
this.isLoadMore = false
|
|
}
|
|
} else {
|
|
this.isLoadMore = true
|
|
this.loadStatus = 'nomore'
|
|
// this.userInfoObj = []
|
|
}
|
|
this.$forceUpdate()
|
|
})
|
|
},
|
|
itemClick(index, addressIndex) {
|
|
console.log(index, addressIndex)
|
|
// 编辑模式下
|
|
if (this.editFlag) {
|
|
// console.log(index, addressIndex);
|
|
if (this.editCoinIndex === index && this.editCoinAddressIndex === addressIndex.id) { // 取消选择
|
|
this.editCoinIndex = '';
|
|
this.editCoinAddressIndex = '';
|
|
} else { // 选择
|
|
this.editCoinIndex = index;
|
|
this.editCoinAddressIndex = addressIndex.id;
|
|
}
|
|
} else {
|
|
// 选择地址情况下 点击地址返回传参有问题 可能要通用vuex解决
|
|
uni.$emit('coinAddressChang', {
|
|
coinid: addressIndex.id,
|
|
coinAddress: addressIndex.address,
|
|
});
|
|
uni.navigateBack()
|
|
|
|
}
|
|
|
|
},
|
|
btnClick() {
|
|
// 在编辑模式弹出确认框
|
|
if (this.editFlag) {
|
|
this.modalShow = true
|
|
|
|
} else {
|
|
// 在非编辑模式下直接跳转
|
|
uni.navigateTo({
|
|
url:'/pages/withdrawal/addAddress?coinCode2='+this.form.coinCode +'&'+ 'coinCode='+this.coinCode
|
|
});
|
|
}
|
|
},
|
|
|
|
deleteAddress() {
|
|
this.modalShow = false;
|
|
// 删除地址
|
|
api.withdrawAddressDel({
|
|
addressId:this.editCoinAddressIndex,
|
|
}).then(res => {
|
|
uni.$u.toast(this.$t("login").Deletesucceeded)
|
|
setTimeout(()=>{
|
|
this.getList()
|
|
},600)
|
|
})
|
|
},
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/deep/ .u-modal__content__text{
|
|
color: #96959E;
|
|
}
|
|
.main {
|
|
|
|
.right {
|
|
width: 82rpx;
|
|
height: 56rpx;
|
|
line-height: 56rpx;
|
|
position: absolute;
|
|
right: 32rpx;
|
|
font-size: 24rpx;
|
|
background: rgba(246, 166, 9, 0.1);
|
|
border-radius: 8px;
|
|
color: #FFBC1F;
|
|
}
|
|
|
|
|
|
.content {
|
|
margin-top: 200rpx;
|
|
padding: 40rpx;
|
|
|
|
.message-item {
|
|
padding: 0 16rpx;
|
|
font-size: 24rpx;
|
|
color: #A1A0A8;
|
|
line-height: 36rpx;
|
|
|
|
&.last {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.card {
|
|
|
|
.dataBody {
|
|
margin-bottom: 32rpx;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
background: #211F32;
|
|
border-radius: 20rpx;
|
|
|
|
.coinTitle {
|
|
font-size: 24rpx;
|
|
line-height: 28rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.addressItem {
|
|
flex: 0 1 50%;
|
|
height: 180rpx;
|
|
box-sizing: border-box;
|
|
padding: 32rpx 0;
|
|
border-top: 2rpx solid #323045;
|
|
display: flex;
|
|
|
|
.radio {
|
|
margin-top: 32rpx;
|
|
margin-right: 24rpx;
|
|
box-sizing: border-box;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
background: #323045;
|
|
border: 3rpx solid #DCDBE0;
|
|
border-radius: 16rpx;
|
|
|
|
|
|
&.select {
|
|
background-image: url(../../static/withdrawal/Checkbox_pr.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 48rpx;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.addressInfo {
|
|
width: 590rpx;
|
|
.addressTitle {
|
|
position: relative;
|
|
font-size: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
word-break: break-all;
|
|
|
|
&::after {
|
|
display: block;
|
|
position: absolute;
|
|
content: '';
|
|
background-image: url(../../static/charity/ic_ma_arrow_down.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 32rpx;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
top: 0rpx;
|
|
right: -18rpx;
|
|
transform: rotate(270deg);
|
|
}
|
|
}
|
|
|
|
.address {
|
|
font-size: 24rpx;
|
|
line-height: 28rpx;
|
|
color: #A1A0A8;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.time {
|
|
font-size: 24rpx;
|
|
line-height: 28rpx;
|
|
color: #A1A0A8;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
margin-bottom: 160rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
/deep/.u-popup__content {
|
|
background: #323045;
|
|
|
|
.u-modal__title {
|
|
color: #fff;
|
|
}
|
|
|
|
.u-modal__content__text {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.buttonBg {
|
|
position: fixed;
|
|
bottom: 0rpx;
|
|
.button {
|
|
width: 670rpx;
|
|
box-sizing: border-box;
|
|
height: 112rpx;
|
|
margin-bottom: 40rpx;
|
|
border-radius: 32rpx;
|
|
font-weight: 700;
|
|
font-size: 32rpx;
|
|
color: #15141F !important;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
</style>
|
|
|