File: /var/www/dk/wp-content/themes/food/page-zone.php
<?php
/* Template Name: zone */
get_header('food');
//獲取預設info
//$home_info = new stdClass;
global $MallMallChannel_index_post_id;
$index_post_id = $MallMallChannel_index_post_id;// 81;
//$home_info = getHomeInfo($index_post_id);
//echo 'index_post_id:' . $index_post_id;
$result = wp_cache_get('home_info', 'food_group');
if (false === $result) {
$home_info = getHomeInfo($index_post_id);
// $result=$wpdb->get_results($query);
wp_cache_set('home_info', $home_info, 'food_group', 60 * 60);
// echo 'wp_cache_set';
} else {
// echo 'wp_cache_get';
$home_info = $result;
}
//$home_info->cate1 = get_post_meta($index_post, "cate1", true);
//$home_info->part2_m_url = get_post_meta($index_post, "part2_m_url", true);
//$home_info->part2_pc_url = get_post_meta($index_post, "part2_pc_url", true);
//$home_info->part2_cate = get_post_meta($index_post, "part2_cate", true);
//$home_info->about_company_url = get_post_meta($index_post, "about_company_url", true);
//$home_info->about_content = get_post_meta($index_post, "about_content", true);
//$home_info->about_phone = get_post_meta($index_post, "about_phone", true);
//$home_info->about_call = get_post_meta($index_post, "about_call", true);
//$home_info->about_fax = get_post_meta($index_post, "about_fax", true);
//$home_info->about_addr = get_post_meta($index_post, "about_addr", true);
//$home_info->about_addr_en = get_post_meta($index_post, "about_addr_en", true);
//$home_info->payme_url = get_post_meta($index_post, "payme_url", true);
//print_r('home_info');
//print_r($home_info);
$videoHTML = '';
if ($home_info->zone_video_url != '') {
if (strYoutubeContains($home_info->zone_video_url)) {
$videoHTML = '<iframe class="w-full " src="' . $home_info->zone_video_url . '" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
} else {
$videoHTML = '<video controls>
<source src="' . $home_info->zone_video_url . '" type="video/mp4">
您的浏览器不支持Video标签。
</video>';
}
}
$vueVersion = time();
?>
<style>
/*#main_bg{*/
/* !*background-color:green;*!*/
/* display: flex;*/
/* flex-direction: column;*/
/* height: 100%;*/
/*}*/
</style>
<app id="app">
<yq-header></yq-header>
<div id="main_bg">
<main class=" w-100 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]">
<div @click="toBannerLink()" class=" w-full h-[2.3rem] md:h-[4.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>
<!-- 輪播 end -->
<section class="">
<div class="container px-1 py-1 mx-auto flex sm:flex-nowrap flex-wrap">
<!-- md:w-1/2 overflow-hidden -->
<div class="w-full lg:w-2/3 flex items-end justify-start relative">
<div class="rounded-sm absolute inset-0">
<?php echo $videoHTML; ?>
<!-- <iframe class="w-full h-full" src="https://www.youtube.com/embed/gPj7A2kBB4M"-->
<!-- title="YouTube video player" frameborder="0"-->
<!-- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"-->
<!-- allowfullscreen></iframe>-->
</div>
<div class="container w-full flex flex-wrap justify-between items-center mt-[5rem] md:mt-2 mb-[1rem] md:mt-0 ">
<yq-zone-zone-list :list="zone_list" class="z-20"></yq-zone-zone-list>
</div>
</div>
<!-- lg:w-1/3 md:w-1/2-->
<div class="w-full lg:w-1/3 bg-white flex flex-col md:ml-auto w-full md:py-[0.2rem] pl-[0.2rem] md:mt-0">
<p class="text-333 text-[0.36rem] mb-1 font-medium title-font text-center">今期熱門
<span class=" mb-[0.2rem] text-333 text-[0.2rem]">為您推薦特惠好物</span>
</p>
<!-- -m-4 -->
<yq-zone-hot-list :list="product_list_one"></yq-zone-hot-list>
<!-- <div class="flex flex-wrap text-left border border-gray-200 rounded-[0.05rem]">-->
<!-- <div class=" md:w-1/2 bg-green-200">-->
<!-- <div class="p-[0.1rem]">-->
<!-- <img class="h-[1.5rem] w-[1.5rem] mx-auto object-cover object-center"-->
<!-- src="http://dk.smart1space.site/wp-content/uploads/2023/03/v2-c04599f05e5f30e6fc69b3b7a66a10d7_720w.jpg"-->
<!-- alt="blog">-->
<!-- <div class="p-[0.2rem] pb-0">-->
<!-- <h2 class="tracking-widest text-[0.14rem] title-font font-medium text-333 mb-[0.1rem]">-->
<!-- 任天堂（Nintendo）Switch NS掌上遊戲機OLED主機</h2>-->
<!-- <div class="title-font text-[0.2rem] font-bold mb-[0.1rem]"-->
<!-- style="color:#EA6908">$2199-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class=" mt-[0.3rem] h-[0.32rem] w-full text-center">
<a href="/food-search">
<button class="py-[0.2rem] px-[1rem] text-white bg-main-color hover:bg-green-500 text-[0.2rem] rounded-[0.05rem] ">
更多热门
</button>
</a>
</div>
<!-- <div class="p-2 w-full">
<button class="bg-main-color hover:bg-red-700 ">
Hover me
</button>
<button class=" mx-auto text-white bg-black border-0 py-2 px-2 focus:outline-none hover:bg-indigo-600 rounded-[0.05rem] text-lg">Button</button>
</div> -->
<div class=" mt-[0.6rem] md:mb-[0.6rem] h-[1.65rem] text-center">
<!-- <p class="text-[0.16rem] text-333 ">111距今期結束: 00:00:00</p>-->
</div>
</div>
</div>
</section>
</main>
</div>
<yq-footer></yq-footer>
</app>
<script>
const local_url = '<?php echo $local_url ?>'
const home_info = JSON.parse('<?php echo json_encode($home_info) ?>')
new Vue({
el: "#app",
components: {
'yq-zone-hot-list': httpVueLoader('<?php showFoodAppPath('components/yq-zone-hot-list.vue?v=' . $vueVersion); ?>'),
'yq-zone-zone-list': httpVueLoader('<?php showFoodAppPath('components/yq-zone-zone-list.vue?v=' . $vueVersion); ?>'),
'yq-header': httpVueLoader('<?php showFoodAppPath('components/yq-header.vue?v=5') ?>'),
'yq-footer': httpVueLoader('<?php showFoodAppPath('components/yq-footer.vue?v=' . $vueVersion) ?>'),
},
created() {
this.get_banner()
this.get_product_list_one()
this.linkBanner()
},
data: {
banner_show: true,
zone_list: [
{
id: 28,
title: "零食專區",
img_url: "http://dk.smart1space.site/wp-content/uploads/2023/03/z1@2x.png",
url: ""
}, {
id: 29,
title: "電子產品專區",
img_url: "http://dk.smart1space.site/wp-content/uploads/2023/03/z2@2x.png",
}, {
id: 30,
title: "影視專區",
img_url: "http://dk.smart1space.site/wp-content/uploads/2023/03/z3@2x.png",
url: "",
}, {
id: 31,
title: "醫藥保健",
img_url: "http://dk.smart1space.site/wp-content/uploads/2023/03/z4@2x.png",
url: "",
}, {
id: 999,
title: "醫學媒體頻道",
img_url: "http://dk.smart1space.site/wp-content/themes/food/food-app/img/zone_video/medicine@2x.png",
url: "/medicine-zone"
},
],
product_list_one: [],
a_banner: [],
banner_current: 0,
a_cate: [],
a_cate_product: [],
current_cate: 0,
scrollFlag: true,
bannerObj: null
},
methods: {
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);
},
async get_banner() {
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'banner',
action: 'get_banner',
banner_type: 1
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.a_banner = data.res
}
}
},
async get_product_list_one() {
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'product',
action: 'get_product_by_cate',
cate: [home_info.cate1],
limit: 4
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.product_list_one = data.res
}
}
},
async get_cate() {
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'cate',
action: 'r_cate'
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.a_cate = data.res.cate_list
this.a_cate_product = data.res.product_list
}
}
if (this.scrollFlag) {
this.scrollFlag = false
setTimeout(() => {
this.$nextTick(() => {
if (window.location.href.indexOf('#') > -1) {
window.scrollTo({
top: document.getElementById(window.location.href.split('#')[1]).offsetTop,
behavior: 'smooth'
})
}
})
}, 0);
}
},
async get_cate_product(key) {
this.current_cate = key
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'product',
action: 'get_product_by_cate',
cate: [this.a_cate[this.current_cate]],
limit: 6
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.a_cate_product = data.res
}
}
},
async get_product_list_two() {
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'product',
action: 'get_product_by_date',
limit: 4
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.product_list_two = data.res
}
}
}
}
})
</script>
<?php get_footer('food'); ?>