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.
500 lines
11 KiB
500 lines
11 KiB
<template>
|
|
<view class="container container-with-lines full-height-with-titile">
|
|
<!-- 背景 -->
|
|
<view class="top-color">
|
|
<!-- 搜索框 -->
|
|
<view v-show="false" class="search-wrapper theme-gradient">
|
|
<view class="search-box">
|
|
<uni-icons type="search" size="16" color="#999" />
|
|
<input type="text" :placeholder="languageData.account.searchName" placeholder-class="placeholder"
|
|
@input="handleSearch" v-model="params.phonenumber" />
|
|
</view>
|
|
</view>
|
|
<!-- 快捷功能区 -->
|
|
<uni-grid v-show="false" :column="2" style="padding: 20px;">
|
|
<uni-grid-item style="height: 50px;" v-for="(item, index) in quickActionList">
|
|
<uni-icons style="height: 20%;" :type="item.icon" size="24" color="#333" />
|
|
<text style="text-align: center; height: 80%;">{{item.name}}</text>
|
|
</uni-grid-item>
|
|
</uni-grid>
|
|
<u-row v-show="!false" class="quick-actions-row">
|
|
<u-col style="height: 100%;" :span="6" v-for="(item, index) in quickActionList" :key="index"
|
|
@click="navigate(item.path)">
|
|
<uni-icons style="height: 20%;" :type="item.icon" size="34" color="#333" />
|
|
<text style="text-align: center; height: 80%; margin-top: 5px;">{{item.name}}</text>
|
|
</u-col>
|
|
</u-row>
|
|
<view v-show="false" class="quick-actions">
|
|
<view class="action-item" v-for="(item, index) in quickActionList" :key="index"
|
|
@click.stop="navigate(item.path)">
|
|
<uni-icons :type="item.icon" size="24" color="#333" />
|
|
<text style="text-align: center;">{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 最近联系人 -->
|
|
<view class="recent-contacts">
|
|
<view class="tabs">
|
|
<view class="tab-item" :class="{ active: currentTab === 'recent' }" @click="switchTab('recent')">
|
|
<text>{{languageData.account.recently}}</text>
|
|
</view>
|
|
<view class="tab-item" :class="{ active: currentTab === 'contacts' }" @click="switchTab('contacts')">
|
|
<text>{{languageData.account.linkman}}</text>
|
|
</view>
|
|
<view class="show-detail" @click="toggleDetail">
|
|
<uni-icons :type="showDetail ? 'eye-filled' : 'eye-slash-filled'" size="16" color="#999" />
|
|
<text class="show-detail-text">
|
|
{{ showDetail ? languageData.account.concealDetail : languageData.account.showDetail }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="currentTab === 'recent'">
|
|
<view class="contact-list">
|
|
<scroll-view class="message-list" scroll-y :refresher-triggered="triggered">
|
|
<view class="contact-item" v-for="(item, index) in contactList" :key="index">
|
|
<view class="contact-avatar">
|
|
<uni-icons type="person" size="32" color="#999" />
|
|
</view>
|
|
<view class="contact-info">
|
|
<view class="contact-main">
|
|
<text class="contact-name">
|
|
<!-- {{ item.senderName }}({{ showDetail ? item.senderAccount : '*****' }}) -->
|
|
{{ item.remark }}
|
|
</text>
|
|
<text class="contact-amount">{{ showDetail ? item.changeBalance : '*****' }}KIP</text>
|
|
</view>
|
|
<!-- <text class="contact-time">{{ item.remark }}</text> -->
|
|
<view class="">
|
|
<text class="contact-time">{{ item.timeStr }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="contact-list">
|
|
<scroll-view class="message-list" scroll-y :refresher-triggered="triggered"
|
|
@scrolltolower="onLoadMore">
|
|
<view class="contact-item" v-for="(item, index) in phoneContacts" :key="index" @tap="toolBtn(item)">
|
|
<view class="contact-avatar">
|
|
<uni-icons type="person" size="32" color="#999" />
|
|
</view>
|
|
<view class="contact-info">
|
|
<view class="contact-main">
|
|
<text class="contact-name">{{ item.nickName }}</text>
|
|
</view>
|
|
<text class="contact-time">{{ showDetail ? item.phonenumber : '*****' }}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<loading ref="loading" :custom="false" :shadeClick="false" :type="1" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import {
|
|
getUserProfile
|
|
} from '@/api/account/friend.js';
|
|
import {
|
|
getTransRecord
|
|
} from '@/api/account/transactionRecord.js';
|
|
import {
|
|
genPayCode
|
|
} from '@/api/home/qrcode.js'
|
|
import {
|
|
getUserAccInfo
|
|
} from '@/api/login.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
payParam: {
|
|
toId: null,
|
|
toAccount: null
|
|
},
|
|
showDetail: false,
|
|
triggered: false,
|
|
currentTab: 'recent',
|
|
quickActionList: [
|
|
{
|
|
name: this.$t('navbar.center.trans2card'),
|
|
icon: 'wallet',
|
|
path: 'transfer2card'
|
|
},
|
|
{
|
|
name: this.$t('navbar.center.trans2usr'),
|
|
icon: 'person',
|
|
path: 'transfer2usr'
|
|
},
|
|
// {
|
|
// name: this.$languageData.settings.trans,
|
|
// icon: 'undo',
|
|
// path: 'Transfer'
|
|
// },
|
|
// {
|
|
// name: this.$languageData.settings.transSched,
|
|
// icon: 'calendar',
|
|
// path: 'reservationTransfer'
|
|
// },
|
|
// {
|
|
// name: this.$languageData.settings.transMulti,
|
|
// icon: 'staff',
|
|
// path: 'multiTransfer'
|
|
// },
|
|
// {
|
|
// name: this.$languageData.settings.reciAvg,
|
|
// icon: 'wallet',
|
|
// path: 'aaReceipt'
|
|
// }
|
|
],
|
|
contactList: [],
|
|
phoneContacts: [],
|
|
languageData: {},
|
|
params: {
|
|
id: this.$store.state.user.userId,
|
|
userId: this.$store.state.user.userId,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
phonenumber: '',
|
|
key: '',
|
|
type:'1'
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 调用查询方法
|
|
this.getUserInfo();
|
|
this.handleSearch();
|
|
},
|
|
created() {
|
|
this.languageData = this.$languageData;
|
|
uni.setNavigationBarTitle({
|
|
title: this.$languageData.navBar.transfer
|
|
});
|
|
},
|
|
watch:{
|
|
languageData(){
|
|
uni.setNavigationBarTitle({
|
|
title: this.$languageData.navBar.transfer
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
handleSearch(){
|
|
// this.$refs.loading.open();
|
|
this.selectContacts();
|
|
this.selectTransRecord();
|
|
},
|
|
onLoadMore() {
|
|
this.params.pageSize = this.params.pageSize + 10
|
|
getUserProfile(this.params).then(res => {
|
|
this.phoneContacts = res.rows
|
|
})
|
|
},
|
|
selectContacts() {
|
|
//TODO
|
|
if(false){
|
|
// this.$refs.loading.open();
|
|
getUserProfile(this.params).then(res => {
|
|
setTimeout(()=>{
|
|
this.$refs.loading.close();
|
|
},500)
|
|
this.phoneContacts = res.rows
|
|
}).catch(e=>{
|
|
setTimeout(()=>{
|
|
this.$refs.loading.close();
|
|
},500)
|
|
})
|
|
}
|
|
this.$refs.loading.close();
|
|
},
|
|
selectTransRecord() {
|
|
this.params.key = this.params.phonenumber
|
|
this.$refs.loading.open();
|
|
getTransRecord(this.params).then(res => {
|
|
setTimeout(()=>{
|
|
this.$refs.loading.close();
|
|
},500)
|
|
this.contactList = res.data
|
|
}).catch(e=>{
|
|
setTimeout(()=>{
|
|
this.$refs.loading.close();
|
|
},500)
|
|
})
|
|
},
|
|
toggleDetail() {
|
|
this.showDetail = !this.showDetail
|
|
},
|
|
switchTab(tab) {
|
|
this.$refs.loading.open();
|
|
if(tab=='recent'){
|
|
this.selectTransRecord();
|
|
}else{
|
|
this.selectContacts();
|
|
}
|
|
this.currentTab = tab
|
|
},
|
|
getUserInfo() {
|
|
getUserAccInfo().then(res => {
|
|
if (res.code == 200) {
|
|
//来源id
|
|
this.payParam.toId = res.data.userId;
|
|
//来源账号
|
|
this.payParam.toAccount = res.data.accountId;
|
|
this.genPayCode();
|
|
} else {
|
|
uni.showToast({
|
|
title: "获取用户信息异常",
|
|
icon: "none",
|
|
});
|
|
}
|
|
})
|
|
},
|
|
//生成付款码
|
|
genPayCode() {
|
|
genPayCode(JSON.stringify(this.payParam)).then(res => {
|
|
if (res.code == 200) {
|
|
//付款码code
|
|
this.payCode = res.data;
|
|
}
|
|
})
|
|
},
|
|
toolBtn(item) {
|
|
//this.payParam.toId; 当前付款人id
|
|
uni.navigateTo({
|
|
url: "/pages/account/setAmount?type=TRANSFER_MONEY" + '&' + 'merchantId=' + this.payParam.toId + '&'
|
|
+ 'fromAccount=' + this.payCode + '&' + 'userId=' + item.userId + '&' + 'phonenumber=' + item.phonenumber
|
|
})
|
|
},
|
|
navigate(page) {
|
|
uni.navigateTo({
|
|
url: "/pages/account/" + page
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
page {
|
|
height: 100%;
|
|
}
|
|
|
|
.message-list {
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
.top-color {
|
|
// background: linear-gradient(to bottom, #2C54D0, #eff7f9);
|
|
}
|
|
|
|
.theme-gradient {
|
|
padding: 20rpx 32rpx 40rpx;
|
|
}
|
|
|
|
.container {
|
|
// height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// background-color: #2C53CA;
|
|
// background-image: url('/static/svgs/lines.svg');
|
|
// background-size: 350%;
|
|
// background-position: center;
|
|
}
|
|
|
|
.nav-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 88rpx;
|
|
padding: 0 32rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.nav-left {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-title {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
}
|
|
|
|
.search-box {
|
|
height: 72rpx;
|
|
background: #fff;
|
|
border-radius: 36rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 24rpx;
|
|
}
|
|
|
|
.search-box input {
|
|
flex: 1;
|
|
height: 72rpx;
|
|
margin-left: 16rpx;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.placeholder {
|
|
color: #999;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.quick-actions {
|
|
margin: 0 32rpx;
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 24rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.quick-actions-row {
|
|
margin: 0 32rpx;
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 24rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.action-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.action-item text {
|
|
font-size: 12px;
|
|
color: #333;
|
|
}
|
|
|
|
.recent-contacts {
|
|
flex: 1;
|
|
margin: 20rpx 32rpx;
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.recent-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24rpx 32rpx;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
position: relative;
|
|
padding: 0 32rpx;
|
|
height: 88rpx;
|
|
}
|
|
|
|
.show-detail {
|
|
position: absolute;
|
|
right: 32rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
|
|
.tab-item {
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
color: #999;
|
|
position: relative;
|
|
margin-right: 48rpx;
|
|
}
|
|
|
|
.tab-item.active {
|
|
color: #2D54D0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tab-item.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 4rpx;
|
|
background-color: #2D54D0;
|
|
border-radius: 2rpx;
|
|
}
|
|
|
|
.show-detail {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
|
|
.show-detail-text {
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
.contact-list {
|
|
padding: 0 32rpx;
|
|
}
|
|
|
|
.contact-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 24rpx 0;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
|
|
.contact-avatar {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
background: #f5f5f5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.contact-info {
|
|
flex: 1;
|
|
margin-left: 24rpx;
|
|
}
|
|
|
|
.contact-main {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.contact-name {
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.contact-amount {
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.contact-time {
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
</style>
|