|
@@ -1,31 +1,20 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="app-container">
|
|
<div class="app-container">
|
|
|
<el-row :gutter="20">
|
|
<el-row :gutter="20">
|
|
|
- <el-col :span="12" v-for="(item, index) in formItems.slice(0, 4)" :key="index">
|
|
|
|
|
- <el-form-item :label="item.label" label-width="120px">
|
|
|
|
|
|
|
+ <el-col :span="12" v-for="(item, index) in formItems.slice(0, 6)" :key="index">
|
|
|
|
|
+ <el-form-item :label="item.label" label-width="125px">
|
|
|
<el-input v-model="data.form[item.prop]" readonly class="small-input" />
|
|
<el-input v-model="data.form[item.prop]" readonly class="small-input" />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
|
|
|
|
|
- <el-col :span="12">
|
|
|
|
|
- <el-form-item label="郵便番号" label-width="120px">
|
|
|
|
|
- <el-input v-model="data.form.postalCode" readonly class="small-input" />
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- </el-col>
|
|
|
|
|
- <el-col :span="12">
|
|
|
|
|
- <el-form-item label="お電話番号" label-width="120px">
|
|
|
|
|
- <el-input v-model="data.form.phoneNumber" readonly class="small-input" />
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- </el-col>
|
|
|
|
|
-
|
|
|
|
|
<el-col :span="24">
|
|
<el-col :span="24">
|
|
|
- <el-form-item label="住所" label-width="120px">
|
|
|
|
|
- <el-input v-model="data.form.address" readonly class="address-input" />
|
|
|
|
|
|
|
+ <el-form-item label="住所" label-width="125px">
|
|
|
|
|
+ <el-input v-model="data.form.address1" readonly class="address-input" />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
|
|
|
|
|
<el-col :span="12" v-for="(item, index) in formItems.slice(6)" :key="index + 6">
|
|
<el-col :span="12" v-for="(item, index) in formItems.slice(6)" :key="index + 6">
|
|
|
- <el-form-item :label="item.label" label-width="120px">
|
|
|
|
|
|
|
+ <el-form-item :label="item.label" label-width="125px">
|
|
|
<el-input v-model="data.form[item.prop]" readonly class="small-input" />
|
|
<el-input v-model="data.form[item.prop]" readonly class="small-input" />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</el-col>
|
|
</el-col>
|
|
@@ -34,36 +23,51 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { reactive, toRefs } from 'vue';
|
|
|
|
|
|
|
+import { reactive} from 'vue';
|
|
|
import { useRoute } from 'vue-router';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
|
+import { getCustomerDetail } from "@/api/fcbi/customer.js";
|
|
|
|
|
+
|
|
|
|
|
+// ルート情報の取得
|
|
|
const route = useRoute();
|
|
const route = useRoute();
|
|
|
-import {getcustomerDetail} from "@/api/fcbi/customer.js"
|
|
|
|
|
|
|
+// ルートパラメータから顧客IDを取得
|
|
|
const customerId = route.params.customerId;
|
|
const customerId = route.params.customerId;
|
|
|
|
|
|
|
|
const data = reactive({
|
|
const data = reactive({
|
|
|
form: {},
|
|
form: {},
|
|
|
queryParams: {},
|
|
queryParams: {},
|
|
|
});
|
|
});
|
|
|
-const { queryParams } = toRefs(data);
|
|
|
|
|
|
|
|
|
|
|
|
+// フォーム項目の定義(ラベルと対応するデータプロパティ)
|
|
|
const formItems = [
|
|
const formItems = [
|
|
|
{ label: '顧客名', prop: 'customerName' },
|
|
{ label: '顧客名', prop: 'customerName' },
|
|
|
{ label: '顧客名(カナ)', prop: 'customerNameKana' },
|
|
{ label: '顧客名(カナ)', prop: 'customerNameKana' },
|
|
|
- { label: '性別', prop: 'gender' },
|
|
|
|
|
- { label: '生年月日', prop: 'birthday' },
|
|
|
|
|
|
|
+ { label: '性別', prop: 'genderFlagDesc' },
|
|
|
|
|
+ { label: '生年月日', prop: 'birthDate' },
|
|
|
{ label: '郵便番号', prop: 'postalCode' },
|
|
{ label: '郵便番号', prop: 'postalCode' },
|
|
|
- { label: 'お電話番号', prop: 'phoneNumber' },
|
|
|
|
|
|
|
+ { label: 'お電話番号', prop: 'mobilePhone' },
|
|
|
{ label: 'メールアドレス', prop: 'email' },
|
|
{ label: 'メールアドレス', prop: 'email' },
|
|
|
- { label: '会員レベル', prop: 'memberLevel' },
|
|
|
|
|
- { label: '直近購入年月', prop: 'recentPurchaseMonth' },
|
|
|
|
|
|
|
+ { label: '会員レベル', prop: 'memberLevelFlagDesc' },
|
|
|
|
|
+ { label: '直近購入年月', prop: 'lastPurchaseMonth' },
|
|
|
{ label: '最終購入日', prop: 'lastPurchaseDate' },
|
|
{ label: '最終購入日', prop: 'lastPurchaseDate' },
|
|
|
{ label: '購入頻度', prop: 'purchaseFrequency' },
|
|
{ label: '購入頻度', prop: 'purchaseFrequency' },
|
|
|
- { label: '累計有効購入金額', prop: 'totalValidPurchaseAmount' },
|
|
|
|
|
- { label: 'DM対象', prop: 'dmTarget' },
|
|
|
|
|
- { label: 'DM配信', prop: 'dmDelivery' },
|
|
|
|
|
- { label: 'メール配信', prop: 'emailDelivery' },
|
|
|
|
|
- { label: 'SMS配信', prop: 'smsDelivery' },
|
|
|
|
|
|
|
+ { label: '累計有効購入金額', prop: 'totalValidSpending' },
|
|
|
|
|
+ { label: 'DM対象', prop: 'dmTargetFlagDesc' },
|
|
|
|
|
+ { label: 'DM配信', prop: 'dmAllowedFlagDesc' },
|
|
|
|
|
+ { label: 'メール配信', prop: 'emailAllowedFlagDesc' },
|
|
|
|
|
+ { label: 'SMS配信', prop: 'smsAllowedFlagDesc' },
|
|
|
];
|
|
];
|
|
|
|
|
+
|
|
|
|
|
+// 顧客詳細の取得
|
|
|
|
|
+const fetchCustomerDetail = async () => {
|
|
|
|
|
+ const requestData = { customerId };
|
|
|
|
|
+ const response = await getCustomerDetail(requestData);
|
|
|
|
|
+ if (response.code === 200) {
|
|
|
|
|
+ data.form = response.data || {};
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+// ページ読み込み時に顧客詳細情報を取得
|
|
|
|
|
+fetchCustomerDetail();
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
<style>
|
|
@@ -71,4 +75,4 @@ const formItems = [
|
|
|
.address-input {
|
|
.address-input {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
}
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
|
+</style>
|