master
fuxiaochun
parent
53227c80cd
commit
88001e059e
|
|
@ -144,6 +144,24 @@ const router = createRouter({
|
||||||
},
|
},
|
||||||
component: () => import("@/views/business/legal/countryInfo.vue"),
|
component: () => import("@/views/business/legal/countryInfo.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'business/legal/search',
|
||||||
|
name: 'search',
|
||||||
|
meta: {
|
||||||
|
title: 'AI商情-法律法规-境外法规检索',
|
||||||
|
group: 'business'
|
||||||
|
},
|
||||||
|
component: () => import("@/views/business/legal/search.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'business/legal/searchResult',
|
||||||
|
name: 'searchResult',
|
||||||
|
meta: {
|
||||||
|
title: 'AI商情-法律法规-境外法规检索',
|
||||||
|
group: 'business'
|
||||||
|
},
|
||||||
|
component: () => import("@/views/business/legal/searchResult.vue"),
|
||||||
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,315 @@
|
||||||
|
<template>
|
||||||
|
<div class="pageContainer">
|
||||||
|
<div class="title">境外法规检索</div>
|
||||||
|
<div class="formBox">
|
||||||
|
<div class="item">
|
||||||
|
<div class="label">关键字</div>
|
||||||
|
<div class="val">
|
||||||
|
<van-field :clearable="true" :center="true" class="txt" v-model="keywords" placeholder="请输入关键字"></van-field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="label">地区</div>
|
||||||
|
<div class="val">
|
||||||
|
<van-field class="areaInput" v-model="area.name" is-link readonly placeholder="地区" @click="onPick('area')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="label">国家</div>
|
||||||
|
<div class="val">
|
||||||
|
<van-field class="areaInput" v-model="nation.name" is-link readonly placeholder="国家" @click="onPick('nation')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="label">生效区域</div>
|
||||||
|
<div class="val">
|
||||||
|
<van-field class="areaInput" v-model="effectArea.name" is-link readonly placeholder="生效区域" @click="onPick('effectArea')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<van-popup v-model:show="showAreaPicker" round position="bottom">
|
||||||
|
<van-picker
|
||||||
|
v-model="curSelectedAreaValue"
|
||||||
|
:title="areaPickerTitle"
|
||||||
|
:columns="areaColumns"
|
||||||
|
:columns-field-names="{ text: 'name', value: 'id', children: null }"
|
||||||
|
@cancel="showAreaPicker = false"
|
||||||
|
@confirm="onAreaPickerConfirm"
|
||||||
|
/>
|
||||||
|
</van-popup>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="item" v-if="legalCategories.length">
|
||||||
|
<div class="label">法规分类</div>
|
||||||
|
<div class="val">
|
||||||
|
<van-field class="areaInput" v-model="curCategory.name" is-link readonly placeholder="请选择法规分类" @click="showCategoryPicker = true" />
|
||||||
|
<div class="legalSubTypes" v-if="curCategory.children">
|
||||||
|
<van-checkbox-group v-model="checkedCategoryType">
|
||||||
|
<van-checkbox :key="item.id" :name="item.name" v-for="item in curCategory.children" shape="square" >{{ item.name }}</van-checkbox>
|
||||||
|
</van-checkbox-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<van-popup v-model:show="showCategoryPicker" round position="bottom">
|
||||||
|
<van-picker
|
||||||
|
title="法规分类"
|
||||||
|
:columns="legalCategories"
|
||||||
|
:columns-field-names="{ text: 'name', value: 'id', children: null }"
|
||||||
|
@cancel="showCategoryPicker = false"
|
||||||
|
@confirm="onCategoryPickerConfirm"
|
||||||
|
/>
|
||||||
|
</van-popup>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="btns">
|
||||||
|
<button class="primary" @click="onSearch">检索</button>
|
||||||
|
<button @click="onReset">重置</button>
|
||||||
|
</div>
|
||||||
|
<div class="tips">
|
||||||
|
<p>友情提示：本网站仅只提供境外法规标题参考翻译及法规原文地址。境外网站访问不稳定，访问时请耐心等待。如原文地址打不开请稍后再尝试</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onBeforeMount, onMounted, onUpdated, watch } from 'vue';
|
||||||
|
import http from '@/io/http';
|
||||||
|
import { showToast } from 'vant';
|
||||||
|
import { useRouter, useRoute } from 'vue-router';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const keywords = ref(''); // 关键字
|
||||||
|
const areas = ref([]);
|
||||||
|
const nations = ref([]);
|
||||||
|
const effectAreas = ref([]);
|
||||||
|
const area = ref({});
|
||||||
|
const nation = ref({});
|
||||||
|
const effectArea = ref({});
|
||||||
|
|
||||||
|
const showAreaPicker = ref(false);
|
||||||
|
const curAreaPickerType = ref();
|
||||||
|
const areaPickerTitle = ref();
|
||||||
|
const areaColumns = ref([]);
|
||||||
|
const selectedAreaValues = ref({});
|
||||||
|
const curSelectedAreaValue = ref();
|
||||||
|
|
||||||
|
const showCategoryPicker = ref(false);
|
||||||
|
|
||||||
|
const legalCategories = ref([]);
|
||||||
|
const curCategory = ref({});
|
||||||
|
|
||||||
|
const checkedTypeData = ref({});
|
||||||
|
const checkedCategoryType = ref([]);
|
||||||
|
|
||||||
|
onMounted(()=>{
|
||||||
|
getAreas();
|
||||||
|
getLegalCategory();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取地区枚举
|
||||||
|
const getAreas = ()=>{
|
||||||
|
let params = { parent_key: 'continent' };
|
||||||
|
http('/api/keywords', params, 'get').then(res => {
|
||||||
|
areas.value = res.data || [];
|
||||||
|
}).catch(err => {
|
||||||
|
showToast(err.message);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取法规分类
|
||||||
|
const getLegalCategory = (id) => {
|
||||||
|
let params = { parent_key: 'law_category' };
|
||||||
|
http('/api/keywords', params, 'get').then(res => {
|
||||||
|
legalCategories.value = res.data || [];
|
||||||
|
// curCategory.value = res.data[0];
|
||||||
|
}).catch(err => {
|
||||||
|
showToast(err.message);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const areaPickerTitleOptions = {
|
||||||
|
area: '请选择地区',
|
||||||
|
nation: '请选择国家',
|
||||||
|
effectArea: '请选择生效地区'
|
||||||
|
};
|
||||||
|
|
||||||
|
const onPick = (type)=>{
|
||||||
|
showAreaPicker.value = true;
|
||||||
|
curAreaPickerType.value = type;
|
||||||
|
curSelectedAreaValue.value = selectedAreaValues.value[type];
|
||||||
|
areaPickerTitle.value = areaPickerTitleOptions[type];
|
||||||
|
if(type == 'area'){
|
||||||
|
areaColumns.value = areas.value;
|
||||||
|
}else if(type == 'nation'){
|
||||||
|
areaColumns.value = nations.value;
|
||||||
|
}else if (type == 'effectArea') {
|
||||||
|
areaColumns.value = effectAreas.value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onAreaPickerConfirm = (val)=>{
|
||||||
|
showAreaPicker.value = false;
|
||||||
|
let _temp = val.selectedOptions[0];
|
||||||
|
let _typeVal = {...selectedAreaValues.value};
|
||||||
|
_typeVal[curAreaPickerType.value] = _temp.id;
|
||||||
|
selectedAreaValues.value = _typeVal;
|
||||||
|
switch (curAreaPickerType.value){
|
||||||
|
case 'area':
|
||||||
|
nations.value = _temp.children;
|
||||||
|
area.value = _temp;
|
||||||
|
break;
|
||||||
|
case 'nation':
|
||||||
|
effectAreas.value = _temp.children;
|
||||||
|
nation.value = _temp;
|
||||||
|
break;
|
||||||
|
case 'effectArea':
|
||||||
|
effectArea.value = _temp;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const onCategoryPickerConfirm = (val)=>{
|
||||||
|
showCategoryPicker.value = false;
|
||||||
|
let _temp = val.selectedOptions[0];
|
||||||
|
curCategory.value = _temp;
|
||||||
|
checkedCategoryType.value = [];
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const onSearch = ()=>{
|
||||||
|
let continent = area.value.name;
|
||||||
|
let params = {
|
||||||
|
title: keywords.value,
|
||||||
|
continent: continent, // 地区洲
|
||||||
|
country: nation.value.id,
|
||||||
|
area: effectArea.value.id,
|
||||||
|
categories: checkedCategoryType.value.join(',')
|
||||||
|
};
|
||||||
|
router.push({
|
||||||
|
path: `/business/legal/searchResult`,
|
||||||
|
query: params
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onReset = ()=>{
|
||||||
|
keywords.value = '';
|
||||||
|
area.value = '';
|
||||||
|
nation.value = '';
|
||||||
|
effectArea.value = '';
|
||||||
|
nations.value = [];
|
||||||
|
effectAreas.value = [];
|
||||||
|
curCategory.value = {};
|
||||||
|
checkedTypeData.value = {};
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.pageContainer{
|
||||||
|
padding: 40px;
|
||||||
|
color: #FFF;
|
||||||
|
.title{
|
||||||
|
font-size: 36px;
|
||||||
|
padding: 20px 0;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.formBox{
|
||||||
|
width: 100%;
|
||||||
|
.item{
|
||||||
|
padding: 8px 0;
|
||||||
|
.label{
|
||||||
|
width: 100%;
|
||||||
|
height: 66px;
|
||||||
|
line-height: 66px;
|
||||||
|
font-size: 27px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.val{
|
||||||
|
flex: 1;
|
||||||
|
line-height: 72px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.txt,
|
||||||
|
.areaInput{
|
||||||
|
flex: 1;
|
||||||
|
height: 72px;
|
||||||
|
border: 2px solid rgba($color: #414548, $alpha: 0.4);
|
||||||
|
border-radius: 4px;
|
||||||
|
background: none;
|
||||||
|
color: #FFF;
|
||||||
|
padding: 10px 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
:deep(input) {
|
||||||
|
background: none;
|
||||||
|
color: #FFF;
|
||||||
|
font-size: 27px;
|
||||||
|
line-height: 52px;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.van-cell:after){
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.legalSubTypes{
|
||||||
|
flex: 1;
|
||||||
|
margin-top: 20px;
|
||||||
|
border: 2px solid #A6A8AF;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: 28px;
|
||||||
|
color: #FFF;
|
||||||
|
li{
|
||||||
|
width: 100%;
|
||||||
|
line-height: 36px;
|
||||||
|
padding: 15px 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.van-checkbox__label){
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
:deep(.van-checkbox){
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
:deep(.van-checkbox__icon--checked ~ span){
|
||||||
|
color: #3662FE;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btns{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 50px 0;
|
||||||
|
button{
|
||||||
|
width: 200px;
|
||||||
|
height: 72px;
|
||||||
|
background: #414548;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 26px;
|
||||||
|
color: #FFF;
|
||||||
|
line-height: 72px;
|
||||||
|
text-align: center;
|
||||||
|
&.primary{
|
||||||
|
background: #3662FE;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tips{
|
||||||
|
width: 100%;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 36px;
|
||||||
|
color: #A6A8AF;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,239 @@
|
||||||
|
<template>
|
||||||
|
<div class="pageContainer">
|
||||||
|
<div class="title">境外法规检索</div>
|
||||||
|
<div class="formBox">
|
||||||
|
<div class="item">
|
||||||
|
<div class="label">关键字</div>
|
||||||
|
<div class="val">
|
||||||
|
<van-field :clearable="true" :center="true" class="txt" v-model="keywords"
|
||||||
|
placeholder="请输入关键字"></van-field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="label">地区</div>
|
||||||
|
<div class="val">
|
||||||
|
<van-field class="areaInput" v-model="area.name" is-link readonly placeholder="地区"
|
||||||
|
@click="onPick('area')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="label">国家</div>
|
||||||
|
<div class="val">
|
||||||
|
<van-field class="areaInput" v-model="nation.name" is-link readonly placeholder="国家"
|
||||||
|
@click="onPick('nation')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="label">生效区域</div>
|
||||||
|
<div class="val">
|
||||||
|
<van-field class="areaInput" v-model="effectArea.name" is-link readonly placeholder="生效区域"
|
||||||
|
@click="onPick('effectArea')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<van-popup v-model:show="showAreaPicker" round position="bottom">
|
||||||
|
<van-picker v-model="curSelectedAreaValue" :title="areaPickerTitle" :columns="areaColumns"
|
||||||
|
:columns-field-names="{ text: 'name', value: 'id', children: null }" @cancel="showAreaPicker = false"
|
||||||
|
@confirm="onAreaPickerConfirm" />
|
||||||
|
</van-popup>
|
||||||
|
</div>
|
||||||
|
<div class="btns">
|
||||||
|
<button class="primary" @click="onSearch">检索</button>
|
||||||
|
<button @click="onReset">重置</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onBeforeMount, onMounted, onUpdated, watch } from 'vue';
|
||||||
|
import http from '@/io/http';
|
||||||
|
import { showToast } from 'vant';
|
||||||
|
import { useRouter, useRoute } from 'vue-router';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
onClose: Function
|
||||||
|
});
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const keywords = ref(''); // 关键字
|
||||||
|
const areas = ref([]);
|
||||||
|
const nations = ref([]);
|
||||||
|
const effectAreas = ref([]);
|
||||||
|
const area = ref({});
|
||||||
|
const nation = ref({});
|
||||||
|
const effectArea = ref({});
|
||||||
|
|
||||||
|
const showAreaPicker = ref(false);
|
||||||
|
const curAreaPickerType = ref();
|
||||||
|
const areaPickerTitle = ref();
|
||||||
|
const areaColumns = ref([]);
|
||||||
|
const selectedAreaValues = ref({});
|
||||||
|
const curSelectedAreaValue = ref();
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getAreas();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取地区枚举
|
||||||
|
const getAreas = () => {
|
||||||
|
let params = { parent_key: 'continent' };
|
||||||
|
http('/api/keywords', params, 'get').then(res => {
|
||||||
|
areas.value = res.data || [];
|
||||||
|
}).catch(err => {
|
||||||
|
showToast(err.message);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const areaPickerTitleOptions = {
|
||||||
|
area: '请选择地区',
|
||||||
|
nation: '请选择国家',
|
||||||
|
effectArea: '请选择生效地区'
|
||||||
|
};
|
||||||
|
|
||||||
|
const onPick = (type) => {
|
||||||
|
showAreaPicker.value = true;
|
||||||
|
curAreaPickerType.value = type;
|
||||||
|
curSelectedAreaValue.value = selectedAreaValues.value[type];
|
||||||
|
areaPickerTitle.value = areaPickerTitleOptions[type];
|
||||||
|
if (type == 'area') {
|
||||||
|
areaColumns.value = areas.value;
|
||||||
|
} else if (type == 'nation') {
|
||||||
|
areaColumns.value = nations.value;
|
||||||
|
} else if (type == 'effectArea') {
|
||||||
|
areaColumns.value = effectAreas.value;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onAreaPickerConfirm = (val) => {
|
||||||
|
showAreaPicker.value = false;
|
||||||
|
let _temp = val.selectedOptions[0];
|
||||||
|
let _typeVal = { ...selectedAreaValues.value };
|
||||||
|
_typeVal[curAreaPickerType.value] = _temp.id;
|
||||||
|
selectedAreaValues.value = _typeVal;
|
||||||
|
switch (curAreaPickerType.value) {
|
||||||
|
case 'area':
|
||||||
|
nations.value = _temp.children;
|
||||||
|
area.value = _temp;
|
||||||
|
break;
|
||||||
|
case 'nation':
|
||||||
|
effectAreas.value = _temp.children;
|
||||||
|
nation.value = _temp;
|
||||||
|
break;
|
||||||
|
case 'effectArea':
|
||||||
|
effectArea.value = _temp;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSearch = () => {
|
||||||
|
let continent = area.value.name;
|
||||||
|
let params = {
|
||||||
|
title: keywords.value,
|
||||||
|
continent: continent, // 地区洲
|
||||||
|
country: nation.value.id,
|
||||||
|
area: effectArea.value.id,
|
||||||
|
};
|
||||||
|
props.onClose && props.onClose();
|
||||||
|
router.push({
|
||||||
|
path: `/business/legal/searchResult`,
|
||||||
|
query: params
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onReset = () => {
|
||||||
|
keywords.value = '';
|
||||||
|
area.value = '';
|
||||||
|
nation.value = '';
|
||||||
|
effectArea.value = '';
|
||||||
|
nations.value = [];
|
||||||
|
effectAreas.value = [];
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.pageContainer {
|
||||||
|
color: #FFF;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 36px;
|
||||||
|
padding: 20px 0;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formBox {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
padding: 8px 0;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
width: 100%;
|
||||||
|
height: 66px;
|
||||||
|
line-height: 66px;
|
||||||
|
font-size: 27px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.val {
|
||||||
|
flex: 1;
|
||||||
|
line-height: 72px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.txt,
|
||||||
|
.areaInput {
|
||||||
|
flex: 1;
|
||||||
|
height: 72px;
|
||||||
|
border: 2px solid rgba($color: #414548, $alpha: 0.4);
|
||||||
|
border-radius: 4px;
|
||||||
|
background: none;
|
||||||
|
color: #FFF;
|
||||||
|
padding: 10px 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
:deep(input) {
|
||||||
|
background: none;
|
||||||
|
color: #FFF;
|
||||||
|
font-size: 27px;
|
||||||
|
line-height: 52px;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-cell:after) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btns {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 50px 0;
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 200px;
|
||||||
|
height: 72px;
|
||||||
|
background: #414548;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 26px;
|
||||||
|
color: #FFF;
|
||||||
|
line-height: 72px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&.primary {
|
||||||
|
background: #3662FE;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,417 @@
|
||||||
|
<template>
|
||||||
|
<div class="pageContainer">
|
||||||
|
<div class="breadNav">
|
||||||
|
<router-link to="/">首页</router-link><span>></span>
|
||||||
|
<router-link to="/business">AI商情</router-link><span>></span>
|
||||||
|
<router-link to="/business/legal">法律法规</router-link><span>></span>
|
||||||
|
<router-link to="/business/legal/search">境外法规检索</router-link>
|
||||||
|
</div>
|
||||||
|
<div class="main">
|
||||||
|
<div class="results" v-if="Array.isArray(result.data)">
|
||||||
|
<h1>检索结果</h1>
|
||||||
|
<ul v-if="result.data.length > 0">
|
||||||
|
<li :key="index+item.title1" v-for="item,index in result.data">
|
||||||
|
<div class="area">{{item.continent }}/{{ item.country }}/{{ item.area }}</div>
|
||||||
|
<p><a :href="item.url" target="_blank" rel="noopener noreferrer"><strong>{{item.title1}}</strong></a></p>
|
||||||
|
<p><a :href="item.url" target="_blank" rel="noopener noreferrer">{{item.title2}}</a></p>
|
||||||
|
<div class="category">分类：
|
||||||
|
<span :key="category" v-for="category in item.categories">{{category}}</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="plageholder" v-else>暂无数据</div>
|
||||||
|
<div class="pagesBox">
|
||||||
|
<div class="pageInfo">
|
||||||
|
<span>共{{result.total}}条</span>
|
||||||
|
<span>每页显示<strong>{{pageSize}}</strong>条</span>
|
||||||
|
<span>共{{result.last_page }}页</span>
|
||||||
|
</div>
|
||||||
|
<div class="pageAction">
|
||||||
|
<a href="javascript:;" @click="goFirstPage">首页</a>
|
||||||
|
<a href="javascript:;" @click="goPrePage" v-if="pageNum > 1">上一页</a>
|
||||||
|
<a href="javascript:;" @click="goNextPage" v-if="pageNum < result.last_page">下一页</a>
|
||||||
|
<a href="javascript:;" @click="goLastPage">尾页</a>
|
||||||
|
<div class="pageForm">
|
||||||
|
第 <van-field type="digit" class="txt" v-model="inputPage" /> 页
|
||||||
|
<van-button type="primary" class="btn" @click="goInputPage">GO</van-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="plageholder" v-else>数据加载中。。。</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footerTips">
|
||||||
|
<p>友情提示：本网站仅只提供境外法规标题参考翻译及法规原文地址。境外网站访问不稳定，访问时请耐心等待。如原文地址打不开请稍后再尝试</p>
|
||||||
|
</div>
|
||||||
|
<div class="searchBar" @click="showSearchForm = true;"><van-icon name="search" /></div>
|
||||||
|
<div class="searchFormBox" v-if="showSearchForm">
|
||||||
|
<div class="closeBtn" @click="showSearchForm = false"><i class="icon-quxiao"></i></div>
|
||||||
|
<SearchFormModal :onClose="onSearchFormClose" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onBeforeMount, onMounted, onUpdated, watch } from 'vue';
|
||||||
|
import http from '@/io/http';
|
||||||
|
import { showToast } from 'vant';
|
||||||
|
import { useRouter, useRoute } from 'vue-router';
|
||||||
|
import SearchFormModal from './searchFormModal.vue';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
|
||||||
|
const pageSize = ref(15);
|
||||||
|
const pageNum = ref(1);
|
||||||
|
const result = ref({});
|
||||||
|
|
||||||
|
const inputPage = ref(1);
|
||||||
|
|
||||||
|
const showSearchForm = ref(false);
|
||||||
|
|
||||||
|
watch(pageNum, (newPage, oldPage)=>{
|
||||||
|
if(newPage !== oldPage){
|
||||||
|
inputPage.value = newPage;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(route, ()=>{
|
||||||
|
getResult();
|
||||||
|
});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getResult();
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSearchFormClose = ()=>{
|
||||||
|
showSearchForm.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getResult = ()=>{
|
||||||
|
let params = {
|
||||||
|
...route.query,
|
||||||
|
per_page: pageSize.value,
|
||||||
|
page: pageNum.value
|
||||||
|
};
|
||||||
|
http('/api/law', params, 'get').then(res => {
|
||||||
|
result.value = res.data;
|
||||||
|
}).catch(err => {
|
||||||
|
message.error(err.message);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 首页
|
||||||
|
const goFirstPage = ()=>{
|
||||||
|
pageNum.value = 1;
|
||||||
|
getResult();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 上一页
|
||||||
|
const goPrePage = ()=>{
|
||||||
|
let _num = pageNum.value;
|
||||||
|
|
||||||
|
pageNum.value = _num <= 1 ? 1 : _num - 1;
|
||||||
|
getResult();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 下一页
|
||||||
|
const goNextPage = ()=>{
|
||||||
|
let _num = pageNum.value;
|
||||||
|
|
||||||
|
pageNum.value = _num >= result.value.last_page ? result.value.last_page : _num + 1;
|
||||||
|
getResult();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 尾页
|
||||||
|
const goLastPage = ()=>{
|
||||||
|
pageNum.value = result.value.last_page;
|
||||||
|
getResult();
|
||||||
|
};
|
||||||
|
|
||||||
|
const goInputPage = ()=>{
|
||||||
|
pageNum.value = inputPage.value;
|
||||||
|
getResult();
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.pageContainer{
|
||||||
|
color: #FFF;
|
||||||
|
padding: 25px;
|
||||||
|
:deep(.van-cell:after){
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.breadNav{
|
||||||
|
padding-bottom: 20px;
|
||||||
|
line-height: 30px;
|
||||||
|
color: #999;
|
||||||
|
font-size: 22px;
|
||||||
|
span{
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
color: #999;
|
||||||
|
&:hover{
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchForm{
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px 30px;
|
||||||
|
background: #161718;
|
||||||
|
border: 2px solid #414548;
|
||||||
|
border-radius: 3px;
|
||||||
|
.title{
|
||||||
|
font-size: 23px;
|
||||||
|
line-height: 30px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.item{
|
||||||
|
padding: 8px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
line-height: 32px;
|
||||||
|
.label{
|
||||||
|
width: 80px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.val{
|
||||||
|
flex: 1;
|
||||||
|
line-height: 32px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.txt,
|
||||||
|
.areaInput{
|
||||||
|
flex: 1;
|
||||||
|
border: 2px solid #A6A8AF;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: none;
|
||||||
|
color: #FFF;
|
||||||
|
&::placeholder{
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
:deep(input){
|
||||||
|
background: none;
|
||||||
|
color: #FFF;
|
||||||
|
&::placeholder{
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.ant-input-clear-icon){
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
:deep(.ant-select-selector){
|
||||||
|
color: #999;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
:deep(.ant-select-selection-item){
|
||||||
|
border: none;
|
||||||
|
line-height: 51px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.ant-select-arrow){
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btns{
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
button{
|
||||||
|
margin-right: 20px;
|
||||||
|
width: 86px;
|
||||||
|
height: 30px;
|
||||||
|
background: #414548;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: #FFF;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
&.primary{
|
||||||
|
background: #3662FE;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.plageholder{
|
||||||
|
width: 100%;
|
||||||
|
height: 50vh;
|
||||||
|
font-size: 28px;
|
||||||
|
color: #ccc;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.results{
|
||||||
|
width: 100%;
|
||||||
|
min-height: 70vh;
|
||||||
|
h1{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 36px;
|
||||||
|
text-align: center;
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
ul{
|
||||||
|
width: 100%;
|
||||||
|
li{
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px 0;
|
||||||
|
border-bottom: 1px solid #666;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
.area{
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 32px;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
line-height: 32px;
|
||||||
|
font-size: 28px;
|
||||||
|
padding: 10px 0;
|
||||||
|
a{
|
||||||
|
color: #FFF;
|
||||||
|
&:hover{
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
strong{
|
||||||
|
color: #3662FE;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.category{
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 30px;
|
||||||
|
margin-top: 30px;
|
||||||
|
span{
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pagesBox{
|
||||||
|
width: 100%;
|
||||||
|
font-size: 22px;
|
||||||
|
.pageInfo{
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 0;
|
||||||
|
color: #ccc;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.pageAction{
|
||||||
|
width: 100%;
|
||||||
|
height: 70px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.pageForm{
|
||||||
|
display: flex;
|
||||||
|
height: 70px;
|
||||||
|
align-items: center;
|
||||||
|
.txt{
|
||||||
|
width: 80px;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 46px;
|
||||||
|
text-align: center;
|
||||||
|
border: 2px solid #A6A8AF;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: none;
|
||||||
|
color: #FFF;
|
||||||
|
margin: 0 5px;
|
||||||
|
padding: 0;
|
||||||
|
:deep(input){
|
||||||
|
background: none;
|
||||||
|
color: #FFF;
|
||||||
|
text-align: center;
|
||||||
|
&::placeholder{
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
margin-left: 10px;
|
||||||
|
width: 80px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footerTips{
|
||||||
|
width: 100%;
|
||||||
|
padding: 50px 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
p{
|
||||||
|
font-size: 22px;
|
||||||
|
color: #999;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.searchBar{
|
||||||
|
width: 94px;
|
||||||
|
height: 94px;
|
||||||
|
background: #3662FE;
|
||||||
|
box-shadow: 0px 12px 26px 0px rgba(32,69,201,0.86);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: fixed;
|
||||||
|
top: 150px;
|
||||||
|
right: 10px;
|
||||||
|
z-index: 3;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.searchFormBox{
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 90px);
|
||||||
|
margin-top: 90px;
|
||||||
|
padding: 40px;
|
||||||
|
background: #161718;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 5;
|
||||||
|
.closeBtn{
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 10px;
|
||||||
|
color: #FFF;
|
||||||
|
font-size: 38px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue