顧客一覧作成

src/api/fcbi/customer.js

@@ -19,7 +19,7 @@ export function fcStoreSurvey(query) {
 }
 
 // 顧客詳細
-export function getcustomerDetail(data) {
+export function getCustomerDetail(data) {
   return request({
     url: '/system/customer/customerDetail',
     method: 'post',

src/views/fcbi/customer/detail.vue

@@ -1,31 +1,20 @@
 <template>
   <div class="app-container">
     <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-form-item>
       </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-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-col>
 
       <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-form-item>
       </el-col>
@@ -34,36 +23,51 @@
 </template>
 
 <script setup>
-import { reactive, toRefs } from 'vue';
+import { reactive} from 'vue';
 import { useRoute } from 'vue-router';
+import { getCustomerDetail } from "@/api/fcbi/customer.js";
+
+// ルート情報の取得
 const route = useRoute();
-import {getcustomerDetail} from "@/api/fcbi/customer.js"
+// ルートパラメータから顧客IDを取得
 const customerId = route.params.customerId;
 
 const data = reactive({
   form: {},
   queryParams: {},
 });
-const { queryParams } = toRefs(data);
 
+// フォーム項目の定義（ラベルと対応するデータプロパティ）
 const formItems = [
   { label: '顧客名', prop: 'customerName' },
   { label: '顧客名(カナ)', prop: 'customerNameKana' },
-  { label: '性別', prop: 'gender' },
-  { label: '生年月日', prop: 'birthday' },
+  { label: '性別', prop: 'genderFlagDesc' },
+  { label: '生年月日', prop: 'birthDate' },
   { label: '郵便番号', prop: 'postalCode' },
-  { label: 'お電話番号', prop: 'phoneNumber' },
+  { label: 'お電話番号', prop: 'mobilePhone' },
   { label: 'メールアドレス', prop: 'email' },
-  { label: '会員レベル', prop: 'memberLevel' },
-  { label: '直近購入年月', prop: 'recentPurchaseMonth' },
+  { label: '会員レベル', prop: 'memberLevelFlagDesc' },
+  { label: '直近購入年月', prop: 'lastPurchaseMonth' },
   { label: '最終購入日', prop: 'lastPurchaseDate' },
   { 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>
 
 <style>
@@ -71,4 +75,4 @@ const formItems = [
 .address-input {
   width: 100%;
 }
-</style>
+</style>