File: /var/www/dk/wp-content/themes/food/food-app/page-home.php
<?php
/* Template Name: food home */
get_header('food');
//獲取預設info
$home_info = new stdClass;
$home_info->cate1 = get_post_meta(267, "cate1", true);
$home_info->part2_m_url = get_post_meta(267, "part2_m_url", true);
$home_info->part2_pc_url = get_post_meta(267, "part2_pc_url", true);
$home_info->part2_cate = get_post_meta(267, "part2_cate", true);
$home_info->about_company_url = get_post_meta(267, "about_company_url", true);
$home_info->about_content = get_post_meta(267, "about_content", true);
$home_info->about_phone = get_post_meta(267, "about_phone", true);
$home_info->about_call = get_post_meta(267, "about_call", true);
$home_info->about_fax = get_post_meta(267, "about_fax", true);
$home_info->about_addr = get_post_meta(267, "about_addr", true);
$home_info->about_addr_en = get_post_meta(267, "about_addr_en", true);
$home_info->payme_url = get_post_meta(267, "payme_url", true);
$vueVersion = time();
?>
<app id="app">
<yq-header></yq-header>
<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>
<!-- 欄目 -->
<yq-title class=" mt-[0.4rem] md:mt-[0.96rem]"></yq-title>
<!-- 招牌產品 -->
<yq-food-list-one id="part1" :list="product_list_one" class=" mt-[0.3rem]"></yq-food-list-one>
<!-- share-list-2 -->
<yq-food-list-two :list="product_list_two"></yq-food-list-two>
<!-- 欄目 -->
<yq-title id="hot" class=" mt-[0.4rem] md:mt-[0.96rem]" title="熱銷推薦" en-title="Hot selling recommendation"></yq-title>
<!-- tag -->
<div class=" w-full mt-[0.3rem] px-[0.3rem] flex flex-wrap justify-center">
<span v-for="(item, key) in a_cate" @click="get_cate_product(key)" :class="current_cate == key?'bg-main border-[0.02rem] border-main text-white':'bg-white border-[0.02rem] border-999 text-999'" class=" cursor-pointer mr-[0.2rem] mb-[0.3rem] px-[0.2rem] py-[0.07rem] rounded-[0.04rem] text-[0.24rem] leading-[0.2rem]">{{item}}</span>
</div>
<yq-food-list-one :list="a_cate_product" class=" mt-[0.3rem]"></yq-food-list-one>
<a href="/food-home" class=" flex w-full px-[0.3rem] mt-[0.4rem] md:mt-[0.96rem]">
<img class=" w-full h-auto rounded-[0.1rem]" src="<?php showFoodAppPath('img/home-share.png') ?>">
</a>
<!-- 欄目 -->
<div class=" mt-[0.3rem] px-[0.3rem] mb-[0.5rem]">
<div class=" mt-[0.4rem] w-full h-[0.02rem] bg-main"></div>
<div class="text-[0.36rem] text-center mt-[1.54rem]"
style="font-family: Source Han Sans CN;font-weight: 500;color: #333333;">
聯絡Mall Mall Channel
</div>
<div class="text-[0.2rem] text-center mb-2"
style="font-family: Arial;font-weight: 400;color: #999999;">
Contact Mall Mall Channel
</div>
<div class="mx-auto max-w-xl lg:mx-0 lg:flex lg:max-w-none">
<div class="flex-auto my-auto lg:w-2/5 ">
<div class="grid grid-cols-1">
<div>
<div class="bg-green-300 float-right h-10 w-10 mr-2 bg-main-color pt-2">
<div class=" flex flex-col text-center">
<img :src="local_url+'img/qrcode_demo.png'"
class=" w-[1.41rem] h-auto rounded-[0.1rem] mx-auto" style="background: rgba(255,255,255,0.39);
border: 2px solid #009B96;
opacity: 1;
border-radius: 4px;">
<div class="text-center mt-0.5 text-white">Whatsapp</div>
</div>
</div>
</div>
<div>
<div class="bg-green-300 float-right h-12 w-10 mr-2 pt-2 bg-main-color ">
<div class=" flex flex-col md:ml-0">
<img :src="local_url+'img/qrcode_demo.png'"
class=" w-[1.41rem] h-auto rounded-[0.1rem] mx-auto" style="
background: rgba(255,255,255,0.39);
border: 2px solid #009B96;
opacity: 1;
border-radius: 4px;">
<div class="text-center mt-0.5 text-white">Wechat</div>
</div>
</div>
</div>
</div>
</div>
<div class="lg:w-3/5 -mt-1 p-1 lg:mt-0 lg:flex-shrink-0 divide-y divide-main-color"
style="border: 1px solid #009B96;">
<div class="w-auto max-w-md flex-auto overflow-hidden text-[0.26rem]">
<div class="p-1">
<div class="relative flex gap-x-1 ">
<div class="mt-1 flex h-[0.77rem] w-[0.77rem] flex-none items-center justify-center">
<img class="h-[0.77rem] w-auto object-contain"
:src="local_url+'img/home/mark@2x.png'" alt="">
</div>
<div>
<span class="font-semibold text-gray-900">
Mall Mall Channel 總部
<span class="absolute inset-0"></span>
</span>
<p class="mt-1 text-gray-600">香港灣仔駱克道000-000號嘉洛商業大廈三樓M&N室</p>
</div>
</div>
</div>
</div>
<div class="w-auto max-w-md flex-auto overflow-hidden text-[0.26rem]">
<div class="p-1">
<div class="relative flex gap-x-1 text-center">
<div class="mt-1 flex h-[0.77rem] w-[0.77rem] flex-none items-center justify-center">
<img class="h-[0.77rem] w-auto object-contain"
:src="local_url+'img/home/phone@2x.png'" alt="">
</div>
<div class="font-semibold text-gray-900">
852 - 4321 6789
</div>
</div>
</div>
</div>
<div class="w-auto max-w-md flex-auto overflow-hidden text-[0.26rem]">
<div class="p-1">
<div class="relative flex gap-x-1 text-center">
<div class="mt-1 flex h-[0.77rem] w-[0.77rem] flex-none items-center justify-center">
<img class="h-[0.77rem] w-auto object-contain"
:src="local_url+'img/home/printer@2x.png'" alt="">
</div>
<div class="font-semibold text-gray-900">
852 - 4321 6789
</div>
</div>
</div>
</div>
<div class="w-auto max-w-md flex-auto overflow-hidden text-[0.26rem]">
<div class="p-1">
<div class="relative flex gap-x-1 text-center">
<div class="mt-1 flex h-[0.77rem] w-[0.77rem] flex-none items-center justify-center">
<img class="h-[0.77rem] w-auto object-contain"
:src="local_url+'img/home/mail@2x.png'" alt="">
</div>
<div class="font-semibold text-gray-900">
mallMallChannel@hotmail.com
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 2-->
</div>
<div class="text-[0.36rem] text-center mt-[1.54rem]"
style="font-family: Source Han Sans CN;font-weight: 500;color: #333333;">
尋求合作
</div>
<div class="text-[0.2rem] text-center" style="font-family: Arial;font-weight: 400;color: #999999;">
Seek Cooperation
</div>
<div class="container flex flex-wrap px-1 py-1 mx-auto items-center mb-2">
<div class="flex flex-col w-full md:w-1/2 md:px-3 pl-2">
<div class="relative z-40 w-[1.02rem] h-[1.02rem]" style="top: 46px;left: -26px;"><img
class="h-[1.02rem] w-auto object-contain" :src="local_url+'img/home/b_home@2x.png'" alt="">
</div>
<div class=" relative box-border w-auto text-center"
style="background: rgba(255,255,255,0.39);box-shadow: 0px 0px 26px rgba(0,155,150,0.2);opacity: 1;border-radius: 5px;">
<div class="text-333 text-[0.31rem] mt-[0.36rem]">入駐 Mall Mall Channel</div>
<div class="text-999 text-[0.26rem] m-[0.26rem]">成為商家 擴展銷售渠道</div>
</div>
</div>
<div class="flex flex-col w-full md:w-1/2 md:px-3 pl-2">
<div class="relative z-40 w-[1.02rem] h-[1.02rem]" style="top: 46px;left: -26px;"><img
class="h-[1.02rem] w-auto object-contain" :src="local_url+'img/home/b_video@2x.png'" alt="">
</div>
<div class=" relative box-border w-auto text-center"
style="background: rgba(255,255,255,0.39);box-shadow: 0px 0px 26px rgba(0,155,150,0.2);opacity: 1;border-radius: 5px;">
<div class="text-333 text-[0.31rem] mt-[0.36rem]">參與拍攝賣貨視頻</div>
<div class="text-999 text-[0.26rem] m-[0.26rem]">成為拍攝者 賺取賣貨佣金</div>
</div>
</div>
</div>
</main>
<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-title': httpVueLoader('<?php showFoodAppPath('components/yq-title.vue?v='.$vueVersion) ?>'),
'yq-food-list-one': httpVueLoader('<?php showFoodAppPath('components/yq-food-list-one.vue?v='.$vueVersion) ?>'),
'yq-food-list-two': httpVueLoader('<?php showFoodAppPath('components/yq-food-list-two.vue?v='.$vueVersion) ?>'),
'yq-header': httpVueLoader('<?php showFoodAppPath('components/yq-header.vue?v='.$vueVersion) ?>'),
'yq-footer': httpVueLoader('<?php showFoodAppPath('components/yq-footer.vue?v='.$vueVersion) ?>'),
},
created() {
this.get_banner()
this.get_product_list_one()
this.get_product_list_two()
this.get_cate()
this.linkBanner()
},
data: {
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
},
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_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_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: 6
})
});
if(res.status == 200) {
let data = res.data;
if(data.rc == 0) {
this.product_list_one = 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'); ?>