HTFX-CRM-APP/pages/home/index.vue

<template>
	<NavBar v-if="showNav" />
	<CompleteInfoReminder />
	<view class="container">
		<view class="swiper">
			<HomeSwiper :position="1" />
		</view>
		<view class="myAccount">
			<text>{{ $t('home.myAccount.title') }}</text>
			<image src="/static/add.png" mode="aspectFit" class="addIcon" @click="toOpenAccountPage"></image>
		</view>
		<view style="margin-top: 33px">
			<Segmented
				styleType="text"
				fontSize="16px"
				gap="22px"
				:current="current"
				:values="items"
				@clickItem="onClickItem"
				inActiveColor="#999999"
				activeColor="#000"
			></Segmented>
		</view>
		<view class="accountsContent">
			<view v-if="!accountList.length" style="display: flex; justify-content: center; align-items: center">
				<Spin v-show="accountListLodaing" />
				<view v-show="!accountListLodaing" class="emptyContent">
					<image src="/static/empty.png" mode="aspectFit" style="width: 72px; height: 100px; margin-top: 64px"></image>
					<view>{{ $t('home.noAccount.title') }}</view>
					<button class="primaryButton addBtn" @click="toOpenAccountPage">{{ $t('home.noAccount.add') }}</button>
				</view>
			</view>
			<AccountCard v-for="account in accountList" :key="account.id" :values="account" :isHistory="isHistory" :handleFileAccount="() => handleFileAccount(account)" />
		</view>
	</view>
</template>

<script>
import CompleteInfoReminder from '@/pages/components/completeInfoReminder/index.vue';
import Segmented from '@/pages/components/segmented/index.vue';
import AccountCard from './components/accountCard/index.vue';
import { UserLanguage } from '@/utils/const';
import { getMTAccounts, getHistoryMtLogin, savePlaceFile } from '@/services/home/home';
export default {
	data() {
		return {
			current: 0,
			items: [this.$t('home.realMT4'), this.$t('home.realMT5'), this.$t('home.demo'), this.$t('home.filed')],
			rawAccountList: [],
			accountList: [],
			accountListLodaing: false,
			isHistory: false,
			showNav: false
		};
	},
	methods: {
		toOpenAccountPage() {
			uni.navigateTo({
				url: '/pages/home/openMTAccount/index'
			});
		},
		filterAccountList(type, version) {
			return this.rawAccountList.filter((account) => {
				return account.server_type === type && (version ? account.mt_versions === version : true);
			});
		},
		async getAccountList() {
			this.accountList = [];
			this.accountListLodaing = true;
			const res = await getMTAccounts();
			if (res && res.code === 0) {
				this.rawAccountList = res.data;
			}
		},
		async getHistoryMtLoginList() {
			this.accountList = [];
			this.accountListLodaing = true;
			const res = await getHistoryMtLogin();
			if (res && res.code === 0) {
				this.accountList = res.data;
			}
			this.accountListLodaing = false;
		},
		async handleFileAccount(account) {
			this.$cusModal.showModal({
				type: 'confirm',
				contentText: this.$t('modal.fileAccount'),
				closeAfterConfirm: false,
				onConfirm: async () => {
					try {
						const res = await savePlaceFile({ id: account.id });
						if (res && res.code === 0) {
							this.$cusModal.showModal({
								type: 'message',
								status: 'success',
								contentText: res.msg ?? this.$t('common.success.action')
							});
							// uni.showToast({
							// 	icon: 'success',
							// 	title: res.msg ?? this.$t('common.success.action')
							// });
						} else {
							this.$cusModal.showModal({
								type: 'message',
								status: 'warning',
								contentText: res.msg ?? this.$t('common.error.sysError')
							});
							// uni.showToast({
							// 	icon: 'error',
							// 	title: res.msg ?? this.$t('common.error.sysError'),
							// 	duration: 2000
							// });
						}
					} catch (e) {
						console.log('e===>', e);
					}
					this.onClickItem({ currentIndex: this.current });
				}
			});
			// uni.showModal({
			// 	content: this.$t('modal.fileAccount'),
			// 	confirmColor: '#4DC0E5',
			// 	success: async (res) => {
			// 		if (res.confirm) {
			// 			const res = await savePlaceFile(account.id);
			// 			if (res && res.code === 0) {
			// 				uni.showToast({
			// 					icon: 'success',
			// 					title: res.msg ?? this.$t('common.success.action')
			// 				});
			// 			} else {
			// 				uni.showToast({
			// 					icon: 'error',
			// 					title: res.msg ?? this.$t('common.error.sysError')
			// 				});
			// 			}
			// 		}
			// 	}
			// });
		},
		async onClickItem(e) {
			if (this.current != e.currentIndex) {
				this.current = e.currentIndex;
			}
			switch (e.currentIndex) {
				case 0:
					await this.getAccountList();
					this.accountList = this.filterAccountList('live', 4);
					this.accountListLodaing = false;
					this.isHistory = false;
					break;
				case 1:
					await this.getAccountList();
					this.accountList = this.filterAccountList('live', 5);
					this.accountListLodaing = false;
					this.isHistory = false;
					break;
				case 2:
					await this.getAccountList();
					this.accountList = this.filterAccountList('test');
					this.accountListLodaing = false;
					this.isHistory = false;
					break;
				case 3:
					await this.getHistoryMtLoginList();
					this.isHistory = true;
					break;
				default:
					break;
			}
		}
	},
	created() {
		this.onClickItem({ currentIndex: 0 });
		uni.removeStorageSync('actId');
		uni.removeStorageSync('curs');
		uni.removeStorageSync('curl');
	},
	components: {
		CompleteInfoReminder,
		Segmented,
		AccountCard
	},
	onShow() {
		this.showNav = true
	},
	onHide() {
		this.showNav = false
	}
};
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>