File: /var/www/dk/wp-content/themes/food/food-app/page-competition_search.php
<?php
/* Template Name: competition_search */
get_header('competition');
//get_header('food');
//get_header('MedicalMediaChannel');
//get_header('BizRoadShow');
$args = array(
'taxonomy' => 'product_cat',
'hide_empty' => 0
);
$productCat = array();
//$productTabs = get_terms('product_cat', $args);
//$term_taxonomy_id = 39;
//foreach ($productTabs as $key => $value) {
//// if ($value->name != 'Uncategorized' && $value->name != '未分類') {
//// array_push($productCat, $value->name);
//// }
//
// if ($value->name == 'Medical Media Channel') {
//// array_push($productCat, $value->name);
// $term_taxonomy_id = $value->term_taxonomy_id;
// }
//
// if ($value->parent == $term_taxonomy_id) {
// array_push($productCat, $value->name);
// }
//
//}
$initCate = empty($_GET['cat']) ? '' : '"' . htmlspecialchars($_GET['cat']) . '"'; // '"電子產品專區"';
$vueVersion = time();
$user = wp_get_current_user();
$user_id = $user->ID;
//print_r($user);
$username = '';
if ($user_id == 0) {
// $username = $user->data->display_name;
if (isset($user->data->user_nicename)) {
$username = $user->data->user_nicename;
}
}
//echo '$username -> '.$username;
?>
<style>
.search-list {
background-color: white;
}
/*#topBanner {*/
/* width: 100%;*/
/* height: 400px;*/
/* background: linear-gradient(315deg, #00839B 0%, #1ABFBA 100%);*/
/* opacity: 1;*/
/*}*/
.list_item {
/*width: 500px;*/
/*height: 740px;*/
background: rgba(255, 255, 255, 0.39);
box-shadow: 0 0 20px rgba(0, 155, 150, 0.2);
opacity: 1;
}
/*banner横幅start*/
.banner{
width: 100%;
height: 400px;
background: url(<?php showFoodAppPath('/ranking/images/banner_bg_mobile.webp') ?>) no-repeat right center,linear-gradient(315deg, #00839B 0%, #1ABFBA 100%);
padding: 20px;
/*//#1b9ffc;*/
}
@media screen and (min-width:1280px ) {
.banner{
width: 100%;
height: 400px;
background: url(<?php showFoodAppPath('/ranking/images/banner_bg.webp') ?>) no-repeat right center,linear-gradient(315deg, #00839B 0%, #1ABFBA 100%);
padding: 20px;
}
}
.banner .banner_content{
height: 100%;
width: 1400px;
margin: 0 auto;
position: relative;
float: left;
}
.banner .banner_content .banner_title{
color:white;
float: left;
text-indent: 6px;
width: 300px;
height: 20px;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 500;
}
.banner .banner_content .banner_text{
color: white;
/*float: left;*/
width: 130px;
text-indent: 6px;
margin-top: 35px;
background: rgba(255,255,255,0.39);
font-size: 18px;
/*font-family: Source Han Sans CN;*/
font-weight: 400;
}
.banner .banner_content .banner_bottom_title{
font-size:18px;
line-height: 18px;
height: 18px;
color: white;
float: left;
width: 100%;
font-weight: 500;
text-indent: 6px;
margin-top: 30px;
}
.banner .banner_content .banner_bottom_text{
font-size:16px;
color: white;
line-height: 24px;
width: 245px;
float: left;
margin-left: 6px;
margin-top: 10px;
}
@media screen and (min-width:640px ) {
.banner .banner_content .banner_bottom_text{
font-size:16px;
color: white;
line-height: 24px;
width: 445px;
float: left;
margin-left: 6px;
margin-top: 10px;
}
}
@media screen and (min-width:1280px ) {
.banner .banner_content .banner_bottom_text{
font-size:16px;
color: white;
line-height: 32px;
width: 745px;
float: left;
margin-left: 6px;
margin-top: 10px;
}
.banner .banner_content .banner_title{
color:white;
float: left;
text-indent: 6px;
width: 500px;
height: 36px;
font-size: 36px;
font-family: Source Han Sans CN;
font-weight: 500;
}
.banner .banner_content .banner_text{
color: white;
/*float: left;*/
width: 120px;
text-indent: 6px;
margin-top: 70px;
background: rgba(255,255,255,0.39);
font-size: 18px;
/*font-family: Source Han Sans CN;*/
font-weight: 400;
}
.banner .banner_content .banner_btn_outNode{
width: 100%;
float: left;
height: 70px;
margin-top: 35px;
margin-left: 4px;
}
.banner .banner_content .banner_btn_outNode .banner_btn{
/*width: 213px;*/
height: 100%;
float: left;
/*border-radius: 107px;*/
/*background: url(img/btn_bg.png) repeat-y;*/
font-size: 23px;
line-height: 70px;
text-align: center;
cursor: pointer;
margin-right: 27px;
width: 180px;
color: #009B96;
background: rgba(255,255,255,1);
box-shadow: 0 10px 10px rgba(255,255,255,0.2);
opacity: 1;
border-radius: 20px;
}
.banner .banner_content .banner_btn_outNode .banner_btn img{
float: right;margin-top: 23px;margin-right: 10px;
}
}
.banner .banner_content .banner_btn_outNode{
width: 100%;
float: left;
height: 35px;
margin-top: 20px;
margin-left: 4px;
}
.banner .banner_content .banner_btn_outNode .banner_btn{
/*width: 213px;*/
height: 100%;
float: left;
/*border-radius: 107px;*/
/*background: url(img/btn_bg.png) repeat-y;*/
font-size: 23px;
line-height: 35px;
text-align: center;
cursor: pointer;
margin-right: 27px;
width: 180px;
color: #009B96;
background: rgba(255,255,255,1);
box-shadow: 0 10px 10px rgba(255,255,255,0.2);
opacity: 1;
border-radius: 20px;
}
.banner .banner_content .banner_btn_outNode .banner_btn img{
float: right;margin-top: 6px;margin-right: 10px
}
.banner .banner_content .banner_btn_outNode .btn_one{
margin-left: 4px;
}
.banner .banner_content .banner_lists{
width: 100%;
float: left;
height:27px;
margin-top: 69px;
text-indent: -1px;
}
.banner .banner_content .banner_lists li{
float: left;
height: 20px;
line-height: 20px;
font-size: 20px;
color: white;
margin-right: 43px;
cursor: pointer;
position: relative;
top: 4px;
}
.banner .banner_content .banner_lists .active{
font-size: 27px;
line-height: 27px;
color: #fdc235;
height: 27px;
top: 0;
}
.banner .banner_content .banner_position{
width: 80px;
height: 10px;
position: absolute;
left: 50%;
bottom: 29px;
margin-left: -40px;
}
.banner .banner_content .banner_position li{
width: 10px;
height: 10px;
float: left;
background: #f0f0f0;
border-radius: 50%;
margin-right: 13px;
cursor: pointer;
}
/*banner横幅end*/
.empty_item {
box-sizing: border-box;
box-shadow: 0 0 20px rgba(0, 155, 150, 0.2);
/*width: calc(100% - 40px);*/
margin-left: 20px;
/*margin-top: 20px;*/
margin-right: 20px;
padding-left: 30px;
padding-right: 30px;
}
</style>
<app id="app">
<yq-header :search_text="submit_info.search_text" @search="hdSearch"></yq-header>
<main class=" pb-[0.2rem] md:w-[768px] md:mx-auto xl:w-[1280px]" style="background: white">
<!-- <div id="topBanner" class="container mx-auto"></div>-->
<!-- 輪播 -->
<!-- <div v-if="a_banner.length > 0" class=" relative w-100 px-[0.3rem] mb-[0.2rem]">-->
<!-- <div @click="toBannerLink()" class=" w-full h-[2.3rem] md:h-[6.6rem]">-->
<!-- <div @click="toBannerLink()" class=" w-full " id="banner">-->
<!-- <img v-for="(item, key) in a_banner" :key="'bannerimg'+item.id" v-show="banner_current == key"-->
<!-- :class="banner_show?' opacity-100':' opacity-0'"-->
<!-- class=" transition-opacity duration-700 cursor-pointer rounded-[0.2rem] w-full h-full bg-main"-->
<!-- :src="item.banner_url">-->
<!-- </div>-->
<!---->
<!-- 指示點 -->
<!-- <div class=" absolute bottom-[0.1rem] left-1/2 -translate-x-1/2 flex justify-center">-->
<!-- <div v-for="(item, key) in a_banner" :key="'banner'+item.id"-->
<!-- :class="banner_current==key?'bg-white':'bg-sub-white'"-->
<!-- class=" ml-[0.2rem] first:ml-0 w-[0.33rem] h-[0.04rem]"></div>-->
<!-- </div>-->
<!---->
<!-- <img @click="preBanner()"-->
<!-- class=" cursor-pointer w-[0.66rem] h-[0.66rem] md:w-[1rem] md:h-[1rem] absolute left-[-0.04rem] md:left-[-0.16rem] top-1/2 -translate-y-1/2"-->
<!-- src="--><?php //showFoodAppPath('img/scroll-left.png') ?><!--">-->
<!-- <img @click="nextBanner()"-->
<!-- class=" cursor-pointer w-[0.66rem] h-[0.66rem] md:w-[1rem] md:h-[1rem] absolute right-[-0.04rem] md:right-[-0.16rem] top-1/2 -translate-y-1/2"-->
<!-- src="--><?php //showFoodAppPath('img/scroll-right.png') ?><!--">-->
<!-- </div>-->
<!-- banner 横幅模块start-->
<div class='banner pc_banner'>
<div class='banner_content'>
<div class='banner_title'>
最受歡迎影片比賽
</div>
<div class='banner_text '>
發揮你的創意
</div>
<!-- <div class='banner_line'></div>-->
<!-- <div class='banner_bottom_title'>-->
<!-- 規則:-->
<!-- </div>-->
<div class='banner_bottom_text'>
眾多不同主題的比賽，尋找你感興趣的，創作擁有個人風格的影片，或給心儀的影片投票。下一個最優秀作品或者就屬於你！
</div>
<!-- <div class='banner_btn_outNode'>-->
<!-- <div class='banner_btn btn_one' @click="creatingActivity">-->
<!-- 創建新比賽-->
<!-- <img src="--><?php //showFoodAppPath('/ranking/images/ranking_banner__btn_right.webp') ?><!--" >-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
<!-- banner 横幅模块end-->
<div class="hidden xl:hidden flex mx-[0.3rem] px-[0.3rem] items-center h-[0.6rem] bg-f5 rounded-full">
<input v-model="submit_info.search_text" @keydown.enter="searchSubmit()" placeholder="你想要的比賽"
class=" text-[0.24rem] leading-[0.2rem] outline-none w-full h-full bg-f5" type="text">
<div @click="searchSubmit()"
class=" cursor-pointer ml-[0.1rem] text-main font-medium text-[0.24rem] leading-[0.2rem] flex-shrink-0">
搜尋
</div>
</div>
<div class="hidden mt-[0.2rem] mx-[0.3rem] bg-f5 rounded-[0.2rem] pt-[0.2rem] px-[0.3rem] pb-[0.2rem] mb-[0.2rem]">
<div class=" w-full flex items-center">
<div class=" text-main text-[0.24rem] leading-[0.2rem] flex-shrink-0">篩選</div>
<div @click="searchSubmit"
class=" ml-auto w-[1.2rem] h-[0.4rem] cursor-pointer flex items-center justify-center bg-main rounded-[0.04rem]">
<div class=" text-[0.2rem] leading-[0.24rem] text-white">確認</div>
</div>
<div @click="clearFilter"
class=" ml-[0.2rem] w-[1.2rem] h-[0.4rem] cursor-pointer flex items-center justify-center bg-white border-[0.02rem] border-main rounded-[0.04rem]">
<div class=" text-[0.2rem] leading-[0.24rem] text-main">清空</div>
</div>
<!-- <div @click="creatingActivity"-->
<!-- class=" ml-[0.2rem] w-[1.2rem] h-[0.4rem] cursor-pointer flex items-center justify-center bg-white border-[0.02rem] border-main rounded-[0.04rem]">-->
<!-- <div class=" text-[0.2rem] leading-[0.24rem] text-main">創建新比賽</div>-->
<!-- </div>-->
<!-- <div @click="creatingActivityPlayer"-->
<!-- class=" ml-[0.2rem] w-[1.2rem] h-[0.4rem] cursor-pointer flex items-center justify-center bg-white border-[0.02rem] border-main rounded-[0.04rem]">-->
<!-- <div class=" text-[0.2rem] leading-[0.24rem] text-main">創建新比賽項目</div>-->
<!-- </div>-->
</div>
<div class=" w-full mt-[0.4rem] flex items-center">
<div class=" text-[0.2rem] leading-[0.24rem] text-333">價錢:</div>
<a-input-number
class=" ml-[0.1rem]"
size="small"
v-model="submit_info.price_pre"
:formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
:parser="value => value.replace(/\$\s?|(,*)/g, '')"
></a-input-number>
<div class=" ml-[0.1rem]">-</div>
<a-input-number
class=" ml-[0.1rem]"
size="small"
v-model="submit_info.price_next"
:formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
:parser="value => value.replace(/\$\s?|(,*)/g, '')"
/>
</a-input-number>
</div>
<div class=" w-full mt-[0.2rem] flex items-center">
<div class=" text-[0.2rem] leading-[0.24rem] text-333">排序:</div>
<a-select v-model="submit_info.order_name" size="small" style="margin-left: 0.1rem;width:3rem">
<a-select-option value="日期">
日期
</a-select-option>
<!-- <a-select-option value="銷量">
銷量
</a-select-option> -->
<a-select-option value="價格升序">
價格升序
</a-select-option>
<a-select-option value="價格降序">
價格降序
</a-select-option>
</a-select>
</div>
<div class=" mt-[0.2rem] bg-e6 w-full h-[0.02rem]"></div>
<div v-if="submit_info.filter_cate.length > 0" class=" mt-[0.2rem] flex flex-wrap">
<a-tag v-for="(item, key) in submit_info.filter_cate" :key="item" closable
@close="() => tagClose(key)" class=" text-main mb-[0.1rem] flex items-center border-main">
{{item}}
</a-tag>
</div>
<div class=" mt-[0.2rem] text-[0.2rem] leading-[0.2rem] text-333 flex flex-col">
<div v-for="(item, id) in filter_arr" :key="id" class=" w-full flex flex-row">
<div class=" w-[1.2rem] flex-shrink-0">
{{item.title}}
</div>
<div class=" flex-1 flex flex-wrap">
<div v-for="item2 in item.value" :key="item2" :class="item2=='全部'?'text-main':'text-999'"
@click="selectTag(item.title, item2)" class=" cursor-pointer mr-[0.3rem] mb-[0.3rem]">
{{item2}}
</div>
</div>
</div>
</div>
</div>
<div class="competition_banner_search hdSearch flex pl-[0.2rem] items-center bg-f5 rounded-full relative mx-[0.15rem]" style="margin-top: 20px;margin-bottom: 10px;text-indent: 20px;">
<input placeholder="Search" type="text" v-model="search_competition_title"
class="hdSearch_input outline-none w-full h-full bg-white" style="margin-left: 5px;text-indent: 20px;">
<button class="hdSearch_btn bg-main-color text-white cursor-pointer" v-on:click="search_competition">搜寻</button>
</div>
<yq-competition-search-list style="margin-top:30px " class="search-list" :list="product_list" class=" mt-[0.4rem]" :user_id="<?php echo $user_id; ?>"></yq-competition-search-list>
<div v-if="product_list.length == 0" class="empty_item flex flex-col px-[0.15rem] static p-1 lg:w-1/4 md:w-1/2">
<div class=" flex flex-col cursor-pointer w-full ">
<div class="h-[0.3rem] mt-[0.1rem]">
<div class="text-center w-full overflow-ellipsis-1 text-[0.24rem] font-bold leading-[0.33rem]" style="display:inline-block;display: -webkit-box;
overflow: hidden;">
暫無比賽
</div>
<div class="flex items-center flex-wrap mt-[0.1rem] w-full">
<span class="text-gray-400 inline-flex items-center ml-auto leading-none "></span>
</div>
</div>
</div>
</div>
</main>
<yq-footer></yq-footer>
</app>
<script>
const local_url = '<?php echo $local_url ?>'
const domain = '<?php echo esc_url(home_url('/')); ?>'
const product_cat = JSON.parse('<?php echo json_encode($productCat) ?>')
new Vue({
el: "#app",
components: {
//'yq-header': httpVueLoader('<?php //showFoodAppPath('components/yq-header-MMC.vue?v=' . $vueVersion) ?>//'),
//'yq-footer': httpVueLoader('<?php //showFoodAppPath('components/yq-footer-MMC.vue?v=' . $vueVersion) ?>//'),
'yq-header': httpVueLoader('<?php showFoodAppPath('components/yq-header-competition.vue?v=' . $vueVersion) ?>'),
'yq-footer': httpVueLoader('<?php showFoodAppPath('components/yq-footer-competition.vue?v=' . $vueVersion) ?>'),
'yq-competition-search-list': httpVueLoader('<?php showFoodAppPath('components/ranking/yq-competition-search-list.vue?v=' . $vueVersion) ?>'),
},
data: {
product_list: [],
submit_info: {
price_pre: '0',
price_next: '0',
order_name: '日期',
filter_cate: [<?php echo $initCate; ?>],
search_text: ''
},
filter_arr: [
{
title: "分類:",
value: [
"全部", ...product_cat
]
}
],
page_num: 1,
is_end: false,
banner_show: true,
search_competition_title: '',
a_banner: [],
banner_current: 0,
a_cate: [],
a_cate_product: [],
current_cate: 0,
scrollFlag: true,
bannerObj: null
},
created() {
// this.get_banner()
// this.linkBanner()
if (sessionStorage.search_text) {
this.submit_info.search_text = sessionStorage.search_text
sessionStorage.search_text = ''
}
this.get_competition()
},
mounted() {
window.addEventListener('scroll', this.handleScroll)
if (window.localStorage) {
console.log("This browser supports localStorage");
// alert('This browser supports localStorage');
} else {
console.log("This browser does NOT support localStorage");
// alert('This browser does NOT support localStorage');
}
localStorage.user_id = '<?php echo $user_id; ?>'; // this.user_id;
localStorage.user_name = '<?php echo $username; ?>';
console.log('user_id => ' + localStorage.user_id + ' username => ' + localStorage.username);
// window.open(domain + '/creating_activity_page?id=0&action=add', '_blank')
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll)
},
methods: {
moment,
clearFilter() {
this.submit_info = {
price_pre: '0',
price_next: '0',
order_name: '日期',
filter_cate: [],
search_text: ''
};
this.searchSubmit()
},
creatingActivity() {
//if (window.localStorage) {
// console.log("This browser supports localStorage");
// // alert('This browser supports localStorage');
//} else {
// alert('This browser does NOT support localStorage');
//}
//
//localStorage.user_id = '<?php //echo $user_id; ?>//'; // this.user_id;
//localStorage.user_name = '<?php //echo $username; ?>//';
//console.log('user_id => ' + localStorage.user_id + ' username => ' + localStorage.username);
window.open(domain + '/creating_competition_page?id=0&action=add', '_blank')
},
handleScroll() {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
if (scrollTop + windowHeight == scrollHeight && !this.is_end) {
this.page_num = this.page_num + 1
this.get_competition()
}
},
searchSubmit() {
this.page_num = 1
this.get_competition()
},
hdSearch(e) {
this.submit_info.search_text = e
this.searchSubmit()
},
search_competition() {
this.page_num = 1;
this.get_competition();
},
async get_competition() {
const hide = antd.message.loading('加載中...');
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'ranking',
action: 'index',
a: 'getActivityListInfoByPage',
pageSize: 24,
pageNum: this.page_num,
title: this.search_competition_title,
status: '1',
// ...this.submit_info
})
});
hide();
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
// console.log(data.data)
if (data.data.length > 0) {
// this.product_list= []
if (this.page_num == 1) {
this.product_list = data.data
} else {
this.product_list = this.product_list.concat(data.data)
}
console.log(this.product_list)
} else {
// antd.message.info('已顯示所有產品');
this.is_end = true
}
}
}
},
tagClose(key) {
this.submit_info.filter_cate.splice(key, 1)
},
selectTag(title, value) {
if (value == "全部") {
this.submit_info.filter_cate = []
} else {
this.submit_info.filter_cate.push(value)
}
},
}
})
</script>
<?php get_footer('food'); ?>