File: /var/www/dk/wp-content/themes/food/food-app/page-shop-car.php
<?php
/* Template Name: food shop car */
get_header('MedicalMediaChannel');
$user = wp_get_current_user();
$uid = $user->ID;
if (!empty($uid) && $uid > 0) {
} else {
header("Location: /products_search");
}
?>
<app id="app">
<yq-header></yq-header>
<!-- style="height: 100%"-->
<main class=" py-[0.2rem] md:w-[768px] md:mx-auto xl:w-[1280px]" >
<div class=" mx-[0.3rem] text-[0.28rem] leading-[0.28rem] text-333">
<span class=" font-medium">購物車</span>
<span class=" ml-[0.1rem]">({{cart_list.length}} 件商品)</span>
</div>
<div class=" mx-[0.3rem] mt-[0.2rem] text-333 text-[0.2rem] leading-[0.2rem] flex items-center p-[0.2rem] rounded-[0.1rem] bg-f5">
<a-checkbox :checked="isSelectAll(cart_list, to_order_id)" @change="selectAll"></a-checkbox>
<div class=" ml-[0.2rem] cursor-pointer">全選</div>
<div class=" ml-[0.1rem] text-main">(已選0項)</div>
<div @click="deleteCart()" class=" ml-auto cursor-pointer">刪除選中的商品</div>
</div>
<div v-for="(item, key) in cart_list" :key="item.id"
class=" cursor-pointer mx-[0.3rem] flex pl-[0.2rem] py-[0.3rem] bg-white">
<a-checkbox :checked="to_order_id.indexOf(item.id) > -1" @change="selectToOrder(item.id)"></a-checkbox>
<div class=" ml-[0.2rem]">
<img class=" bg-f5 w-[1.6rem] h-[1.6rem]" :src="item.img_url"/>
<div class=" mt-[0.2rem] flex border-[0.01rem] box-content border-e6 text-[0.2rem] leading-[0.32rem]">
<div @click="plusNum(key, -1, item.id)"
class=" select-none cursor-pointer w-[0.4rem] h-[0.4rem] border-r-[0.01rem] flex items-center justify-center">
-
</div>
<div class=" flex items-center justify-center w-[0.8rem] font-f-din text-333 border-r-[0.01rem]">
{{item.product_num}}
</div>
<div @click="plusNum(key, 1, item.id)"
class=" select-none cursor-pointer w-[0.4rem] h-[0.4rem] flex items-center justify-center">
+
</div>
</div>
</div>
<div class=" ml-[0.2rem]">
<a :href="'/products_detail/?id='+item.product_id"
class=" w-full overflow-ellipsis-2 text-333 text-[0.24rem] leading-[0.32rem]">
{{item.product_name}}
</a>
<div class=" mt-[0.1rem] text-999 text-[0.2rem] leading-[0.24rem]">
{{item.cate_single}}
</div>
<div class=" mt-[0.3rem] text-[0.36rem] leading-[0.32rem] font-f-din text-333">
$ {{item.regular_price}}
</div>
</div>
</div>
<div v-if="cart_list.length == 0" class=" mx-[0.3rem] mt-[0.2rem] text-[0.24rem] leading-[0.24] text-333">
- 暫無產品 -
</div>
<div class=" hidden md:flex items-center mx-[0.3rem] p-[0.2rem]">
<div class=" ml-auto flex flex-col items-end text-[0.2rem] leading-[0.2rem]">
<div class=" flex items-center">
<div class=" text-333">合計應付:</div>
<div class=" ml-[0.1rem] text-F70500 text-[0.28rem] leading-[0.28rem]">$ {{total}}</div>
</div>
<!-- <div class=" mt-[0.1rem] text-999 flex items-center">
<div>促銷(滿1000-100):</div>
<div class=" ml-[0.1rem]">- $100.00</div>
</div> -->
</div>
<div @click="add_order()"
class=" cursor-pointer ml-[0.4rem] w-[2.8rem] h-[0.8rem] flex items-center justify-center rounded-full bg-main text-white text-[0.28rem] leading-[0.28rem] font-medium">
去付款
</div>
</div>
<div class=" mx-[0.3rem] flex items-center mt-[0.4rem]">
<div class=" text-[0.24rem] font-medium leading-[0.24rem] text-white">猜你喜歡</div>
<a href="/products_search" class=" cursor-pointer ml-auto text-[0.2rem] leading-[0.2rem] text-white">更多
>></a>
</div>
<yq-products-list-three :list="product_list_date" class=" mt-[0.2rem]"></yq-products-list-three>
</main>
<yq-footer class=" hidden md:block"></yq-footer>
<!-- 腳部佔位 -->
<div class=" md:hidden h-[1.2rem]"></div>
<!-- 購買腳部 -->
<div class=" w-full px-[0.3rem] py-[0.2rem] 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 class=" flex flex-col text-[0.2rem] leading-[0.2rem]">
<div class="flex items-center">
<div class=" text-333">合計應付:</div>
<div class=" ml-[0.1rem] text-F70500 text-[0.28rem] leading-[0.28rem]">$ {{total}}</div>
</div>
<!-- <div class=" mt-[0.1rem] text-999 flex items-center">
<div>促銷(滿1000-100):</div>
<div class=" ml-[0.1rem]">- $100.00</div>
</div> -->
</div>
<div @click="add_order()"
class=" ml-auto w-[2.8rem] h-[0.8rem] flex items-center justify-center rounded-full bg-main text-white text-[0.28rem] leading-[0.28rem] font-medium">
去付款
</div>
</div>
<yq-pay-model ref="pay_model" :moneny="total" @create_order_pay="create_order_pay"
@create_order_padding="create_order_padding"></yq-pay-model>
</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-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-three': httpVueLoader('<?php //showFoodAppPath('components/yq-food-list-three.vue?v=1') ?>//'),
'yq-products-list-three': httpVueLoader('<?php showFoodAppPath('components/yq-products-list-three.vue?v=1') ?>'),
'yq-pay-model': httpVueLoader('<?php showFoodAppPath('components/yq-pay-model.vue?v=2') ?>'),
},
data: {
cart_list: [],
to_order_id: [],
total: 0,
product_list_date: []
},
created() {
this.get_cart()
this.get_product_list_date()
},
methods: {
moment,
showPayModel() {
this.$refs.pay_model.changeShow()
},
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("/mmc-user")
},
},
},
'前往',
);
},
key,
onClose: close,
});
return false
}
if (this.to_order_id.length == 0) {
antd.message.info('未選擇購物車商品')
return false
}
this.showPayModel()
},
async create_order_pay(file) {
if (this.to_order_id.length == 0) {
antd.message.info('未選擇購物車商品')
return false
}
let param = new FormData()
let cart_id = []
for (const key in this.cart_list) {
if (Object.hasOwnProperty.call(this.cart_list, key)) {
const element = this.cart_list[key];
if (this.to_order_id.indexOf(element.id) > -1) {
param.append('cart_id[' + key + ']', element.id)
param.append('order_products[' + key + '][product_id]', element.product_id)
param.append('order_products[' + key + '][product_num]', element.product_num)
}
}
}
param.append('pay_file', file)
param.append('module', 'order')
param.append('action', 'c_order')
let res = await axios({
method: 'post',
url: '/api/',
data: param
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.get_cart()
const key = `open${Date.now()}`
antd.notification.open({
message: '提示',
description:
'訂單已創建並已完成支付',
btn: h => {
return h(
'a-button',
{
props: {
type: 'primary',
size: 'small',
},
on: {
click: () => {
sessionStorage.user_active_nav = 0
antd.notification.close(key)
window.open("/mmc-user")
},
},
},
'前往查看',
);
},
key,
onClose: close,
});
} else if (data.rc == 2) {
this.get_cart()
const key = `open${Date.now()}`
antd.notification.open({
message: '提示',
description:
'訂單已創建但支付失敗，請重新上傳',
btn: h => {
return h(
'a-button',
{
props: {
type: 'primary',
size: 'small',
},
on: {
click: () => {
sessionStorage.user_active_nav = 0
antd.notification.close(key)
window.open("/mmc-user")
},
},
},
'前往查看',
);
},
key,
onClose: close,
});
}
}
},
async create_order_padding() {
if (this.to_order_id.length == 0) {
antd.message.info('未選擇購物車商品')
return false
}
let order_products = []
let cart_id = []
for (const key in this.cart_list) {
if (Object.hasOwnProperty.call(this.cart_list, key)) {
const element = this.cart_list[key];
if (this.to_order_id.indexOf(element.id) > -1) {
cart_id.push(element.id)
order_products.push({
'product_id': element.product_id,
'product_num': element.product_num
})
}
}
}
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'order',
action: 'c_order',
order_products,
cart_id
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.get_cart()
const key = `open${Date.now()}`
antd.notification.open({
message: '提示',
description:
'商品已創建訂單',
btn: h => {
return h(
'a-button',
{
props: {
type: 'primary',
size: 'small',
},
on: {
click: () => {
sessionStorage.user_active_nav = 0
antd.notification.close(key)
window.open("/mmc-user")
},
},
},
'前往查看',
);
},
key,
onClose: close,
});
}
}
},
plusNum(key, plus_num, id) {
let temp = this.cart_list[key].product_num + plus_num
this.cart_list[key].product_num = temp
if (temp < 1) {
this.cart_list[key].product_num = 1
}
if (temp > 99) {
this.cart_list[key].product_num = 99
}
this.culTotal()
axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'cart',
action: 'u_cart_num',
id,
product_num: this.cart_list[key].product_num
})
});
},
selectToOrder(id) {
let temp_key = this.to_order_id.indexOf(id)
if (temp_key > -1) {
this.to_order_id.splice(temp_key, 1)
} else {
this.to_order_id.push(id)
}
this.culTotal()
},
isSelectAll(cart_list, to_order_id) {
for (const key in cart_list) {
if (Object.hasOwnProperty.call(cart_list, key)) {
const element = cart_list[key];
if (to_order_id.indexOf(element.id) == -1) {
return false
}
}
}
return true
},
selectAll() {
if (!this.isSelectAll(this.cart_list, this.to_order_id)) {
this.to_order_id = []
for (const key in this.cart_list) {
if (Object.hasOwnProperty.call(this.cart_list, key)) {
const element = this.cart_list[key];
this.to_order_id.push(element.id)
}
}
} else {
this.to_order_id = []
}
this.culTotal()
},
culTotal() {
//total
this.total = 0
for (const key in this.cart_list) {
if (Object.hasOwnProperty.call(this.cart_list, key)) {
const element = this.cart_list[key];
if (this.to_order_id.indexOf(element.id) > -1) {
this.total = this.total + (element.product_num * element.regular_price)
}
}
}
},
async deleteCart() {
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'cart',
action: 'd_cart',
id: this.to_order_id
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.get_cart()
}
}
},
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
}
}
},
async get_cart() {
this.total = 0
this.to_order_id = []
const hide = antd.message.loading('加載中...');
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'cart',
action: 'r_cart'
})
});
hide();
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.cart_list = data.res.cart_list
}
}
},
}
})
</script>
<?php get_footer('food'); ?>