315 lines
9.5 KiB
Vue
315 lines
9.5 KiB
Vue
<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> |