no message
parent
472e0fc47b
commit
dd6f75f3c4
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,92 @@
|
||||
@extends('layout.layout')
|
||||
@section('content')
|
||||
<div class="combo_list_nav_wrapper">
|
||||
<div class="combo_list_nav_item_wrapper combo_list_nav_item_active_wrapper">体检套餐</div>
|
||||
<a href="">
|
||||
<div class="combo_list_nav_item_wrapper">体检机构</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="combo_list_search_wrapper">
|
||||
@foreach($search_arr as $search_list)
|
||||
<div class="combo_list_search_line_wrapper">
|
||||
<div class="combo_list_search_line_title_wrapper">{{ $search_list['label'] }}</div>
|
||||
<div class="combo_list_search_line_content_wrapper">
|
||||
@foreach($search_list['options'] as $search_item)
|
||||
<div @click="pageJump('{{ $search_list['value'] }}','{{ $search_item['value'] }}')" class="combo_list_search_line_content_item_wrapper
|
||||
@if($search_item['value'] == $search_choose[$search_list['value']]) combo_list_search_line_content_active_wrapper @endif
|
||||
">{{ $search_item['label'] }}</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="combo_list_order_wrapper">
|
||||
<div class="combo_list_order_line_wrapper">
|
||||
<div class="combo_list_order_line_title_wrapper">排序方式</div>
|
||||
<div class="combo_list_order_line_content_wrapper">
|
||||
<div @click="pageJump('order','zh')" class="combo_list_order_line_content_item_wrapper
|
||||
@if('zh' == $search_choose['order']) combo_list_order_line_content_active_wrapper @endif
|
||||
">综合排序
|
||||
</div>
|
||||
<div @click="pageJump('order','zk')" class="combo_list_order_line_content_item_wrapper
|
||||
@if('zk' == $search_choose['order']) combo_list_order_line_content_active_wrapper @endif
|
||||
">折扣最多
|
||||
</div>
|
||||
</div>
|
||||
<div class="combo_list_count_wrapper">共有<span
|
||||
class="combo_list_count_number_wrapper">{{ $combo_count }}</span>个符合条件的套餐
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="combo_wrapper">
|
||||
<div class="combo_list_wrapper">
|
||||
@foreach($combos['data'] as $combo)
|
||||
<a href="/combo?id={{ $combo->id }}" class="combo_item_wrapper">
|
||||
<div class="combo_cover_wrapper">
|
||||
@if($combo->cover != '')
|
||||
<img src="{{ $combo->cover }}" alt="">
|
||||
@else
|
||||
<div>暂无封面图</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="combo_name_wrapper">{{ $combo->name }}</div>
|
||||
<div class="combo_tags_wrapper">
|
||||
@foreach($combo->tags_arr as $tag)
|
||||
<div class="combo_tag_wrapper">{{ $tag }}</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="combo_price_wrapper">
|
||||
<span>¥ {{ $combo->price }}</span>
|
||||
@if($combo->price < $combo->original_price)
|
||||
<span class="combo_original_price_wrapper">{{ $combo->original_price }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(count($combos['data']) > 0)
|
||||
<div class="page_wrapper">
|
||||
@foreach($combos['links'] as $key => $item)
|
||||
<a @if (!!$item['url'])
|
||||
href="{{ $item['url'] }}"
|
||||
@endif>
|
||||
<div class="page_item_wrapper @if(!!$item['active'])
|
||||
page_item_active_wrapper
|
||||
@endif">
|
||||
@if($key == 0)
|
||||
上一页
|
||||
@elseif($key == count($combos['links']) - 1)
|
||||
下一页
|
||||
@else
|
||||
{{ $item['label'] }}
|
||||
@endif
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
<div class="no_data_wrapper">未搜索到符合条件的套餐</div>
|
||||
@endif
|
||||
@endsection
|
||||
@ -0,0 +1,206 @@
|
||||
.combo_list_search_wrapper,
|
||||
.combo_list_order_wrapper {
|
||||
width: 1200px;
|
||||
margin: 20px auto 0;
|
||||
border: 1px solid #cccccc;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.combo_list_order_line_wrapper,
|
||||
.combo_list_search_line_wrapper {
|
||||
display: flex;
|
||||
line-height: 60px;
|
||||
border-bottom: 1px dashed #cccccc;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.combo_list_order_line_wrapper {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.combo_list_count_number_wrapper {
|
||||
color: var(--style-color-1);
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.combo_list_order_line_title_wrapper,
|
||||
.combo_list_search_line_title_wrapper {
|
||||
width: 80px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #aaaaaa;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.combo_list_order_line_content_wrapper,
|
||||
.combo_list_search_line_content_wrapper {
|
||||
display: flex;
|
||||
margin-left: 20px;
|
||||
width: calc(100% - 120px - 40px);
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.combo_list_count_wrapper {
|
||||
text-align: right;
|
||||
width: 420px;
|
||||
}
|
||||
|
||||
.combo_list_order_line_content_wrapper {
|
||||
width: calc(100% - 120px - 40px - 400px);
|
||||
}
|
||||
|
||||
.combo_list_order_line_content_item_wrapper,
|
||||
.combo_list_search_line_content_item_wrapper {
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.combo_list_order_line_content_active_wrapper,
|
||||
.combo_list_search_line_content_active_wrapper {
|
||||
background: var(--style-color-1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.combo_list_nav_wrapper {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
border-bottom: 5px solid var(--style-color-1);
|
||||
width: 1200px;
|
||||
margin: 20px auto 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.combo_list_nav_item_wrapper {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
width: 140px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.combo_list_nav_item_active_wrapper {
|
||||
background: var(--style-color-1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.combo_price_wrapper {
|
||||
font-size: 24px;
|
||||
color: var(--style-color-2);
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.combo_original_price_wrapper {
|
||||
font-size: 18px;
|
||||
margin-left: 10px;
|
||||
color: var(--style-color-4);
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.combo_tag_wrapper {
|
||||
padding: 5px 10px;
|
||||
background: #eaeaea;
|
||||
border-radius: 6px;
|
||||
color: #676767;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.combo_tags_wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.combo_name_wrapper {
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.combo_cover_wrapper {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: #cccccc;
|
||||
line-height: 200px;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.combo_cover_wrapper img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.combo_item_wrapper {
|
||||
width: 25%;
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.combo_list_wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.combo_wrapper {
|
||||
width: 1200px;
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
|
||||
.page_wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.page_item_wrapper {
|
||||
margin: 5px;
|
||||
padding: 0 10px;
|
||||
height: 30px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E5E7EC;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #B5B5C4;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.page_item_wrapper:hover {
|
||||
background: #FAFAFA;
|
||||
border: 1px solid #E5E7EC;
|
||||
font-size: 16px;
|
||||
color: var(--style-color-1);
|
||||
}
|
||||
|
||||
.page_item_active_wrapper {
|
||||
background: #FAFAFA;
|
||||
border: 1px solid #E5E7EC;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: var(--style-color-1);
|
||||
}
|
||||
|
||||
.no_data_wrapper {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
line-height: 300px;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
height: 300px;
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
// SCRIPT
|
||||
const pageJump = (key, value) => {
|
||||
let search_data = {
|
||||
...page_options.value,
|
||||
}
|
||||
search_data[key] = value
|
||||
if (key !== 'page') {
|
||||
search_data.page = 1
|
||||
}
|
||||
let url = `/combo_list?`
|
||||
for (let i in search_data) {
|
||||
if (search_data[i]) {
|
||||
url += `${i}=${search_data[i]}&`
|
||||
}
|
||||
}
|
||||
window.location.href = url
|
||||
}
|
||||
// SCRIPT END
|
||||
// MOUNTED
|
||||
|
||||
// MOUNTED END
|
||||
// RETURN
|
||||
const ret_ = {
|
||||
pageJump,
|
||||
}
|
||||
// RETURN END
|
||||
// OPTIONS
|
||||
const opt = (g) => {
|
||||
return {
|
||||
type: 'type' in g ? g.type : '',
|
||||
combo_type: 'combo_type' in g ? g.combo_type : '',
|
||||
price: 'price' in g ? g.price : '',
|
||||
sex: 'sex' in g ? g.sex : '',
|
||||
order: 'order' in g ? g.order : 'zh',
|
||||
search: 'search' in g ? g.search : '',
|
||||
page: 'page' in g ? Number(g.page) : 1,
|
||||
}
|
||||
}
|
||||
// OPTIONS END
|
||||
@ -1,3 +1,16 @@
|
||||
<div class="footer_wrapper">
|
||||
Footer
|
||||
<div class="footer_web_wrapper">
|
||||
<div class="footer_web_logo_wrapper">
|
||||
<div class="footer_web_logo_icon_wrapper">体检平台</div>
|
||||
<div class="footer_web_logo_text_wrapper">
|
||||
一个方便快捷认真负责。提供全国公立医院及体检机构的个人/团体体检预约，体检报告查询，体检报告解读。以及其他企业健康福利预约服务。
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer_web_icon_wrapper">
|
||||
<img src="./assets/images/footer-icon.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer_beian_wrapper">
|
||||
copyright © 2018-2024 易捷健康体检平台 版权所有
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,87 +1,112 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link type="image/x-icon" rel="shortcut icon" href="./favicon.png"/>
|
||||
<link rel="stylesheet" href="./assets/import/element-plus.css"/>
|
||||
<link rel="stylesheet" href="./assets/css/layout.css"/>
|
||||
<link href="./assets/import/tailwind.min.css" rel="stylesheet">
|
||||
<script src="./assets/import/vue.js"></script>
|
||||
<script src="./assets/import/element-plus.js"></script>
|
||||
<script src="./assets/import/qrcode.min.js"></script>
|
||||
<title>体检平台</title>
|
||||
<link rel="stylesheet" href="./assets/icon/style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
{!! include_content('style') !!}
|
||||
</style>
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link type="image/x-icon" rel="shortcut icon" href="./favicon.png"/>
|
||||
<link rel="stylesheet" href="./assets/import/element-plus.css"/>
|
||||
<link rel="stylesheet" href="./assets/css/layout.css"/>
|
||||
<link href="./assets/import/tailwind.min.css" rel="stylesheet">
|
||||
<script src="./assets/import/vue.js"></script>
|
||||
<script src="./assets/import/element-plus.js"></script>
|
||||
<script src="./assets/import/qrcode.min.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=mJh1fI35HIuC959obt0blESEQdopSzpn"></script>
|
||||
<title>体检平台</title>
|
||||
<link rel="stylesheet" href="./assets/icon/style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
{!! include_content('style') !!}
|
||||
</style>
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" v-cloak>
|
||||
<el-config-provider :button="button_config">
|
||||
<el-watermark :content="['', '']">
|
||||
<div>
|
||||
@include('components.header')
|
||||
</div>
|
||||
<div>
|
||||
@yield('content')
|
||||
</div>
|
||||
<div>
|
||||
@include('components.footer')
|
||||
</div>
|
||||
</el-watermark>
|
||||
</el-config-provider>
|
||||
<el-config-provider :button="button_config">
|
||||
<el-watermark :content="['', '']">
|
||||
<div>
|
||||
@include('components.header')
|
||||
</div>
|
||||
<div>
|
||||
@yield('content')
|
||||
</div>
|
||||
<div>
|
||||
@include('components.footer')
|
||||
</div>
|
||||
</el-watermark>
|
||||
</el-config-provider>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
const {createApp, onMounted, ref, nextTick, computed} = Vue
|
||||
const {ElLoading, ElMessage, ElMessageBox} = ElementPlus
|
||||
const {createApp, onMounted, ref, nextTick, computed} = Vue
|
||||
const {ElLoading, ElMessage, ElMessageBox} = ElementPlus
|
||||
</script>
|
||||
<script src="./assets/mounting.js"></script>
|
||||
<script>
|
||||
const App = {
|
||||
setup() {
|
||||
const button_config = {
|
||||
autoInsertSpace: true,
|
||||
}
|
||||
const App = {
|
||||
setup() {
|
||||
const button_config = {
|
||||
autoInsertSpace: true,
|
||||
}
|
||||
|
||||
const onMountedAction = () => {
|
||||
{!! include_content('mounted') !!}
|
||||
}
|
||||
{!! include_content('script') !!}
|
||||
const onMountedAction = () => {
|
||||
{!! include_content('mounted') !!}
|
||||
}
|
||||
{!! include_content('script') !!}
|
||||
|
||||
const pageOptions = (g) => {
|
||||
{!! include_content('options') !!}
|
||||
}
|
||||
const
|
||||
pageOptions = (g) => {
|
||||
{!! include_content('options') !!}
|
||||
}
|
||||
|
||||
const page_options = ref(pageOptions(@json($_GET)))
|
||||
const search_input = ref('')
|
||||
const page_options = ref(pageOptions(@json($_GET)))
|
||||
const search_input = ref('')
|
||||
|
||||
onMounted(() => {
|
||||
if (!!page_options.value && !!page_options.value.search) {
|
||||
search_input.value = page_options.value.search
|
||||
}
|
||||
onMountedAction()
|
||||
})
|
||||
const searchTagClick = (tag) => {
|
||||
search_input.value = tag
|
||||
searchButtonClick()
|
||||
}
|
||||
|
||||
return {
|
||||
search_input,
|
||||
button_config,
|
||||
page_options,
|
||||
{!! include_content('return') !!}
|
||||
}
|
||||
const searchButtonClick = () => {
|
||||
let search_data = {
|
||||
...page_options.value,
|
||||
page: 1,
|
||||
search: search_input.value,
|
||||
}
|
||||
let url = `/combo_list?`
|
||||
for (let i in search_data) {
|
||||
if (search_data[i]) {
|
||||
url += `${i}=${search_data[i]}&`
|
||||
}
|
||||
}
|
||||
window.location.href = url
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!!page_options.value && !!page_options.value.search) {
|
||||
search_input.value = page_options.value.search
|
||||
}
|
||||
onMountedAction()
|
||||
})
|
||||
|
||||
return {
|
||||
searchButtonClick,
|
||||
searchTagClick,
|
||||
search_input,
|
||||
button_config,
|
||||
page_options,
|
||||
{!! include_content('return') !!}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const app = createApp(App)
|
||||
app.use(ElementPlus)
|
||||
app.mount('#app')
|
||||
const app = createApp(App)
|
||||
app.use(ElementPlus)
|
||||
app.mount('#app')
|
||||
</script>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue