File: /var/www/dk/wp-content/themes/food/food-app/page-detail.php
<?php
/* Template Name: food detail */
get_header('food');
if (!(intval($_GET['id']) > 0)) {
header("location: /food-search");
}
?>
<app id="app">
<yq-header></yq-header>
<main class=" py-[0.2rem] md:w-[768px] md:mx-auto xl:w-[1280px]">
<div class=" px-[0.3rem] flex items-center font-f-arial text-[0.18rem] leading-[0.20rem] text-333">
<a href="/food-home">首頁</a>
<div class=" mx-[0.1rem]">></div>
<a href="/product-detail?id=<?php echo $_GET['id'] ?>">{{product_info.product_name}}</a>
</div>
<div class=" md:hidden mt-[0.2rem] p-[0.16rem] mx-[0.3rem] border-[0.01rem] border-e6 rounded-[0.1rem] bg-white">
<div class=" relative">
<img class=" rounded-[0.2rem] w-[6.59rem] h-[6.59rem]" :src="product_info.img_url"
onerror="onerror=null;src='http://120.79.165.149:8002/wp-content/themes/food/food-app/img/img-fail.png'">
<!-- 指示點 -->
<!-- <div class=" absolute bottom-[0.1rem] left-1/2 -translate-x-1/2 flex justify-center">
<div class=" ml-[0.2rem] first:ml-0 w-[0.33rem] h-[0.04rem] bg-white"></div>
<div class=" ml-[0.2rem] first:ml-0 w-[0.33rem] h-[0.04rem] bg-sub-white"></div>
<div class=" ml-[0.2rem] first:ml-0 w-[0.33rem] h-[0.04rem] bg-sub-white"></div>
<div class=" ml-[0.2rem] first:ml-0 w-[0.33rem] h-[0.04rem] bg-sub-white"></div>
</div>
<img class=" cursor-pointer w-[0.4rem] h-[0.4rem] absolute left-0 top-1/2 -translate-y-1/2" src="<?php showFoodAppPath('img/detail-left.png') ?>">
<img class=" cursor-pointer w-[0.4rem] h-[0.4rem] absolute right-0 top-1/2 -translate-y-1/2" src="<?php showFoodAppPath('img/detail-right.png') ?>"> -->
</div>
</div>
<div class=" mt-[0.4rem] mx-[0.3rem] text-[0.2rem] leading-[0.32rem] md:flex md:items-start">
<div class=" hidden md:block w-[4.9rem]">
<div class=" p-[0.1rem] border-[0.01rem] border-e6 rounded-[0.1rem] bg-white">
<div class=" relative w-[4.7rem] h-[4.7rem]">
<img class=" rounded-[0.2rem] w-full h-full" :src="product_info.img_url">
</div>
</div>
<!-- <div ref="sub_img" @wheel="wheelX" class=" mt-[0.1rem] flex items-center w-full bg-white overflow-x-scroll">
<div class=" ml-[0.1rem] flex-shrink-0 first:ml-0 w-[0.88rem] h-[0.88rem] border-[0.01rem] border-e6 rounded-[0.1rem] bg-white">
<img class=" rounded-[0.2rem] w-full h-full" src="<?php showFoodAppPath('img/scroll.png') ?>">
</div>
<div class=" ml-[0.1rem] flex-shrink-0 first:ml-0 w-[0.88rem] h-[0.88rem] border-[0.01rem] border-e6 rounded-[0.1rem] bg-white">
<img class=" rounded-[0.2rem] w-full h-full" src="<?php showFoodAppPath('img/scroll.png') ?>">
</div>
<div class=" ml-[0.1rem] flex-shrink-0 first:ml-0 w-[0.88rem] h-[0.88rem] border-[0.01rem] border-e6 rounded-[0.1rem] bg-white">
<img class=" rounded-[0.2rem] w-full h-full" src="<?php showFoodAppPath('img/scroll.png') ?>">
</div>
<div class=" ml-[0.1rem] flex-shrink-0 first:ml-0 w-[0.88rem] h-[0.88rem] border-[0.01rem] border-e6 rounded-[0.1rem] bg-white">
<img class=" rounded-[0.2rem] w-full h-full" src="<?php showFoodAppPath('img/scroll.png') ?>">
</div>
<div class=" ml-[0.1rem] flex-shrink-0 first:ml-0 w-[0.88rem] h-[0.88rem] border-[0.01rem] border-e6 rounded-[0.1rem] bg-white">
<img class=" rounded-[0.2rem] w-full h-full" src="<?php showFoodAppPath('img/scroll.png') ?>">
</div>
<div class=" ml-[0.1rem] flex-shrink-0 first:ml-0 w-[0.88rem] h-[0.88rem] border-[0.01rem] border-e6 rounded-[0.1rem] bg-white">
<img class=" rounded-[0.2rem] w-full h-full" src="<?php showFoodAppPath('img/scroll.png') ?>">
</div>
<div class=" ml-[0.1rem] flex-shrink-0 first:ml-0 w-[0.88rem] h-[0.88rem] border-[0.01rem] border-e6 rounded-[0.1rem] bg-white">
<img class=" rounded-[0.2rem] w-full h-full" src="<?php showFoodAppPath('img/scroll.png') ?>">
</div>
</div> -->
</div>
<div class=" md:ml-[0.32rem]">
<div class=" text-[0.28rem] leading-[0.4rem] text-333 font-sans">
{{product_info.product_name}}
</div>
<div class=" flex md:flex-col items-center md:items-start mt-[0.2rem] md:mt-[0.1rem] text-999">
<div>{{ product_info.cate.join(' | ') }}</div>
<a href="#tab-menu" @click="changeNav(3)" class=" ml-auto md:ml-0 md:mt-[0.1rem] text-main">
查看評價({{product_info.comment_num}})
</a>
</div>
<div class=" mt-[0.2rem] md:mt-[0.4rem] flex md:items-end">
<div class=" hidden md:block text-999">價格</div>
<div class=" text-F70500 md:ml-[0.2rem] text-[0.48rem] leading-[0.58rem] font-f-din">
${{product_info.regular_price}}
</div>
</div>
<div class=" md:hidden mt-[0.3rem] w-full h-[0.02rem] bg-e6"></div>
<!-- <div class=" mt-[0.4rem] md:mt-[0.1rem] flex items-center">
<div class=" text-999">郵費</div>
<div class=" ml-[0.2rem] text-333">{{info.send_price_text}}</div>
<div class=" md:hidden text-999">
配送
</div>
<div class=" md:hidden ml-[0.2rem] text-333">
至
</div>
<div class=" md:hidden ml-[0.1rem]">
<a-select style="width: 2rem;" class=" text-999" placeholder="請選擇地區" v-model="submit_info.area">
<a-select-option value="東區">
東區
</a-select-option>
</a-select>
</div>
</div>
<div class=" hidden md:flex mt-[0.1rem] items-center">
<div class=" text-999">配送</div>
<div class=" ml-[0.2rem] text-333">
至
</div>
<div class=" ml-[0.1rem]">
<a-select style="width: 2rem;" class=" text-999" placeholder="請選擇地區" v-model="submit_info.area">
<a-select-option value="東區">
東區
</a-select-option>
</a-select>
</div>
</div> -->
<!-- <div class=" mt-[0.4rem] flex items-center md:items-start">
<div class=" text-999">包裝</div>
<div class=" ml-[0.2rem] flex">
<div class=" ml-[0.2rem] first:ml-0 w-[0.8rem] p-[0.03rem] h-[0.8rem] border-[0.01rem] border-e6 rounded-[0.04rem]">
<img class=" w-full h-full" src="">
</div>
<div class=" ml-[0.2rem] first:ml-0 w-[0.8rem] p-[0.03rem] h-[0.8rem] border-[0.01rem] border-e6 rounded-[0.04rem]">
<img class=" w-full h-full" src="">
</div>
<div class=" ml-[0.2rem] first:ml-0 w-[0.8rem] p-[0.03rem] h-[0.8rem] border-[0.01rem] border-e6 rounded-[0.04rem]">
<img class=" w-full h-full" src="">
</div>
<div class=" ml-[0.2rem] first:ml-0 w-[0.8rem] p-[0.03rem] h-[0.8rem] border-[0.01rem] border-e6 rounded-[0.04rem]">
<img class=" w-full h-full" src="">
</div>
</div>
</div> -->
<div class=" mt-[0.4rem] md:mt-[0.1rem] flex items-center">
<div class=" text-999">数量</div>
<div class=" ml-[0.2rem] flex border-[0.01rem] border-e6 text-[0.2rem] leading-[0.32rem]">
<div @click="changeNum(-1)"
class=" cursor-pointer select-none w-[0.4rem] h-[0.4rem] border-r-[0.01rem] flex items-center justify-center">
-
</div>
<div class=" flex items-center px-[0.34rem] font-f-din text-333 border-r-[0.01rem]">
{{submit_info.num}}
</div>
<div @click="changeNum(+1)"
class=" cursor-pointer select-none w-[0.4rem] h-[0.4rem] flex items-center justify-center">
+
</div>
</div>
</div>
<div class=" mt-[0.2rem] items-center hidden md:flex">
<div @click="add_order()"
class=" cursor-pointer w-[2.56rem] h-[0.64rem] flex items-center justify-center rounded-[0.02rem] bg-main text-white text-[0.22rem] leading-[0.22rem] font-medium">
立即購買
</div>
<div @click="c_cart()"
class=" cursor-pointer border-[0.02rem] border-268AFF ml-[0.3rem] w-[2.56rem] h-[0.64rem] flex items-center justify-center rounded-[0.02rem] bg-white text-268AFF text-[0.22rem] leading-[0.22rem] font-medium">
加入購物車
</div>
</div>
</div>
</div>
<div id="tab-menu" class=" mt-[0.4rem] w-full px-[0.3rem]">
<div class=" flex items-center md:justify-start text-[0.2rem] leading-[0.2rem] ">
<div @click="changeNav(0)" :class="active_nav == 0?'text-white bg-main':' bg-white text-333'"
class=" cursor-pointer w-[1.6rem] h-[0.48rem] rounded-[0.04rem] flex items-center justify-center">
商品介紹
</div>
<!-- <div @click="changeNav(1)" :class="active_nav == 1?'text-white bg-main':' bg-white text-333'" class=" cursor-pointer w-[1.6rem] h-[0.48rem] rounded-[0.04rem] bg-main flex items-center justify-center">
規格包裝
</div> -->
<!-- <div @click="changeNav(2)" :class="active_nav == 2?'text-white bg-main':' bg-white text-333'" class=" cursor-pointer w-[1.6rem] h-[0.48rem] rounded-[0.04rem] bg-main flex items-center justify-center">
售後保障
</div> -->
<div @click="changeNav(3)" :class="active_nav == 3?'text-white bg-main':' bg-white text-333'"
class=" cursor-pointer w-[1.6rem] h-[0.48rem] rounded-[0.04rem] bg-main flex items-center justify-center">
商品評價({{product_info.comment_num}})
</div>
</div>
<div class=" w-full h-[0.02rem] mt-[0.04rem] bg-main rounded-[0.04rem]"></div>
<div class=" w-full mt-[0.1rem]">
<!-- 商品介紹 -->
<div v-show="active_nav == 0" id="shop-description" v-html="product_info.description"
style="line-height: 16px;" class=" w-full bg-white">
</div>
<!-- 規格包裝 -->
<img v-show="active_nav == 1" class=" w-full bg-white" src="">
<!-- 售後保障 -->
<img v-show="active_nav == 2" class=" w-full bg-white" src="">
<!-- 商品評價 -->
<div v-show="active_nav == 3" class=" w-full">
<a-comment
v-for="item in product_info.comments"
:key="item.id"
:author="item.user_nicename"
avatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
:content="item.comment"
:time="item.u_time"
>
</a-comment>
<div v-if="product_info.comment_num == 0"
class=" mt-[0.2rem] text-[0.24rem] leading-[0.24] text-333">
- 暫無評論 -
</div>
</div>
</div>
</div>
<div class=" mx-[0.3rem] flex items-center mt-[0.6rem]">
<div class=" text-[0.24rem] font-medium leading-[0.24rem] text-333">猜你喜歡</div>
<a href="/food-search" class=" cursor-pointer ml-auto text-[0.2rem] leading-[0.2rem] text-999">更多
>></a>
</div>
<yq-food-list-three :list="product_list_date" class=" mt-[0.2rem]"></yq-food-list-three>
</main>
<yq-footer class=" hidden md:block"></yq-footer>
<!-- 腳部佔位 -->
<div style="padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);"
class=" md:hidden h-[1.2rem]"></div>
<!-- 購買腳部 -->
<div style="padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);"
class=" md:hidden fixed bottom-0 left-0 flex items-center h-[1.2rem] md:w-[768px] md:mx-auto xl:w-[1280px] border-t-[0.02rem] border-f5 bg-white">
<div @click="add_order()"
class=" ml-[0.3rem] w-[4.2rem] h-[0.8rem] flex items-center justify-center rounded-full bg-main text-white text-[0.28rem] leading-[0.28rem] font-medium">
立即購買
</div>
<div @click="c_cart()"
class=" border-[0.02rem] border-268AFF ml-[0.3rem] w-[2.4rem] h-[0.8rem] flex items-center justify-center rounded-full bg-white text-268AFF text-[0.28rem] leading-[0.28rem] font-medium">
加入購物車
</div>
</div>
</app>
<script>
const local_url = '<?php echo $local_url ?>'
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-food-list-three': httpVueLoader('<?php showFoodAppPath('components/yq-food-list-three.vue?v=1') ?>'),
},
data: {
active_nav: 0,
submit_info: {
area: '',
num: 1
},
product_info: {
cate: [],
cate_single: "",
description: "",
id: 0,
img_url: "",
product_name: "",
product_price: "",
regular_price: "",
sale_price: "",
comments: [],
comment_num: 0
},
product_list_date: []
},
created() {
this.get_product()
this.get_product_list_date()
},
methods: {
moment,
async get_product(key) {
this.current_cate = key
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'product',
action: 'get_product_detail',
id: '<?php echo $_GET['id'] ?>'
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.product_info = data.res
return false
}
}
window.location.href = "/food-search"
},
async add_order() {
if (!(user_info.ID > 0)) {
antd.message.info('您尚未登入')
return false
}
if (
user_info.user_name == '' ||
user_info.user_phone == '' ||
user_info.user_email == '' ||
user_info.address_current == '' ||
user_info.user_address[user_info.address_current] == ''
) {
sessionStorage.user_active_nav = 1
const key = `open${Date.now()}`;
antd.notification.open({
message: '提示',
description:
'您尚未設置好個人信息，請前往設置',
btn: h => {
return h(
'a-button',
{
props: {
type: 'primary',
size: 'small',
},
on: {
click: () => {
antd.notification.close(key)
window.open("/food-user")
},
},
},
'前往',
);
},
key,
onClose: close,
});
return false
}
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'order',
action: 'c_order',
order_products: [
{
product_id: this.product_info.id,
product_num: this.submit_info.num,
}
],
cart_id: []
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
sessionStorage.user_active_nav = 0
const key = `open${Date.now()}`;
antd.notification.open({
message: '提示',
description:
'商品已創建訂單',
btn: h => {
return h(
'a-button',
{
props: {
type: 'primary',
size: 'small',
},
on: {
click: () => {
antd.notification.close(key)
window.open("/food-user")
},
},
},
'前往查看',
);
},
key,
onClose: close,
});
}
}
},
async c_cart() {
if (!(user_info.ID > 0)) {
antd.message.info('您尚未登入')
return false
}
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'cart',
action: 'c_cart',
product_id: this.product_info.id,
product_num: this.submit_info.num,
status: 1,
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
const key = `open${Date.now()}`;
antd.notification.open({
message: '提示',
description:
'商品已成功加入購物車',
btn: h => {
return h(
'a-button',
{
props: {
type: 'primary',
size: 'small',
},
on: {
click: () => {
antd.notification.close(key)
window.open("/food-shop-car")
},
},
},
'前往查看',
);
},
key,
onClose: close,
});
} else if (data.rc == 3) {
const key = `open${Date.now()}`;
antd.notification.open({
message: '提示',
description:
'商品已存在于購物車',
btn: h => {
return h(
'a-button',
{
props: {
type: 'primary',
size: 'small',
},
on: {
click: () => {
antd.notification.close(key)
window.open("/food-shop-car")
},
},
},
'前往查看',
);
},
key,
onClose: close,
});
}
}
},
async get_product_list_date() {
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'product',
action: 'get_product_by_date',
limit: 6
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.product_list_date = data.res
}
}
},
wheelX(e) {
e.preventDefault();
this.$refs.sub_img.scrollLeft += e.deltaY;
},
changeNum(add) {
let temp_num = this.submit_info.num + add
if (temp_num < 1) {
temp_num = 1
}
if (temp_num > 99) {
temp_num = 99
}
this.submit_info.num = temp_num
},
changeNav(key) {
this.active_nav = key
}
}
})
</script>
<?php get_footer('food'); ?>