From 53227c80cde5b8abd4fdd288b41cbb9465c60693 Mon Sep 17 00:00:00 2001
From: fuxiaochun <f2e.xiaochun@gmail.com>
Date: Wed, 16 Aug 2023 14:47:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BD=E5=88=AB=E5=9C=B0=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                      |  18 ++
 src/views/business/legal/country.vue     | 118 ++++++++++++
 src/views/business/legal/countryInfo.vue | 225 +++++++++++++++++++++++
 3 files changed, 361 insertions(+)
 create mode 100644 src/views/business/legal/country.vue
 create mode 100644 src/views/business/legal/countryInfo.vue

diff --git a/src/router/index.js b/src/router/index.js
index 23df686..f32723c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -126,6 +126,24 @@ const router = createRouter({
                     },
                     component: () => import("@/views/business/legal/policyDetail.vue"),
                 },
+                {
+                    path: 'business/legal/country',
+                    name: 'country',
+                    meta: {
+                        title: 'AI商情-法律法规-国别地区指南',
+                        group: 'business'
+                    },
+                    component: () => import("@/views/business/legal/country.vue"),
+                },
+                {
+                    path: 'business/legal/country/detail/:id',
+                    name: 'countryDetail',
+                    meta: {
+                        title: 'AI商情-法律法规-国别地区指南',
+                        group: 'business'
+                    },
+                    component: () => import("@/views/business/legal/countryInfo.vue"),
+                },
             ]
         }
     ],
diff --git a/src/views/business/legal/country.vue b/src/views/business/legal/country.vue
new file mode 100644
index 0000000..5985eaf
--- /dev/null
+++ b/src/views/business/legal/country.vue
@@ -0,0 +1,118 @@
+<template>
+    <div class="pageContainer">
+        <div class="areaBox">
+            <ul>
+                <li :class="{ active: area == 'Asia' }" @click="getCountryList('Asia')">亚洲</li>
+                <li :class="{ active: area == 'Europe' }" @click="getCountryList('Europe')">欧洲</li>
+                <li :class="{ active: area == 'North_America' }" @click="getCountryList('North_America')">北美洲</li>
+                <li :class="{ active: area == 'South_America' }" @click="getCountryList('South_America')">南美洲</li>
+                <li :class="{ active: area == 'Oceania' }" @click="getCountryList('Oceania')">大洋洲</li>
+                <li :class="{ active: area == 'Africa' }" @click="getCountryList('Africa')">非洲</li>
+            </ul>
+        </div>
+        <div class="countryList">
+            <div class="tips" v-if="!area ">请先选择上面的地区大洲</div>
+            <ul v-if="countries.length > 0">
+                <li :key="item.id" v-for="item in countries" @click="goDetail(item.id)">{{ item.name }}</li>
+            </ul>
+            <div class="placeholder" v-if="placeholder">{{ placeholder }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+import http from '@/io/http';
+import { showToast } from 'vant';
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();
+const area = ref();
+const countries = ref([]);
+const placeholder = ref();
+
+const getCountryList = (key) => {
+    area.value = key;
+    let params = { category_key: key };
+    placeholder.value = '数据加载中...';
+    http(`/api/country`, params, 'get').then(res => {
+        countries.value = res.data || [];
+        placeholder.value = countries.value.length ? '' : '暂无数据';
+    }).catch(err => {
+        showToast(err.message);
+        placeholder.value = '国家地区数据加载失败'
+    });
+};
+
+const goDetail = (id) => {
+    router.push(`/business/legal/country/detail/${id}`);
+};
+
+</script>
+
+<style lang="scss" scoped>
+.pageContainer{
+    padding: 60px;
+    height: 100%;
+    color: #FFF;
+
+    .areaBox{
+        flex: 1;
+        ul{
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            li{
+                width: 48%;
+                padding: 20px;
+                font-size: 26px;
+                line-height: 30px;
+                background: #414548;
+                margin-top: 20px;
+                border-radius: 4px;
+                &:active,
+                &.active{
+                    background: #3662FE;
+                    color: #FFF;
+                }
+            }
+        }
+    }
+    .countryList{
+        flex: 1;
+        height: 70%;
+        border: 2px solid #CCC;
+        border-radius: 4px;
+        margin-top: 50px;
+        overflow-y: auto;
+        .tips{
+            font-size: 26px;
+            padding: 20px;
+            line-height: 30px;
+            text-align: center;
+        }
+        li{
+            padding: 20px;
+            font-size: 26px;
+            line-height: 30px;
+            border-bottom: 1px dashed #414548;
+            &:active{
+                background: #3662FE;
+                color: #FFF;
+            }
+        }
+    }
+    .placeholder{
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 23px;
+        text-align: center;
+        line-height: 30px;
+        padding: 20px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/business/legal/countryInfo.vue b/src/views/business/legal/countryInfo.vue
new file mode 100644
index 0000000..78d6652
--- /dev/null
+++ b/src/views/business/legal/countryInfo.vue
@@ -0,0 +1,225 @@
+<template>
+    <div class="pageContainer">
+        <div class="mainBox">
+            <div class="breadNav">
+                <router-link to="/home">首页</router-link><span>&gt;</span>
+                <router-link to="/insights">AI商情</router-link><span>&gt;</span>
+                <router-link to="/insights/legal/index">法律法规</router-link><span>&gt;</span>
+                <router-link to="/insights/legal/country">国别地区指南</router-link><span>&gt;</span>
+                <span>详情</span>
+            </div>
+            <template v-if="detail">
+                <div class="countryDesc">
+                    <div class="title">{{ detail.full_name }}</div>
+                    <div class="flag"><img :src="detail.flag" alt=""></div>
+                    <div class="desc">
+                        <p>{{detail.description }}</p>
+                    </div>
+                </div>
+                <div class="detailContent">
+                    <dl class="menu">
+                        <dt>目录</dt>
+                        <dd>
+                            <span :class="{active: curMenu == item.title}" :key="index" v-for="item,index in detail.content" @click="chooseMenu(item)">{{item.title}}</span>
+                        </dd>
+                    </dl>
+                    <dl class="section">
+                        <dt>内容</dt>
+                        <dd>
+                            <span :class="{active: curSection == item.title}" :key="index" v-for="item,index in curMenuData" @click="chooseSection(item)">{{item.title}}</span>
+                        </dd>
+                    </dl>
+                    <div class="info">
+                        <template :key="index" v-for="item, index in curSectionData">
+                            <img v-if="item.type == 'image'" :src="item.value">
+                            <p v-if="item.type == 'text'">{{item.value}}</p>
+                        </template>
+                    </div>
+                </div>
+            </template>
+            <div class="loadingBox" v-else>数据加载中...</div>
+        </div>
+        <!-- <AiAssistant></AiAssistant> -->
+    </div>
+</template>
+
+<script setup>
+import { ref, onBeforeMount, onMounted } from 'vue';
+import http from '@/io/http';
+import { showToast } from 'vant';
+import { useRouter, useRoute } from 'vue-router';
+import { DateFormat } from '@/utils/format.js';
+// import AiAssistant from '@/views/chat/components/ai-assistant.vue';
+
+const router = useRouter();
+const route = useRoute();
+const id = ref(route.params.id);
+const detail = ref();
+const curMenu = ref('');  // 当前选中的目录
+const curMenuData = ref();  // 当前选中的目录数据
+const curSection = ref();  // 当前选中的内容
+const curSectionData = ref();  // 当前选中的内容数据
+
+onMounted(() => {
+    getDetail();
+});
+
+const getDetail = () => {
+    http(`/api/country/${id.value}`, {}, 'get').then(res => {
+        detail.value = res.data;
+        curMenu.value = res.data.content[0].title;
+        curMenuData.value = res.data.content[0].list;
+        curSection.value = curMenuData.value[0].title;
+        curSectionData.value = curMenuData.value[0].list;
+    }).catch(err => {
+        showToast(err.message);
+    });
+};
+
+const chooseMenu = (item)=>{
+    curMenu.value = item.title;
+    curMenuData.value = item.list;
+    curSection.value = item.list[0].title;
+    curSectionData.value = item.list[0].list;
+};
+
+const chooseSection = (item)=>{
+    curSection.value = item.title;
+    curSectionData.value = item.list;
+};
+
+</script>
+
+<style lang="scss" scoped>
+.pageContainer {
+    color: #FFF;
+    display: flex;
+
+    .mainBox {
+        flex: 1;
+        background: #242527;
+        padding: 30px;
+    }
+
+    .breadNav{
+        height: 30px;
+        line-height: 30px;
+        color: #999;
+        font-size: 22px;
+        span{
+            padding: 0 5px;
+        }
+        a{
+            color: #999;
+            &:hover{
+                color: #FFF;
+            }
+        }
+    }
+    .loadingBox{
+        width: 100%;
+        height: 400px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
+    }
+    .countryDesc{
+        flex: 1;
+        padding: 50px 0;
+        .title{
+            font-size: 28px;
+            line-height: 36px;
+            font-weight: bold;
+            padding-bottom: 20px;
+        }
+        .flag{
+            width: 100%;
+            padding: 20px;
+            background-color: #424242;
+            img{
+                width: 100%;
+                height: 350px;
+            }
+        }
+        .desc{
+            flex: 1;
+            padding: 10px;
+            p{
+                font-size: 23px;
+                line-height: 30px;
+                padding: 10px 0;
+            }
+        }
+    }
+
+    .detailContent {
+        padding: 20px 0;
+
+        .menu,
+        .section{
+            width: 100%;
+            padding: 10px 0;
+            dt{
+                width: 60px;
+                height: 60px;
+                line-height: 60px;
+                text-align: center;
+                font-size: 24px;
+                font-weight: bold;
+            }
+            dd{
+                flex: 1;
+                line-height: 0;
+                span{
+                    display: inline-block;
+                    padding: 0 20px;
+                    height: 50px;
+                    line-height: 50px;
+                    text-align: center;
+                    margin-left: 15px;
+                    margin-bottom: 15px;
+                    background: #414548;
+                    border-radius: 4px;
+                    font-size: 24px;
+                    cursor: pointer;
+                    &:hover,
+                    &.active{
+                        background-color: #3662FE;
+                    }
+                }
+            }
+        }
+        .section dd span{
+            background: none;
+            border: 1px solid #999;
+            border-radius: 4px;
+            box-sizing: border-box;
+            line-height: 50px;
+        }
+
+        .info {
+            line-height: 1.5;
+            min-height: 400px;
+            font-size: 24px;
+            :deep(p){
+                padding: 10px 0;
+            }
+            :deep(strong){
+                font-weight: bold;
+            }
+            :deep(b){
+                font-weight: bold;
+            }
+            :deep(h1){
+                font-weight: bold;
+            }
+            :deep(img){
+                max-width: 100%;
+                display: block;
+                margin: 10px auto;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file