|
|
|
@ -1,305 +1,463 @@
|
|
|
|
<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')">
|
|
|
|
</div>
|
|
|
|
<i class="icon-home icli"></i>
|
|
|
|
<div class="avatar-wrap" @click="$router.push('/home')">
|
|
|
|
</div>
|
|
|
|
<i class="icon-home icli"></i>
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Header End -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Main Start -->
|
|
|
|
|
|
|
|
<main class="main-wrap payment-page cart-page mb-xxl">
|
|
|
|
|
|
|
|
<div class="cartitem-list">
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
訂單詳細
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<van-button type="success" size="mini" @click="$router.push('/cart')">修改</van-button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Cart Item Section Start -->
|
|
|
|
|
|
|
|
<div class="cart-item-wrap pt-0">
|
|
|
|
|
|
|
|
<div class="swipe-to-show" v-for="item in items" :key="item.rec_id">
|
|
|
|
|
|
|
|
<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="product.html" class="font-sm"> {{ item.goods_name }} </a>
|
|
|
|
|
|
|
|
<span class="price-color font-sm">${{ item.goods_price }}</span>
|
|
|
|
|
|
|
|
<div class="plus-minus">
|
|
|
|
|
|
|
|
X {{ item.goods_number }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Cart Item Section End -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Address Section Start -->
|
|
|
|
<!-- Header End -->
|
|
|
|
|
|
|
|
|
|
|
|
<div class="address-block">
|
|
|
|
<!-- Main Start -->
|
|
|
|
<div>
|
|
|
|
<main class="main-wrap payment-page cart-page mb-xxl">
|
|
|
|
<div>
|
|
|
|
<div class="cartitem-list">
|
|
|
|
收貨人: wayne
|
|
|
|
<div>訂單詳細</div>
|
|
|
|
|
|
|
|
<div></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<!-- Cart Item Section Start -->
|
|
|
|
收貨地址: 台北市
|
|
|
|
<div class="cart-item-wrap pt-0">
|
|
|
|
|
|
|
|
<div class="swipe-to-show" v-for="item in items" :key="item.rec_id">
|
|
|
|
|
|
|
|
<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="product.html" class="font-sm"> {{ item.goods_name }} </a>
|
|
|
|
|
|
|
|
<span class="price-color font-sm">${{ item.goods_price }}</span>
|
|
|
|
|
|
|
|
<div class="plus-minus">X {{ item.goods_number }}</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Cart Item Section End -->
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<van-button type="success" size="mini" @click="$router.replace('/address')">修改</van-button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Address Section End -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <button class="d-block btn-outline-grey" data-bs-toggle="offcanvas" data-bs-target="#add-card"
|
|
|
|
<!-- <button class="d-block btn-outline-grey" data-bs-toggle="offcanvas" data-bs-target="#add-card"
|
|
|
|
aria-controls="add-card">+ Add New Card</button> -->
|
|
|
|
aria-controls="add-card">+ Add New Card</button> -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Payment Section Start -->
|
|
|
|
<!-- Payment Section Start -->
|
|
|
|
<section class="payment-section">
|
|
|
|
<section class="payment-section">
|
|
|
|
<!-- Payment Method Accordian Start -->
|
|
|
|
<!-- Payment Method Accordian Start -->
|
|
|
|
<div class="accordion" id="accordionExample">
|
|
|
|
<div class="accordion" id="accordionShipping">
|
|
|
|
<!-- Accordion Start -->
|
|
|
|
<!-- Accordion Start -->
|
|
|
|
<div class="accordion-item">
|
|
|
|
<div class="accordion-item">
|
|
|
|
<h2 class="accordion-header" id="headingTwo">
|
|
|
|
<h2 class="accordion-header" id="headingTwo">
|
|
|
|
<button class="accordion-button font-md title-color" type="button" data-bs-toggle="collapse"
|
|
|
|
<button
|
|
|
|
data-bs-target="#shipping" aria-expanded="false" aria-controls="shipping">
|
|
|
|
class="accordion-button font-md title-color"
|
|
|
|
配送方式
|
|
|
|
type="button"
|
|
|
|
</button>
|
|
|
|
data-bs-toggle="collapse"
|
|
|
|
</h2>
|
|
|
|
aria-expanded="true"
|
|
|
|
<div id="shipping" class="accordion-collapse collapse show" aria-labelledby="headingTwo"
|
|
|
|
data-bs-target="#shipping"
|
|
|
|
data-bs-parent="#accordionExample">
|
|
|
|
aria-controls="shipping"
|
|
|
|
<div class="accordion-body net-banking">
|
|
|
|
>
|
|
|
|
<div class="row">
|
|
|
|
配送方式
|
|
|
|
|
|
|
|
</button>
|
|
|
|
<!-- Shipping Option Start -->
|
|
|
|
</h2>
|
|
|
|
<div class="input-box col-6" v-for="(v, index) in shippingList" :key="index">
|
|
|
|
<div
|
|
|
|
<input type="radio" name="shipping" id="jpm-moro" :value="index" v-model="order.shipping" />
|
|
|
|
id="shipping"
|
|
|
|
<label class="form-check-label" for="jpm-moro">{{ v.shipping_name }}</label>
|
|
|
|
class="accordion-collapse collapse show"
|
|
|
|
|
|
|
|
aria-labelledby="headingOne"
|
|
|
|
|
|
|
|
data-bs-parent="#accordionShipping"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div class="accordion-body">
|
|
|
|
|
|
|
|
<ul class="filter-row">
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
|
|
|
class="filter-col"
|
|
|
|
|
|
|
|
:class="{ active: shippingData.shipping_code === v.shipping_code }"
|
|
|
|
|
|
|
|
@click="selectShipping(v)"
|
|
|
|
|
|
|
|
v-for="(v, index) in shippingList"
|
|
|
|
|
|
|
|
:key="index"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
{{ v.shipping_name }}
|
|
|
|
|
|
|
|
<span class="check"><img src="@/assets/icons/svg/active.svg" alt="active" /></span>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div v-show="showExtra" class="shipping-data">
|
|
|
|
|
|
|
|
<template v-if="shippingData.shipping_code == 'shipping'">
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
<li>收件人：{{ shippingData.extra_data.consignee }}</li>
|
|
|
|
|
|
|
|
<li>地 址：{{ shippingData.extra_data.address }}</li>
|
|
|
|
|
|
|
|
<li>電 話：{{ shippingData.extra_data.tel }}</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<template v-else-if="shippingData.shipping_code == 'ecpay'">
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<ul v-if="shippingData.extra_data.type">
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
|
|
店 名：{{
|
|
|
|
|
|
|
|
logisticType[shippingData.extra_data.type] +
|
|
|
|
|
|
|
|
" " +
|
|
|
|
|
|
|
|
shippingData.extra_data.store_name
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>地 址：{{ shippingData.extra_data.store_address }}</li>
|
|
|
|
|
|
|
|
<li>電 話：{{ shippingData.extra_data.store_tel }}</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<van-button type="success" size="mini" @click="changeShipping">修改</van-button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Shipping Option End -->
|
|
|
|
<!-- Accordion End -->
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="accordion" id="accordionExample">
|
|
|
|
</div>
|
|
|
|
<!-- Accordion Start -->
|
|
|
|
<!-- Accordion End -->
|
|
|
|
<div class="accordion-item">
|
|
|
|
|
|
|
|
<h2 class="accordion-header" id="headingOne">
|
|
|
|
<!-- Accordion Start -->
|
|
|
|
<button
|
|
|
|
<div class="accordion-item">
|
|
|
|
class="accordion-button font-md title-color"
|
|
|
|
<h2 class="accordion-header" id="headingOne">
|
|
|
|
type="button"
|
|
|
|
<button class="accordion-button font-md title-color" type="button" data-bs-toggle="collapse"
|
|
|
|
data-bs-toggle="collapse"
|
|
|
|
data-bs-target="#payment" aria-expanded="true" aria-controls="payment">
|
|
|
|
data-bs-target="#payment"
|
|
|
|
支付方式
|
|
|
|
aria-expanded="true"
|
|
|
|
</button>
|
|
|
|
aria-controls="payment"
|
|
|
|
</h2>
|
|
|
|
>
|
|
|
|
<div id="payment" class="accordion-collapse collapse show" aria-labelledby="headingOne"
|
|
|
|
支付方式
|
|
|
|
data-bs-parent="#accordionExample">
|
|
|
|
</button>
|
|
|
|
<div class="accordion-body">
|
|
|
|
</h2>
|
|
|
|
<ul class="filter-row">
|
|
|
|
<div
|
|
|
|
<li class="filter-col" :class="{ active: order.payment === v.pay_id }" @click="selectPayment(v.pay_id)"
|
|
|
|
id="payment"
|
|
|
|
v-for="(v, index) in paymentList" :key="index">
|
|
|
|
class="accordion-collapse collapse show"
|
|
|
|
<img class="payment-card" :src="v.logo" :alt="v.pay_name" />
|
|
|
|
aria-labelledby="headingOne"
|
|
|
|
{{ v.pay_name }}
|
|
|
|
data-bs-parent="#accordionExample"
|
|
|
|
<span class="check"><img src="@/assets/icons/svg/active.svg" alt="active" /></span>
|
|
|
|
>
|
|
|
|
</li>
|
|
|
|
<div class="accordion-body">
|
|
|
|
</ul>
|
|
|
|
<ul class="filter-row">
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
|
|
|
class="filter-col"
|
|
|
|
|
|
|
|
:class="{ active: orderStore.payment.pay_code === 'cod' }"
|
|
|
|
|
|
|
|
v-if="orderStore.shipping.shipping_code === 'ecpay'"
|
|
|
|
|
|
|
|
@click="selectPayment({ pay_id: 0, pay_code: 'cod', pay_name: '貨到付款' })"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
貨到付款
|
|
|
|
|
|
|
|
<span class="check"><img src="@/assets/icons/svg/active.svg" alt="active" /></span>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li
|
|
|
|
|
|
|
|
class="filter-col"
|
|
|
|
|
|
|
|
:class="{ active: orderStore.payment.pay_code === v.pay_code }"
|
|
|
|
|
|
|
|
@click="selectPayment(v)"
|
|
|
|
|
|
|
|
v-for="(v, index) in paymentList"
|
|
|
|
|
|
|
|
:key="index"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<img class="payment-card" :src="v.logo" :alt="v.pay_name" />
|
|
|
|
|
|
|
|
{{ v.pay_name }}
|
|
|
|
|
|
|
|
<span class="check"><img src="@/assets/icons/svg/active.svg" alt="active" /></span>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Accordion End -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Payment Method Accordian End -->
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- Accordion End -->
|
|
|
|
<!-- Payment Section End -->
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Payment Method Accordian End -->
|
|
|
|
<!-- Order Detail Start -->
|
|
|
|
</section>
|
|
|
|
<section class="order-detail">
|
|
|
|
<!-- Payment Section End -->
|
|
|
|
<h3 class="title-2">訂單詳細</h3>
|
|
|
|
|
|
|
|
<!-- Product Detail Start -->
|
|
|
|
<!-- Order Detail Start -->
|
|
|
|
<ul>
|
|
|
|
<section class="order-detail">
|
|
|
|
<li>
|
|
|
|
<h3 class="title-2">訂單詳細</h3>
|
|
|
|
<span>金額</span>
|
|
|
|
<!-- Product Detail Start -->
|
|
|
|
<span>${{ detail.sum_amount }}</span>
|
|
|
|
<ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<li>
|
|
|
|
<span>金額</span>
|
|
|
|
<span>折扣</span>
|
|
|
|
<span>${{ detail.sum }}</span>
|
|
|
|
<span class="font-theme">-${{ detail.discount }}</span>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<!-- <li>
|
|
|
|
<li>
|
|
|
|
|
|
|
|
<span>折扣</span>
|
|
|
|
|
|
|
|
<span class="font-theme">-${{ detail.discount }}</span>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<!-- <li>
|
|
|
|
|
|
|
|
<span>折價卷</span>
|
|
|
|
<span>折價卷</span>
|
|
|
|
<a href="javascript:void(0);" class="font-danger">Apply Coupon</a>
|
|
|
|
<a href="javascript:void(0);" class="font-danger">Apply Coupon</a>
|
|
|
|
</li> -->
|
|
|
|
</li> -->
|
|
|
|
|
|
|
|
<li v-show="detail.pay_fee > 0">
|
|
|
|
|
|
|
|
<span>金流手續費</span>
|
|
|
|
|
|
|
|
<span>{{ detail.pay_fee }}</span>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li v-show="detail.shipping_fee > 0">
|
|
|
|
|
|
|
|
<span>運費</span>
|
|
|
|
|
|
|
|
<span>{{ detail.shipping_fee }}</span>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
<li>
|
|
|
|
<span>運費</span>
|
|
|
|
<span>總金額</span>
|
|
|
|
<span>{{ detail.shipping }}</span>
|
|
|
|
<span>${{ detail.total_amount }}</span>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
<li>
|
|
|
|
<!-- Product Detail End -->
|
|
|
|
<span>總金額</span>
|
|
|
|
</section>
|
|
|
|
<span>${{ detail.total }}</span>
|
|
|
|
<!-- Order Detail End -->
|
|
|
|
</li>
|
|
|
|
</main>
|
|
|
|
</ul>
|
|
|
|
<!-- Main End -->
|
|
|
|
<!-- Product Detail End -->
|
|
|
|
<!-- Footer Start -->
|
|
|
|
</section>
|
|
|
|
<footer class="footer-wrap footer-button">
|
|
|
|
<!-- Order Detail End -->
|
|
|
|
<a href="javascript:void(0);" class="font-md" @click="handleFinish">完成訂單</a>
|
|
|
|
</main>
|
|
|
|
</footer>
|
|
|
|
<!-- Main End -->
|
|
|
|
<!-- Footer End -->
|
|
|
|
<!-- Footer Start -->
|
|
|
|
|
|
|
|
<footer class="footer-wrap footer-button">
|
|
|
|
|
|
|
|
<a href="javascript:void(0);" class="font-md" @click="handleFinish">完成訂單</a>
|
|
|
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
<!-- Footer End -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
<script setup>
|
|
|
|
import _ from 'lodash'
|
|
|
|
import _ from "lodash";
|
|
|
|
import { ref, reactive, onMounted, computed } from 'vue'
|
|
|
|
import { ref, reactive, onMounted, computed } from "vue";
|
|
|
|
import { useCartStore } from '@/store/Cart'
|
|
|
|
import { useCartStore } from "@/store/Cart";
|
|
|
|
|
|
|
|
import { useOrderStore } from "@/store/Order";
|
|
|
|
import { storeToRefs } from "pinia";
|
|
|
|
import { storeToRefs } from "pinia";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import { showToast } from "vant";
|
|
|
|
|
|
|
|
|
|
|
|
import { showToast } from 'vant'
|
|
|
|
import { addOrder } from "@/services/order";
|
|
|
|
|
|
|
|
|
|
|
|
import { addOrder } from '@/services/order'
|
|
|
|
|
|
|
|
import { getPayments } from '@/services/payment'
|
|
|
|
|
|
|
|
import { getShippings } from '@/services/shipping'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import router from '@/router';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import linepayicon from '/src/assets/icons/png/linepay.png'
|
|
|
|
import { getPayments } from "@/services/payment";
|
|
|
|
import mastericon from '/src/assets/icons/png/mastercard1.png'
|
|
|
|
import { getShippings, getUserDefaultCvs } from "@/services/shipping";
|
|
|
|
|
|
|
|
import { getUserDefaultAddress } from "@/services/user";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import router from "@/router";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import linepayicon from "/src/assets/icons/png/linepay.png";
|
|
|
|
|
|
|
|
import mastericon from "/src/assets/icons/png/mastercard1.png";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const cartStore = useCartStore();
|
|
|
|
|
|
|
|
const orderStore = useOrderStore();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { goodsItems: items } = storeToRefs(orderStore);
|
|
|
|
const cartStore = useCartStore()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { cartItems: items } = storeToRefs(cartStore);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const order = reactive({
|
|
|
|
const order = reactive({
|
|
|
|
payment: 0,
|
|
|
|
payment: 0,
|
|
|
|
shipping: 0,
|
|
|
|
shipping: 0,
|
|
|
|
goods: []
|
|
|
|
goods: [],
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
const paymentList = ref([])
|
|
|
|
const paymentList = ref([]);
|
|
|
|
|
|
|
|
|
|
|
|
const shippingList = ref([])
|
|
|
|
const shippingList = ref([]);
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(async()=>{
|
|
|
|
const logisticType = {
|
|
|
|
let res1 = await getPayments()
|
|
|
|
1: "711",
|
|
|
|
if(res1.code === 200){
|
|
|
|
2: "全家",
|
|
|
|
paymentList.value = res1.data
|
|
|
|
3: "萊爾富",
|
|
|
|
}
|
|
|
|
4: "OK",
|
|
|
|
let res2 = await getShippings()
|
|
|
|
};
|
|
|
|
if(res2.code === 200){
|
|
|
|
|
|
|
|
shippingList.value = res2.data
|
|
|
|
onMounted(async () => {
|
|
|
|
}
|
|
|
|
cartToOrder();
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
let res1 = await getPayments();
|
|
|
|
|
|
|
|
if (res1.code === 200) {
|
|
|
|
|
|
|
|
paymentList.value = res1.data;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let res2 = await getShippings();
|
|
|
|
|
|
|
|
if (res2.code === 200) {
|
|
|
|
|
|
|
|
shippingList.value = res2.data;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//將購物車商品資料轉換成訂單商品資料
|
|
|
|
|
|
|
|
const cartToOrder = () => {
|
|
|
|
|
|
|
|
orderStore.goodsItems = cartStore.cartItems;
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 物流
|
|
|
|
|
|
|
|
const selectShipping = async (value) => {
|
|
|
|
|
|
|
|
if (shippingData.value.shipping_code === value.shipping_code) return;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
switch (value.shipping_code) {
|
|
|
|
|
|
|
|
case "shipping":
|
|
|
|
|
|
|
|
let resAddr = await getUserDefaultAddress();
|
|
|
|
|
|
|
|
if (resAddr.code === 200) {
|
|
|
|
|
|
|
|
orderStore.shipping = {
|
|
|
|
|
|
|
|
shipping_code: value.shipping_code,
|
|
|
|
|
|
|
|
shipping_id: value.shipping_id,
|
|
|
|
|
|
|
|
shipping_fee: 0,
|
|
|
|
|
|
|
|
extra_data: {
|
|
|
|
|
|
|
|
address: resAddr.data.address,
|
|
|
|
|
|
|
|
consignee: resAddr.data.consignee,
|
|
|
|
|
|
|
|
tel: resAddr.data.tel,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
orderStore.shipping = {
|
|
|
|
|
|
|
|
shipping_code: value.shipping_code,
|
|
|
|
|
|
|
|
shipping_id: value.shipping_id,
|
|
|
|
|
|
|
|
shipping_fee: 0,
|
|
|
|
|
|
|
|
extra_data: {},
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
router.push("/address?from=order");
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
case "ecpay":
|
|
|
|
|
|
|
|
let res = await getUserDefaultCvs();
|
|
|
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
|
|
|
orderStore.shipping = {
|
|
|
|
|
|
|
|
shipping_code: value.shipping_code,
|
|
|
|
|
|
|
|
shipping_id: value.shipping_id,
|
|
|
|
|
|
|
|
shipping_fee: 0,
|
|
|
|
|
|
|
|
extra_data: {
|
|
|
|
|
|
|
|
type: res.data.type,
|
|
|
|
|
|
|
|
store_id: res.data.store_id,
|
|
|
|
|
|
|
|
store_name: res.data.store_name,
|
|
|
|
|
|
|
|
store_address: res.data.store_address,
|
|
|
|
|
|
|
|
store_tel: res.data.store_tel,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
orderStore.shipping = {
|
|
|
|
|
|
|
|
shipping_code: value.shipping_code,
|
|
|
|
|
|
|
|
shipping_id: value.shipping_id,
|
|
|
|
|
|
|
|
shipping_fee: 0,
|
|
|
|
|
|
|
|
extra_data: {},
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
router.push("/order/shipping");
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
default:
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const changeShipping = () => {
|
|
|
|
|
|
|
|
switch (shippingData.value.shipping_code) {
|
|
|
|
|
|
|
|
case "ecpay":
|
|
|
|
|
|
|
|
router.push("/order/shipping");
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
case "shipping":
|
|
|
|
|
|
|
|
router.push("/address?from=order");
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
default:
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const shippingData = computed(() => {
|
|
|
|
|
|
|
|
return orderStore.shipping;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 顯示物流額外資訊
|
|
|
|
|
|
|
|
const showExtra = computed(() => {
|
|
|
|
|
|
|
|
let is_empty = _.isEmpty(orderStore.shipping.extra_data);
|
|
|
|
|
|
|
|
if (is_empty) {
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 金流
|
|
|
|
const selectPayment = (value) => {
|
|
|
|
const selectPayment = (value) => {
|
|
|
|
order.payment = value
|
|
|
|
orderStore.payment = {
|
|
|
|
}
|
|
|
|
pay_code: value.pay_code,
|
|
|
|
|
|
|
|
pay_id: value.pay_id,
|
|
|
|
|
|
|
|
pay_fee: 0,
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
//完成訂單
|
|
|
|
//完成訂單
|
|
|
|
const handleFinish = async () => {
|
|
|
|
const handleFinish = async () => {
|
|
|
|
order.goods = items.value
|
|
|
|
let order = orderStore.$state;
|
|
|
|
|
|
|
|
order = { ...order, goods_amount: orderStore.sum_amount, order_amount: orderStore.total_amount };
|
|
|
|
let res = await addOrder(order)
|
|
|
|
let res = await addOrder(order);
|
|
|
|
|
|
|
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
if (res.code === 200) {
|
|
|
|
// 清空購物車
|
|
|
|
// 清空購物車
|
|
|
|
cartStore.clearCart()
|
|
|
|
cartStore.clearCart();
|
|
|
|
// window.location.href = res.data.info.paymentUrl.web
|
|
|
|
// window.location.href = res.data.info.paymentUrl.web
|
|
|
|
// console.log('resdata',res.data)
|
|
|
|
// console.log('resdata',res.data)
|
|
|
|
return router.replace({
|
|
|
|
return router.replace({
|
|
|
|
name: 'Payment',
|
|
|
|
name: "Payment",
|
|
|
|
query: {
|
|
|
|
query: {
|
|
|
|
order_sn: res.data.order_sn,
|
|
|
|
order_sn: res.data.order_sn,
|
|
|
|
pay_code: res.data.pay_code
|
|
|
|
pay_code: res.data.pay_code,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return showToast("操作失敗");
|
|
|
|
return showToast('操作失敗')
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 計算訂單詳細
|
|
|
|
// 計算訂單詳細
|
|
|
|
const detail = computed(() => {
|
|
|
|
const detail = computed(() => {
|
|
|
|
|
|
|
|
let sum_amount = orderStore.sum_amount;
|
|
|
|
let sum = items.value.reduce((accumulator, value) => {
|
|
|
|
let discount = orderStore.discount;
|
|
|
|
return accumulator + (value.goods_price * value.goods_number)
|
|
|
|
let shipping_fee = orderStore.shipping.shipping_fee;
|
|
|
|
}, 0)
|
|
|
|
let pay_fee = orderStore.payment.pay_fee;
|
|
|
|
|
|
|
|
let total_amount = orderStore.total_amount;
|
|
|
|
let discount = 0
|
|
|
|
return { sum_amount, discount, shipping_fee, pay_fee, total_amount };
|
|
|
|
|
|
|
|
});
|
|
|
|
let shipping = 0
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let total = sum - discount + shipping
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return { sum, discount, shipping, total }
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
.cart-item-wrap {
|
|
|
|
.cart-item-wrap {
|
|
|
|
margin-bottom: 20px;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.delete-button {
|
|
|
|
.delete-button {
|
|
|
|
i {
|
|
|
|
i {
|
|
|
|
font-size: 20px;
|
|
|
|
font-size: 20px;
|
|
|
|
color: #FFFFFF;
|
|
|
|
color: #ffffff;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.cartitem-list {
|
|
|
|
.cartitem-list {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
border: 1px #cacaca solid;
|
|
|
|
border: 1px #cacaca solid;
|
|
|
|
border-radius: 5px;
|
|
|
|
border-radius: 5px;
|
|
|
|
height: 45px;
|
|
|
|
height: 45px;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
div:nth-child(1) {
|
|
|
|
div:nth-child(1) {
|
|
|
|
color: red;
|
|
|
|
color: red;
|
|
|
|
padding-left: 10px;
|
|
|
|
padding-left: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
div:nth-child(2) {
|
|
|
|
div:nth-child(2) {
|
|
|
|
padding-right: 10px;
|
|
|
|
padding-right: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.price-color {
|
|
|
|
.price-color {
|
|
|
|
color: red;
|
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.filter-row {
|
|
|
|
.filter-row {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
justify-content: space-around;
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
|
|
|
|
|
|
.filter-col {
|
|
|
|
.filter-col {
|
|
|
|
width: 40%;
|
|
|
|
width: 40%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
// 物流
|
|
|
|
|
|
|
|
.shipping-data {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
padding: 10px 15px;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
div:nth-child(1) {
|
|
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
// padding: 10px 0;
|
|
|
|
|
|
|
|
// border-bottom: 1px #cacaca solid;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
div:nth-child(2) {
|
|
|
|
|
|
|
|
width: 40px;
|
|
|
|
|
|
|
|
i {
|
|
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
|
|
color: #cacaca;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
