Files
HTFX-CRM-Sales/pages/customer/ib/index.vue
2025-07-07 16:05:18 +08:00

601 lines
23 KiB
Vue

<template>
<NavBar />
<view class="container">
<view class="title">
<PageTitle :title="$t('home.customer.title')" />
</view>
<view style="margin-top: 20px">
<Segmented
styleType="text"
fontSize="16px"
gap="6px"
:current="current"
:values="items"
@clickItem="onClickItem"
inActiveColor="#999999"
activeColor="#000"
></Segmented>
</view>
<view style="margin-top: 20px">
<view class="search">
<input class="searchInput" v-model="queryCustomerParams.qcc_fuzzy_search" :placeholder="$t('home.customer.sellPage.name')+'/'+$t('home.customer.sellPage.email')">
<button class="btn primaryButton" @click="search">
<image src="/static/search.svg" mode="aspectFit" style="width: 14px;height: 14px"></image>
<text class="filterText">{{ $t('form.search') }}</text>
</button>
</view>
<view class="search2">
<button class="btn primaryButton" @click="openFilter">
<image src="/static/filtrate.svg" mode="aspectFit" style="width: 20px;height: 20px"></image>
<text class="filterText">{{ $t('common.filter') }}</text>
</button>
</view>
<scroll-view style="height: calc(100vh - 260px);" scroll-y="true" @scrolltolower="scrolltolowerQuery" >
<view class="item" v-for="user in userList" :key="user.id">
<view class="top" @click="showDetails(user.id)">
<view class="itemTitle">
<!-- <image class="title-bg" src="/static/titleIcon2.svg" mode="aspectFit"></image>-->
<view class="title-bg">
<text class="title-text">{{ user.id }}</text>
</view>
</view>
</view>
<uni-collapse class="box" style="margin-top: 12px" >
<uni-collapse-item title-border="none" :show-arrow="false" :border="false" :open="user.if_show" :disabled="true">
<template v-slot:title>
<view class="row" v-show="filterColumns.user_code">
<view class="column">{{ filterColumns.user_code?.title }}</view>
<view class="value">{{ user.user_code }}</view>
</view>
<view class="row" v-show="filterColumns.name">
<view class="column">{{ filterColumns.name?.title }}</view>
<view class="value">{{ user.name }}</view>
</view>
<view class="row" v-show="filterColumns.email">
<view class="column">{{ filterColumns.email?.title }}</view>
<view class="value">{{ user.email }}</view>
</view>
<view class="bottomItem" v-show="!user.if_show" style="padding-bottom: 8px">
<text @click="showItem(user)">{{ $t('home.customer.sellPage.open') }}</text>
<image @click="showItem(user)" src="/static/openIcon.svg" mode="aspectFit" style="width: 14px;height: 8px"></image>
</view>
</template>
<view class="content" style="padding-bottom: 8px">
<view class="row" v-show="filterColumns.customer_type_text">
<view class="column">{{ filterColumns.customer_type_text?.title }}</view>
<view class="value">{{ user.customer_type_text }}</view>
</view>
<view class="row" v-show="filterColumns.phone">
<view class="column">{{ filterColumns.phone?.title }}</view>
<view class="value">{{ user.phone }}</view>
</view>
<view class="row" v-show="filterColumns.org_name">
<view class="column">{{ filterColumns.org_name?.title }}</view>
<view class="value">{{ user.org_name }}</view>
</view>
<view class="row" v-show="filterColumns.salesman_name">
<view class="column">{{ filterColumns.salesman_name?.title }}</view>
<view class="value">{{ user.salesman_name }}</view>
</view>
<view class="row" v-show="filterColumns.superior_name">
<view class="column">{{ filterColumns.superior_name?.title }}</view>
<view class="value">{{ user.superior_name }}</view>
</view>
<view class="row" v-show="filterColumns.ib_user_group">
<view class="column">{{ filterColumns.ib_user_group?.title }}</view>
<view class="value">{{ user.ib_user_group_text }}</view>
</view>
<view class="row" v-show="filterColumns.ib_level">
<view class="column">{{ filterColumns.ib_level?.title }}</view>
<view class="value">{{ user.ib_level }}</view>
</view>
<view class="bottomItem">
<text @click="hideItem(user)">{{ $t('home.customer.sellPage.packUp') }}</text>
<image @click="hideItem(user)" src="/static/packUpIcon.svg" mode="aspectFit" style="width: 14px;height: 8px"></image>
</view>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<Spin v-show="loading" />
<view class="inTheEnd" v-show="inTheEnd">{{ $t('common.inTheEnd') }}</view>
<view class="inTheEnd" v-show="noData">{{ $t('common.noData') }}</view>
<view style="height: 20px;width: 100%;"></view>
</scroll-view>
</view>
<uni-popup ref="popup" background-color="#fff" type="bottom">
<view style="padding: 37px 0;">
<scroll-view style="max-height: 70vh;" scroll-y="true">
<view class="filterRow" v-show="filterColumns.id?.ifFilter">
<view class="filterTitle">
<text>ID</text>
</view>
<input type="number" class="filterInput" v-model="queryCustomerParams.id" :placeholder="$t('form.pleaseEnter')">
</view>
<view class="filterRow" v-show="filterColumns.email?.ifFilter">
<view class="filterTitle">
<text>{{ filterColumns.email?.title }}</text>
</view>
<input class="filterInput" v-model="queryCustomerParams.email" :placeholder="$t('form.pleaseEnter')">
</view>
<!-- <view class="filterRow">-->
<!-- <view class="filterTitle">-->
<!-- <text>{{ $t('home.customer.sellPage.org') }}</text>-->
<!-- </view>-->
<!-- <input class="filterInput" :placeholder="$t('form.pleaseEnter')">-->
<!-- </view>-->
<view class="filterRow" v-show="filterColumns.salesman_name?.ifFilter">
<view class="filterTitle">
<text>{{ filterColumns.salesman_name?.title }}</text>
</view>
<input class="filterInput" v-model="queryCustomerParams.salesman_name" :placeholder="$t('form.pleaseEnter')">
</view>
<view class="filterRow" v-show="filterColumns.superior_id?.ifFilter">
<view class="filterTitle">
<text>{{ filterColumns.superior_id?.title }}</text>
</view>
<input class="filterInput" v-model="queryCustomerParams.superior_id" :placeholder="$t('form.pleaseEnter')">
</view>
<view class="filterRow" v-show="filterColumns.superior_code?.ifFilter">
<view class="filterTitle">
<text>{{ filterColumns.superior_code?.title }}</text>
</view>
<input class="filterInput" v-model="queryCustomerParams.superior_code" :placeholder="$t('form.pleaseEnter')">
</view>
<view class="filterRow" v-show="filterColumns.superior_name?.ifFilter">
<view class="filterTitle">
<text>{{ filterColumns.superior_name?.title }}</text>
</view>
<input class="filterInput" v-model="queryCustomerParams.superior_name" :placeholder="$t('form.pleaseEnter')">
</view>
<view class="filterRow" v-show="filterColumns.ib_user_group?.ifFilter">
<view class="filterTitle">
<text>{{ filterColumns.ib_user_group?.title }}</text>
</view>
<uni-data-select
:placeholder="$t('form.pleaseSelect')"
:localdata="ib_user_group_dict_options"
v-model="queryCustomerParams.ib_user_group"
placement="top"
></uni-data-select>
</view>
<view class="filterRow" v-show="filterColumns.auth?.ifFilter">
<view class="filterTitle">
<text>{{ filterColumns.auth?.title }}</text>
</view>
<uni-data-checkbox selectedColor="#29BBE4" v-model="queryCustomerParams.auth" :localdata="authOptions" >
</uni-data-checkbox>
</view>
<view class="filterRow" v-show="filterColumns.status?.ifFilter">
<view class="filterTitle">
<text>{{ filterColumns.status?.title }}</text>
</view>
<uni-data-checkbox selectedColor="#29BBE4" v-model="queryCustomerParams.status" :localdata="statusOptions" >
</uni-data-checkbox>
</view>
<view class="filterRow" v-show="filterColumns.create_time_format?.ifFilter">
<view class="filterTitle">
<text>{{ filterColumns.create_time_format?.title }}</text>
</view>
<uni-datetime-picker ref="timeRange" class="time" type="daterange" v-model="timeRange"/>
</view>
</scroll-view>
<view style="display: flex;gap: 12px;padding: 14px 16px;">
<buttom class="btn secondaryButton" @click="reset">
{{ $t('home.customer.sellPage.reset') }}
</buttom>
<buttom class="btn primaryButton" @click="search">
{{ $t('home.customer.sellPage.confirm') }}
</buttom>
</view>
</view>
</uni-popup>
<uni-popup ref="popup2" background-color="#fff" type="bottom">
<view style="padding: 42px 0px">
<Segmented
styleType="text"
fontSize="16px"
gap="6px"
:current="current2"
:values="items2"
@clickItem="onClickItem2"
inActiveColor="#999999"
activeColor="#000"
></Segmented>
<scroll-view style="max-height: 70vh;min-height: 70vh;" scroll-y="true">
<view class="userDetail" v-show="current2 == 0">
<view class="row">
<view class="column">{{ $t('form.firstName.label') }}</view>
<view class="value">{{ userDetail.first_name }}</view>
</view>
<view class="row">
<view class="column">{{ $t('form.lastName.label') }}</view>
<view class="value">{{ userDetail.last_name }}</view>
</view>
<view class="row">
<view class="column">{{ $t('home.customer.sellPage.email') }}</view>
<view class="value">{{ userDetail.email }}</view>
</view>
<view class="row">
<view class="column">{{ $t('home.customer.sellPage.phone') }}</view>
<view class="value">{{ userDetail.phone }}</view>
</view>
<view class="row">
<view class="column">{{ $t('form.residence.label') }}</view>
<view class="value">{{ userDetail.address_detailed }}</view>
</view>
<view class="row">
<view class="column">{{ $t('form.country.label') }}</view>
<view class="value">{{ userDetail.country }}</view>
</view>
<view class="row">
<view class="column">{{ $t('form.state.label') }}</view>
<view class="value">{{ userDetail.address_state }}</view>
</view>
<view class="row">
<view class="column">{{ $t('form.city.label') }}</view>
<view class="value">{{ userDetail.address }}</view>
</view>
</view>
<view class="BankDetail" v-show="current2 == 1">
<view class="bankCardWrapper" v-for="values in bankList" >
<view class="bankCardContent">
<view class="cardTitle">
<view class="bankStatusWrapper">
<view>
<image v-if="values.bank_standby_1 == 'B1'" src="/static/user/yhzh.svg" mode="aspectFit" style="width: 36px; height: 36px"></image>
<image v-else src="/static/user/szhb.svg" mode="aspectFit" style="width: 36px; height: 36px"></image>
</view>
<text v-if="values.bank_standby_1 == 'B1'" class="bankType">{{ $t('form.bankAccount.label') }}</text>
<text v-else class="bankType">{{ $t('form.personalData.financialInformation.digitalCurrency.label') }}</text>
<view
class="bankStatus"
:style="{color: applyStatusMap[getStatus(values)]?.color,backgroundColor: applyStatusMap[getStatus(values)]?.bgc}"
>
{{ applyStatusMap[getStatus(values)]?.text ?? '-' }}
</view>
</view>
</view>
<view class="divider"></view>
<view class="bankCardDetails">
<view class="detailItem">
<view class="point">
<text class="uni-subtitle" v-if="values.bank_standby_1 == 'B1'">{{ $t(`form.personalData.financialInformation.bankNo.label_B1`) }}</text>
<text class="uni-subtitle" v-else >{{ $t(`form.personalData.financialInformation.bankNo.label_B2`) }}</text>
</view>
<text>{{ values.bank_no }}</text>
</view>
<view class="detailItem">
<view class="point">
<text class="uni-subtitle">{{ $t('form.personalData.financialInformation.bankCurrency.label') }}</text>
</view>
<text>{{ values.bank_currency }}</text>
</view>
<view class="detailItem">
<view class="point">
<text class="uni-subtitle">{{ $t('form.fullName.label') }}</text>
</view>
<text>{{ values.bank_cards }}</text>
</view>
<view class="detailItem" v-if="values.bank_standby_1 === 'B1'">
<view class="point">
<text class="uni-subtitle">{{ $t('form.personalData.financialInformation.bankSubName.label') }}</text>
</view>
<text>{{ values.bank_sub_name }}</text>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</uni-popup>
</view>
</template>
<script>
import Segmented from '@/pages/components/segmented/index.vue';
import UniCollapse from "../../../uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue";
import UniDataSelect from "../../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";
import { queryCustomerList } from '@/services/customer/ib.ts';
import { getUserDetail, queryBankList } from '@/services/customer/customer.ts';
import { getDictByCode } from '@/services/home/home.ts';
import { UserLanguage, customerMenu } from '@/utils/const';
import { getFilterColumns, queryMenuList } from '@/services/home/home.ts';
export default {
data() {
return{
qcc_page_id:103,
filterColumns:{},
ib_user_group_dict:{},
ib_user_group_dict_options:[],
loading:false,
current: 0,
items: [],
itemsLink: [],
inTheEnd:false,
noData:false,
queryCustomerParams:{
qcc_fuzzy_search:null,
curr_page:1,
page_size:5,
id:null,
email:null,
salesman_name:null,
superior_id:null,
superior_code:null,
superior_name:null,
ib_user_group:null,
auth:null,
status:null,
date_start:null,
date_end:null,
},
timeRange: ['', ''],
authOptions: [
{ text: this.$t('home.customer.customerPage.all'), value: null }, // 全部
{ text: this.$t('home.customer.customerPage.auth0'), value: 0 }, //已认证
{ text: this.$t('home.customer.customerPage.auth1'), value: 1 } //未认证
],
statusOptions: [
{ text: this.$t('home.customer.customerPage.all'), value: null }, // 全部
{ text: this.$t('home.customer.customerPage.status0'), value: 0 }, //启用
{ text: this.$t('home.customer.customerPage.status1'), value: 1 }, //禁用
{ text: this.$t('home.customer.customerPage.status9'), value: 9 } //删除
],
userList:[],
totalRecords:0,
current2:0,
items2:['基本资料','财务资料'],
userDetail:{},
bankList:[],
applyStatusMap: {
approved: {
color: 'rgba(67, 207, 124, 1)',
bgc: 'rgba(67, 207, 124, 0.2)',
text: this.$t('form.personalData.financialInformation.bankStatus.approved')
},
verified: {
color: 'rgba(67, 207, 124, 1)',
bgc: 'rgba(67, 207, 124, 0.2)',
text: this.$t('form.personalData.financialInformation.bankStatus.verified')
},
pending: {
color: 'rgba(255, 195, 0, 1)',
bgc: 'rgba(255, 195, 0, 0.2)',
text: this.$t('form.personalData.financialInformation.bankStatus.pending')
},
unverified: {
color: 'rgba(255, 195, 0, 1)',
bgc: 'rgba(255, 195, 0, 0.2)',
text: this.$t('form.personalData.financialInformation.bankStatus.unverified')
},
rejected: {
color: 'rgba(255, 87, 51, 1)',
bgc: 'rgba(255, 87, 51, 0.2)',
text: this.$t('form.personalData.financialInformation.bankStatus.rejected')
}
}
}
},
methods:{
async getMenuListData() {
const res = await queryMenuList();
if (res && res.code === 0) {
const menuList = [];
for (var i = 0; i < res.data.length; i++) {
const { saleRouteKey } = res.data[i]
if (saleRouteKey == 'customer') {
if (res.data[i].children.length>0){
let index = 0;
for (let j = 0; j < res.data[i].children.length; j++) {
if (res.data[i].children[j].saleRouteKey !=null && res.data[i].children[j].saleRouteKey !=''){
this.items.push(res.data[i].children[j].name)
this.itemsLink.push(customerMenu[res.data[i].children[j].saleRouteKey])
if (res.data[i].children[j].saleRouteKey == 'ib'){
this.current = index
}
index++
}
}
}
}
}
}
},
async getIbUserGroupDict(){
this.getFilterColumns()
const res = await getDictByCode({
dict_code: 'ib_user_group',
qcc_language: UserLanguage
});
if (res && res.code === 0) {
let data = res.data
for (let i = 0; i < data.length; i++) {
let dict = data[i];
this.ib_user_group_dict[dict.fun_item_code] =dict.fun_item_text;
this.ib_user_group_dict_options[i] = {text:dict.fun_item_text,value:dict.fun_item_code}
}
}
this.queryUserList()
},
onClickItem(e) {
if (this.current != e.currentIndex) {
uni.navigateTo({url: this.itemsLink[e.currentIndex]});
}
},
onClickItem2(e) {
this.current2 = e.currentIndex
},
search(){
this.queryCustomerParams.curr_page = 1
this.queryCustomerParams.page_size = 5
this.queryUserList()
},
async queryUserList() {
this.$refs.popup.close();
this.userList = []
this.loading=true
this.queryCustomerParams.date_start = this.timeRange[0]
this.queryCustomerParams.date_end = this.timeRange[1]
const res = await queryCustomerList(this.queryCustomerParams);
if (res && res.code === 0) {
let data = res.data;
this.userList = data.records
this.totalRecords = data.totalRecords
}
if (this.userList == null || this.userList.length == 0){
this.noData = true
}else {
this.noData = false
}
if (this.userList !=null){
for (let i = 0; i < this.userList.length; i++) {
this.userList[i].ib_user_group_text = this.ib_user_group_dict[this.userList[i].ib_user_group]
}
}
this.loading=false
},
async getFilterColumns(){
const res = await getFilterColumns({
qcc_page_id: this.qcc_page_id,
qcc_language: UserLanguage
});
if (res && res.code === 0) {
let data = res.data
for (let i = 0; i < data.length; i++) {
this.filterColumns[data[i].field]=data[i]
}
}
},
showItem(user) {
user.if_show = true;
},
hideItem(user) {
user.if_show = false;
},
openFilter() {
this.$refs.popup.open()
},
async scrolltolowerQuery(){
if ((this.queryCustomerParams.page_size + 5)<(this.totalRecords + 5)){
this.inTheEnd = false;
this.queryCustomerParams.page_size = this.queryCustomerParams.page_size +5
this.queryUserList()
}else {
this.inTheEnd = true;
}
},
reset() {
this.queryCustomerParams.id = null
this.queryCustomerParams.email = null
this.queryCustomerParams.salesman_name = null
this.queryCustomerParams.superior_id = null
this.queryCustomerParams.superior_code = null
this.queryCustomerParams.superior_name = null
this.queryCustomerParams.ib_user_group = null
this.queryCustomerParams.auth = null
this.queryCustomerParams.status = null
this.$refs.timeRange.clear()
},
async getUserDetail(id) {
const res = await getUserDetail({id:id});
if (res && res.code === 0) {
this.userDetail =res.data
}
},
async queryBankList(id) {
const res = await queryBankList({id:id});
if (res && res.code === 0) {
this.bankList =res.data
}
},
showDetails(id) {
this.current2 = 0
this.getUserDetail(id)
this.queryBankList(id)
this.$refs.popup2.open()
},
getStatus(values) {
if (values.bank_standby_1 === 'B1') {
switch (Number(values.apply_status)) {
case 0:
return 'approved';
break;
case 1:
return 'pending';
break;
case 2:
return 'rejected';
break;
}
} else {
switch (true) {
case Number(values.apply_status) === 0 && Number(values.verify_email) === 1:
return 'verified';
break;
case Number(values.apply_status) === 0 && Number(values.verify_email) === 0:
return 'unverified';
break;
case Number(values.apply_status) === 1:
return 'pending';
break;
case Number(values.apply_status) === 2:
return 'rejected';
break;
}
}
}
},
mounted() {
this.getMenuListData()
this.getIbUserGroupDict()
},
components: {
Segmented,
UniCollapse,
UniDataSelect
}
};
</script>
<style lang="scss" scoped>
@import './index.scss';
.is-input-border {
border: none;
}
</style>