File: /var/www/dk/wp-content/themes/food/food-app/page-search.php
<?php
/* Template Name: food search */
get_header('food');
$args = array(
'taxonomy' => 'product_cat',
'hide_empty' => 0
);
$productCat = array();
$productTabs = get_terms('product_cat', $args);
foreach ($productTabs as $key => $value) {
if ($value->name != 'Uncategorized' && $value->name != '未分類') {
array_push($productCat, $value->name);
}
}
$initCate = empty($_GET['cat']) ? '' : '"'. htmlspecialchars($_GET['cat']).'"'; // '"電子產品專區"';
//this.get_banner()
// this.linkBanner()
?>
<app id="app">
<yq-header :search_text="submit_info.search_text" @search="hdSearch"></yq-header>
<main class=" py-[0.2rem] md:w-[768px] md:mx-auto xl:w-[1280px]">
<!-- 輪播 -->
<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]">
<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>
<div class=" 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=" mt-[0.2rem] mx-[0.3rem] bg-f5 rounded-[0.2rem] pt-[0.2rem] px-[0.3rem] pb-[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>
<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>
<yq-food-list-search :list="product_list" class=" mt-[0.4rem]"></yq-food-list-search>
</main>
<yq-footer></yq-footer>
</app>
<script>
const local_url = '<?php echo $local_url ?>'
const product_cat = JSON.parse('<?php echo json_encode($productCat) ?>')
new Vue({
el: "#app",
components: {
//'yq-header': httpVueLoader('<?php //showFoodAppPath('components/yq-header.vue?v=5') ?>//'),
//'yq-footer': httpVueLoader('<?php //showFoodAppPath('components/yq-footer.vue?v=2') ?>//'),
'yq-header': httpVueLoader('<?php showFoodAppPath('components/yq-header-MMC.vue?v='.time()) ?>'),
'yq-footer': httpVueLoader('<?php showFoodAppPath('components/yq-footer-MMC.vue?v='.time()) ?>'),
'yq-food-list-search': httpVueLoader('<?php showFoodAppPath('components/yq-food-list-search.vue?v=1') ?>'),
},
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,
product_list_one: [],
product_list_two: [],
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_product()
},
mounted() {
window.addEventListener('scroll', this.headleScroll)
},
destroyed() {
window.removeEventListener('scroll', this.headleScroll)
},
methods: {
moment,
clearFilter() {
this.submit_info = {
price_pre: '0',
price_next: '0',
order_name: '日期',
filter_cate: [],
search_text: ''
};
this.searchSubmit()
},
headleScroll() {
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_product()
}
},
searchSubmit() {
this.page_num = 1
this.get_product()
},
hdSearch(e) {
this.submit_info.search_text = e
this.searchSubmit()
},
async get_product() {
const hide = antd.message.loading('加載中...');
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'product',
action: 'get_product_by_search',
limit: 24,
page_num: this.page_num,
...this.submit_info
})
});
hide();
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
if (data.res.length > 0) {
if (this.page_num == 1) {
this.product_list = data.res
} else {
this.product_list = this.product_list.concat(data.res)
}
} 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)
}
},
async get_banner() {
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'banner',
action: 'get_banner',
banner_type: 5
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.a_banner = data.res
}
}
},
linkBanner() {
this.bannerObj = setInterval(() => {
this.nextBanner()
}, 8000);
},
toBannerLink() {
if (this.a_banner[this.banner_current].banner_url) {
window.open(this.a_banner[this.banner_current].banner_url, '_blank')
}
},
preBanner() {
clearInterval(this.bannerObj)
this.bannerObj = null
this.banner_show = false
setTimeout(() => {
let temp = this.banner_current - 1
this.banner_current = temp < 0 ? this.a_banner.length - 1 : temp
this.banner_show = true
this.linkBanner()
}, 700);
},
nextBanner() {
clearInterval(this.bannerObj)
this.bannerObj = null
this.banner_show = false
setTimeout(() => {
let temp = this.banner_current + 1
this.banner_current = temp > this.a_banner.length - 1 ? 0 : temp
this.banner_show = true
this.linkBanner()
}, 700);
},
}
})
</script>
<?php get_footer('food'); ?>