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