feat: 🚀 对接接口

src/views/product/details/index.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="card table-box">
+        <div>
+            <h3>/product/{id}</h3>
+        </div>
+        <div>
+            <h4>{{ paramsValue }}</h4>
+        </div>
+        <template v-for="(item, index) in tableData" :key="index">
+            <MyTable :title="item.title" :columns="item.columns" :tableData="item.data" />
+        </template>
+        <div>
+            <h5>{{ queryTextareaTitle }}</h5>
+            <el-input v-model="queryTextareaValue" style="width: 840px" :rows="10" type="textarea" readonly />
+        </div>
+        <div>
+            <h5>{{ returnTextareaTitle }}</h5>
+            <el-input v-model="returnTextareaTitleValue" style="width: 840px" :rows="30" type="textarea" readonly />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="productDetailsIndex">
+import { ZH_DATA } from "./data/zh_data";
+import { EN_DATA } from "./data/en_data";
+import { useUserStore } from "@/stores/modules/user";
+import MyTable from "@/components/MyTable/index.vue";
+import { RETURN_VALUE } from "./example/index";
+const userStore = useUserStore();
+const PARAMS_DATA = {
+    1: ZH_DATA,
+    2: EN_DATA
+};
+const TEXTAREA_TITLES = {
+    1: "请求示例",
+    2: "Request Example"
+};
+const TEXTAREA_TITLES1 = {
+    1: "响应示例",
+    2: "Response Example"
+};
+const PARAMS_VALUE = {
+    1: "公共参数",
+    2: "Common parameters"
+};
+
+let tableData = ref(ZH_DATA);
+let queryTextareaValue = ref(
+    JSON.stringify(
+        {
+            id: 1
+        },
+        null,
+        2
+    )
+);
+let returnTextareaTitleValue = ref(JSON.stringify(RETURN_VALUE, null, 2));
+let queryTextareaTitle = ref("请求示例");
+let returnTextareaTitle = ref("响应示例");
+let paramsValue = ref("公共参数");
+watch(
+    () => userStore.languageValue,
+    newVal => {
+        tableData.value = PARAMS_DATA[newVal];
+        queryTextareaTitle.value = TEXTAREA_TITLES[newVal];
+        returnTextareaTitle.value = TEXTAREA_TITLES1[newVal];
+        paramsValue.value = PARAMS_VALUE[newVal];
+    },
+    {
+        immediate: true,
+        deep: true
+    }
+);
+</script>
+
+<style scoped></style>