jcloud/dashboard/src2/components/partners/PartnerCustomers.vue

<template>
	<div class="p-4">
		<ObjectList :options="partnerCustomerList" />
		<Dialog
			v-model="contributionDialog"
			:options="{
				size: '3xl',
				title: '过去6个月的贡献'
			}"
		>
			<template #body-content>
				<template v-if="showInvoice">
					<div
						v-if="showInvoice.status === 'Empty'"
						class="text-base text-gray-600"
					>
						无内容显示
					</div>
					<PartnerCustomerInvoices
						:customerTeam="showInvoice.name"
						:customerCurrency="showInvoice.currency"
					/>
				</template>
			</template>
		</Dialog>
		<Dialog
			v-model="transferCreditsDialog"
			:options="{ title: '转账积分' }"
		>
			<template #body-content>
				<p class="pb-3 text-p-base">
					输入您希望转账的积分金额（以{{ $team.pg.currency }}为单位）。
				</p>
				<FormControl placeholder="金额" v-model="amount" autocomplete="off" />
				<ErrorMessage
					class="mt-2"
					:message="$resources.transferCredits.error"
				/>
			</template>
			<template #actions>
				<Button
					type="primary"
					variant="solid"
					class="w-full"
					:loading="$resources.transferCredits.loading"
					@click="
						$resources.transferCredits.submit({
							amount: amount,
							customer: customerTeam.name,
							partner: $team.pg.name
						})
					"
				>
					转账
				</Button>
			</template>
		</Dialog>
		<Dialog
			v-model="showConfirmationDialog"
			:options="{ title: '积分转账成功' }"
		>
			<template #body-content>
				<p class="text-p-base">
					{{ formatCurrency(amount) }} 积分已成功转账至
					<strong>{{ customerTeam.billing_name }}</strong>
				</p>
				<span class="text-base font-medium text-gray-700"
					>可用积分: {{ creditBalance() }}</span
				>
			</template>
		</Dialog>
	</div>
</template>
<script>
import PartnerCustomerInvoices from './PartnerCustomerInvoices.vue';
import ObjectList from '../ObjectList.vue';
import { Dialog, ErrorMessage } from 'jingrow-ui';
import { toast } from 'vue-sonner';
import { userCurrency } from '../../utils/format';

export default {
	name: 'PartnerCustomers',
	components: {
		PartnerCustomerInvoices,
		Dialog,
		ErrorMessage,
		ObjectList
	},
	data() {
		return {
			contributionDialog: false,
			showInvoice: null,
			transferCreditsDialog: false,
			customerTeam: null,
			amount: 0.0,
			showConfirmationDialog: false
		};
	},
	resources: {
		transferCredits() {
			return {
				url: 'jcloud.api.partner.transfer_credits',
				onSuccess(data) {
					this.amount = data;
					this.transferCreditsDialog = false;
					this.showConfirmationDialog = true;
					toast.success('积分转账成功');
				}
			};
		},
		getBalance: {
			url: 'jcloud.api.billing.get_balance_credit',
			auto: true
		}
	},
	computed: {
		partnerCustomerList() {
			return {
				resource() {
					return {
						url: 'jcloud.api.partner.get_partner_customers',
						transform(data) {
							return data.map(d => {
								return {
									email: d.user,
									billing_name: d.billing_name || '',
									payment_mode: d.payment_mode || '',
									currency: d.currency,
									name: d.name
								};
							});
						},
						initialData: [],
						auto: true
					};
				},
				columns: [
					{
						label: '名称',
						fieldname: 'billing_name'
					},
					{
						label: '邮箱',
						fieldname: 'email'
					},
					{
						label: '支付方式',
						fieldname: 'payment_mode'
					},
					{
						label: '货币',
						fieldname: 'currency',
						width: 0.5
					},
					{
						label: '贡献',
						type: 'Button',
						width: 0.5,
						align: 'center',
						Button: ({ row }) => {
							return {
								label: '查看',
								onClick: () => {
									this.showInvoice = row;
									this.contributionDialog = true;
								}
};
						}
					},
					{
						label: '',
						type: 'Button',
						width: 0.8,
						align: 'right',
						key: 'actions',
						Button: ({ row }) => {
							return {
								label: '转移积分',
								onClick: () => {
									this.transferCreditsDialog = true;
									this.customerTeam = row;
								}
							};
						}
					}
				]
			};
		}
	},
	methods: {
		formatCurrency(value) {
			if (value === 0) {
				return '';
			}
			return userCurrency(value);
		},
		creditBalance() {
			return this.formatCurrency(
				parseFloat(this.$resources.getBalance.data) - parseFloat(this.amount)
			);
		}
	}
};
</script>