parent
b60a3b22b6
commit
60054a53ff
@ -1,217 +1,217 @@
|
||||
<template>
|
||||
<!-- Header Start -->
|
||||
<header class="header">
|
||||
<div class="logo-wrap">
|
||||
<i class="icon-arrow-left-bold-box icli" @click="$router.go(-1)"></i>
|
||||
<h1 class="title-color font-md">購物車
|
||||
<span class="font-sm content-color">({{cartStore.cartNum}} 樣商品)</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="avatar-wrap" @click="$router.push('/home')">
|
||||
<i class="icon-home icli"></i>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Header End -->
|
||||
|
||||
<!-- Main Start -->
|
||||
<main class="main-wrap payment-page cart-page mb-xxl">
|
||||
<template v-if="cartStore.cartNum > 0">
|
||||
<!-- Cart Item Section Start -->
|
||||
<div class="cart-item-wrap pt-0">
|
||||
<div class="swipe-to-show"
|
||||
:class="{active : activeItem == item.rec_id }"
|
||||
v-for="item in items" :key="item.rec_id"
|
||||
v-swipeleft="(event) => handleSwipeLeft(event,item)"
|
||||
v-swiperight="(event) => handleSwipeRight(event,item)"
|
||||
>
|
||||
<div class="product-list media">
|
||||
<a href="javascript:void(0);">
|
||||
<img :src="`https://shop.h888.fun/${item.goods_thumb}`" alt="offer" />
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<a href="javascript:void(0)" class="font-md"> {{item.goods_name}} </a>
|
||||
<!-- <span class="content-color font-xs">年費</span> -->
|
||||
<span class="price-color font-md">${{item.goods_price}}</span>
|
||||
<div class="plus-minus" v-if="item.buymax != 1">
|
||||
<i class="icon-minus" @click="changeItemNum(item,-1)"></i>
|
||||
<input type="number" v-model="item.goods_number" @blur="changeInputNum(item,item.goods_number)"/>
|
||||
<i class="icon-add" @click="changeItemNum(item,1)" v-if="item.goods_number < item.buymax"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Header Start -->
|
||||
<header class="header">
|
||||
<div class="logo-wrap">
|
||||
<i class="icon-arrow-left-bold-box icli" @click="$router.go(-1)"></i>
|
||||
<h1 class="title-color font-md">
|
||||
購物車
|
||||
<span class="font-sm content-color">({{ cartStore.cartNum }} 樣商品)</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="delete-button" data-bs-toggle="offcanvas" data-bs-target="#confirmation"
|
||||
aria-controls="confirmation" @click="handleDeleteItem(item.rec_id)">
|
||||
<i class="icon-trash icli"></i>
|
||||
<div class="avatar-wrap" @click="$router.push('/home')">
|
||||
<i class="icon-home icli"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Cart Item Section End -->
|
||||
|
||||
<!-- Order Detail Start -->
|
||||
<section class="order-detail">
|
||||
<h3 class="title-2">訂單詳細</h3>
|
||||
<!-- Product Detail Start -->
|
||||
<ul>
|
||||
<li>
|
||||
<span>金額</span>
|
||||
<span>${{ detail.sum }}</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span>折扣</span>
|
||||
<span class="font-theme">-${{ detail.discount }}</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span>運費</span>
|
||||
<span>${{ detail.shipping }}</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span>總金額</span>
|
||||
<span>${{ detail.total }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Product Detail End -->
|
||||
</section>
|
||||
<!-- Order Detail End -->
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="nocart-content">
|
||||
<div><i class="icon-cart"></i></div>
|
||||
<div>購物車還是空的</div>
|
||||
</div>
|
||||
</template>
|
||||
</main>
|
||||
<!-- Main End -->
|
||||
|
||||
<!-- Footer Start -->
|
||||
<footer class="footer-wrap footer-button">
|
||||
<a href="javascript:void(0)" class="font-md" v-if="cartStore.cartNum > 0" @click="goCheckOut">去結帳</a>
|
||||
<router-link to="/category" class="font-md" v-else>馬上逛逛</router-link>
|
||||
</footer>
|
||||
<!-- Footer End -->
|
||||
|
||||
</header>
|
||||
|
||||
<!-- Header End -->
|
||||
|
||||
<!-- Main Start -->
|
||||
<main class="main-wrap payment-page cart-page mb-xxl">
|
||||
<template v-if="cartStore.cartNum > 0">
|
||||
<!-- Cart Item Section Start -->
|
||||
<div class="cart-item-wrap pt-0">
|
||||
<div
|
||||
class="swipe-to-show"
|
||||
:class="{ active: activeItem == item.rec_id }"
|
||||
v-for="item in items"
|
||||
:key="item.rec_id"
|
||||
v-swipeleft="(event) => handleSwipeLeft(event, item)"
|
||||
v-swiperight="(event) => handleSwipeRight(event, item)"
|
||||
>
|
||||
<div class="product-list media">
|
||||
<a href="javascript:void(0);">
|
||||
<img :src="`https://shop.h888.fun/${item.goods_thumb}`" alt="offer" />
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<a href="javascript:void(0)" class="font-md"> {{ item.goods_name }} </a>
|
||||
<!-- <span class="content-color font-xs">年費</span> -->
|
||||
<span class="price-color font-md">${{ item.goods_price }}</span>
|
||||
<div class="plus-minus" v-if="item.buymax != 1">
|
||||
<i class="icon-minus" @click="changeItemNum(item, -1)"></i>
|
||||
<input
|
||||
type="number"
|
||||
v-model="item.goods_number"
|
||||
@blur="changeInputNum(item, item.goods_number)"
|
||||
/>
|
||||
<i
|
||||
class="icon-add"
|
||||
@click="changeItemNum(item, 1)"
|
||||
v-if="item.buymax == 0 || item.goods_number < item.buymax"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="delete-button"
|
||||
data-bs-toggle="offcanvas"
|
||||
data-bs-target="#confirmation"
|
||||
aria-controls="confirmation"
|
||||
@click="handleDeleteItem(item.rec_id)"
|
||||
>
|
||||
<i class="icon-trash icli"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Cart Item Section End -->
|
||||
|
||||
<!-- Order Detail Start -->
|
||||
<section class="order-detail">
|
||||
<!-- Product Detail Start -->
|
||||
<div>金額小計:</div>
|
||||
<div>${{ detail.total }}</div>
|
||||
<!-- Product Detail End -->
|
||||
</section>
|
||||
<!-- Order Detail End -->
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="nocart-content">
|
||||
<div><i class="icon-cart"></i></div>
|
||||
<div>購物車還是空的</div>
|
||||
</div>
|
||||
</template>
|
||||
</main>
|
||||
<!-- Main End -->
|
||||
|
||||
<!-- Footer Start -->
|
||||
<footer class="footer-wrap footer-button">
|
||||
<a href="javascript:void(0)" class="font-md" v-if="cartStore.cartNum > 0" @click="goCheckOut">去結帳</a>
|
||||
<router-link to="/category" class="font-md" v-else>馬上逛逛</router-link>
|
||||
</footer>
|
||||
<!-- Footer End -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import _ from 'lodash'
|
||||
import { ref , computed } from 'vue'
|
||||
import { showToast, showConfirmDialog } from 'vant'
|
||||
import { useCartStore } from '@/store/Cart'
|
||||
import _ from "lodash";
|
||||
import { ref, computed } from "vue";
|
||||
import { showToast, showConfirmDialog } from "vant";
|
||||
import { useCartStore } from "@/store/Cart";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
import { checkLogin } from '@/services/auth'
|
||||
import router from '@/router';
|
||||
import { checkLogin } from "@/services/auth";
|
||||
import router from "@/router";
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
const cartStore = useCartStore()
|
||||
const cartStore = useCartStore();
|
||||
|
||||
const { cartItems: items } = storeToRefs(cartStore);
|
||||
|
||||
const activeItem = ref(0)
|
||||
const activeItem = ref(0);
|
||||
|
||||
const handleSwipeLeft = (event,item)=>{
|
||||
activeItem.value = item.rec_id
|
||||
}
|
||||
const handleSwipeLeft = (event, item) => {
|
||||
activeItem.value = item.rec_id;
|
||||
};
|
||||
|
||||
const handleSwipeRight = (event,item)=>{
|
||||
activeItem.value = 0
|
||||
}
|
||||
const handleSwipeRight = (event, item) => {
|
||||
activeItem.value = 0;
|
||||
};
|
||||
|
||||
const handleDeleteItem = async (id)=>{
|
||||
cartStore.delCart(id)
|
||||
}
|
||||
const handleDeleteItem = async (id) => {
|
||||
cartStore.delCart(id);
|
||||
};
|
||||
|
||||
const changeItemNum = (item,num)=>{
|
||||
if(item.goods_number + num <= 0){
|
||||
cartStore.delCart(item.rec_id)
|
||||
}else{
|
||||
cartStore.updateCart(item,item.goods_number + num)
|
||||
}
|
||||
}
|
||||
const changeItemNum = (item, num) => {
|
||||
if (item.goods_number + num <= 0) {
|
||||
cartStore.delCart(item.rec_id);
|
||||
} else {
|
||||
cartStore.updateCart(item, item.goods_number + num);
|
||||
}
|
||||
};
|
||||
|
||||
const changeInputNum = (item,num)=>{
|
||||
if(num <= 0){
|
||||
cartStore.delCart(item.rec_id)
|
||||
}else{
|
||||
cartStore.updateCart(item,num)
|
||||
}
|
||||
}
|
||||
const changeInputNum = (item, num) => {
|
||||
if (num <= 0) {
|
||||
cartStore.delCart(item.rec_id);
|
||||
} else {
|
||||
cartStore.updateCart(item, num);
|
||||
}
|
||||
};
|
||||
|
||||
// 計算訂單詳細
|
||||
const detail = computed(()=>{
|
||||
|
||||
let sum = items.value.reduce((accumulator,value)=>{
|
||||
return accumulator + (value.goods_price * value.goods_number)
|
||||
},0)
|
||||
|
||||
let discount = 0
|
||||
|
||||
let shipping = 0
|
||||
|
||||
let total = sum - discount + shipping
|
||||
|
||||
return {sum, discount, shipping, total }
|
||||
})
|
||||
|
||||
const goCheckOut = async ()=>{
|
||||
let res = await checkLogin()
|
||||
if(res.code !== 200){
|
||||
return showToast('操作失敗')
|
||||
}
|
||||
if(res.data === true){
|
||||
router.push('/checkout')
|
||||
}else{
|
||||
showConfirmDialog({
|
||||
title: '是否先登入會員',
|
||||
message:
|
||||
'您目前尚未登入會員，是否先登入會員',
|
||||
confirmButtonText: '登入會員',
|
||||
cancelButtonText: '暱名購買'
|
||||
})
|
||||
.then(() => {
|
||||
router.push('/login')
|
||||
})
|
||||
.catch(() => {
|
||||
router.push('/checkout')
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const detail = computed(() => {
|
||||
let sum = items.value.reduce((accumulator, value) => {
|
||||
return accumulator + value.goods_price * value.goods_number;
|
||||
}, 0);
|
||||
|
||||
let discount = 0;
|
||||
|
||||
let shipping = 0;
|
||||
|
||||
let total = sum - discount + shipping;
|
||||
|
||||
return { sum, discount, shipping, total };
|
||||
});
|
||||
|
||||
const goCheckOut = async () => {
|
||||
if (Cookies.get("token")) {
|
||||
router.push("/checkout");
|
||||
} else {
|
||||
showConfirmDialog({
|
||||
title: "是否先登入會員",
|
||||
message: "您目前尚未登入會員，是否先登入會員",
|
||||
confirmButtonText: "登入會員",
|
||||
cancelButtonText: "暱名購買",
|
||||
})
|
||||
.then(() => {
|
||||
router.push("/login");
|
||||
})
|
||||
.catch(() => {
|
||||
router.push("/checkout");
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cart-item-wrap {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.delete-button {
|
||||
i {
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.delete-button{
|
||||
i{
|
||||
|
||||
.plus-minus {
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.plus-minus{
|
||||
font-size: 20px;
|
||||
.price-color {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.price-color{
|
||||
color: red;
|
||||
.nocart-content {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
div:nth-child(1) {
|
||||
i {
|
||||
font-size: 200px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
div:nth-child(2) {
|
||||
font-size: 18px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.nocart-content{
|
||||
text-align: center;
|
||||
color: #666;
|
||||
div:nth-child(1){
|
||||
i{
|
||||
font-size: 200px;
|
||||
color: #666;
|
||||
.order-detail {
|
||||
display: flex;
|
||||
|
||||
div:nth-child(1) {
|
||||
width: 100px;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
div:nth-child(2){
|
||||
font-size: 18px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue