wayne
/
evshop_h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

載入時初始化store

Browse Source
h888
Wayne Hsu 3 years ago
parent b60a3b22b6
commit 60054a53ff
22 changed files with 760 additions and 413 deletions
Show Stats Download Patch File Download Diff File

2
.env.development
Unescape View File

@ -10,4 +10,4 @@ VITE_APP_SSO_DOMAIN = 'localhost'
# VITE_APP_BASE_URL = 'https://localhost'
VITE_APP_BASE_URL = 'https://localhost:5173'
VITE_APP_BASE_URL = 'http://localhost:5173'

2
package.json
Unescape View File

@ -19,6 +19,7 @@
"js-cookie": "^3.0.1",
"less": "^4.1.3",
"lodash": "^4.17.21",
"nprogress": "^0.2.0",
"pinia": "^2.0.28",
"postcss": "^8.4.20",
"uuid": "^9.0.0",
@ -38,6 +39,7 @@
"typescript": "^4.6.4",
"unplugin-vue-components": "^0.22.12",
"vite": "^3.2.3",
"vite-plugin-top-level-await": "^1.3.0",
"vue-tsc": "^1.0.9"
}
}

9
src/main.ts
Unescape View File

@ -3,7 +3,7 @@ import App from './App.vue'
import router from './router'
import store from './store'
import { initStore, initCart, initSession } from './utils/init'
import { initStore, initSession } from './utils/init'
// import 'amfe-flexible'
import 'vant/lib/index.css'
@ -34,9 +34,10 @@ app.directive('swiperight', {
app.use(router).use(store);
initSession()
initStore()
initCart()
initSession();
await initStore()
app.use(VueClipboard)
app.mount('#app')

103
src/pages/Cart/CartFinish.vue
Unescape View File

@ -3,14 +3,51 @@
<main class="main-wrap order-success-page mb-xxl">
<!-- Banner Section Start -->
<section class="banner-section">
<div class="banner-wrap">
<img src="@/assets/svg/order-success.svg" alt="order-success" />
</div>
<div class="content-wrap">
<h1 class="font-lg title-color">感謝您的購買</h1>
<p class="font-sm content-color">您的訂單已成功下達，您的訂單編號為#{{ order_sn }}</p>
</div>
<div v-if="paycode == 'eccvs'">
<div class="divTable greenTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">金流方式</div>
<div class="divTableCell">超商付款</div>
</div>
<div class="divTableRow">
<div class="divTableCell">超商代碼</div>
<div class="divTableCell">{{ $route.query.PaymentNo }}</div>
</div>
<div class="divTableRow">
<div class="divTableCell">繳費期限</div>
<div class="divTableCell">{{ $route.query.ExpireDate }}</div>
</div>
</div>
</div>
</div>
<div v-else-if="paycode == 'ecatm'">
<div class="divTable greenTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">金流方式</div>
<div class="divTableCell">ATM轉帳</div>
</div>
<div class="divTableRow">
<div class="divTableCell">銀行代碼</div>
<div class="divTableCell">{{ $route.query.BankCode }}</div>
</div>
<div class="divTableRow">
<div class="divTableCell">銀行帳號</div>
<div class="divTableCell">{{ $route.query.vAccount }}</div>
</div>
<div class="divTableRow">
<div class="divTableCell">繳費期限</div>
<div class="divTableCell">{{ $route.query.ExpireDate }}</div>
</div>
</div>
</div>
</div>
<div v-else></div>
</section>
<!-- Banner Section End -->
</main>
@ -26,6 +63,7 @@ import { useRoute } from "vue-router";
const route = useRoute();
const order_sn = route.query.order_sn;
const paycode = route.query.paycode;
onMounted(async () => {
if (order_sn) {
@ -38,4 +76,59 @@ onMounted(async () => {
});
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
div.greenTable {
font-family: Georgia, serif;
background-color: #d4eed1;
width: 100%;
text-align: center;
}
.divTable.greenTable .divTableCell,
.divTable.greenTable .divTableHead {
border: 1px solid #24943a;
padding: 3px 2px;
}
.divTable.greenTable .divTableBody .divTableCell {
font-size: 13px;
}
.greenTable .tableFootStyle {
font-size: 13px;
}
.greenTable .tableFootStyle .links {
text-align: right;
}
.greenTable .tableFootStyle .links a {
display: inline-block;
background: #ffffff;
color: #24943a;
padding: 2px 8px;
border-radius: 5px;
}
.greenTable.outerTableFooter {
border-top: none;
}
.greenTable.outerTableFooter .tableFootStyle {
padding: 3px 5px;
}
/* DivTable.com */
.divTable {
display: table;
}
.divTableRow {
display: table-row;
.divTableCell:nth-child(1) {
display: table-cell;
width: 150px;
font-weight: 600;
}
.divTableCell:nth-child(2) {
display: table-cell;
}
}
.divTableHeading {
display: table-header-group;
}
.divTableBody {
display: table-row-group;
}
</style>

3
src/pages/Cart/Checkout.vue
Unescape View File

@ -250,6 +250,7 @@ const logisticType = {
4: "OK",
};
onMounted(async () => {
cartToOrder();
@ -266,7 +267,7 @@ onMounted(async () => {
//將購物車商品資料轉換成訂單商品資料
const cartToOrder = () => {
orderStore.goodsItems = cartStore.cartItems;
items.value = cartStore.cartItems;
};
// 物流

148
src/pages/Cart/Index.vue
Unescape View File

@ -3,7 +3,8 @@
<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">購物車
<h1 class="title-color font-md">
購物車
<span class="font-sm content-color">({{ cartStore.cartNum }} 樣商品)</span>
</h1>
</div>
@ -19,9 +20,11 @@
<template v-if="cartStore.cartNum > 0">
<!-- Cart Item Section Start -->
<div class="cart-item-wrap pt-0">
<div class="swipe-to-show"
<div
class="swipe-to-show"
:class="{ active: activeItem == item.rec_id }"
v-for="item in items" :key="item.rec_id"
v-for="item in items"
:key="item.rec_id"
v-swipeleft="(event) => handleSwipeLeft(event, item)"
v-swiperight="(event) => handleSwipeRight(event, item)"
>
@ -35,13 +38,26 @@
<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>
<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)">
<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>
@ -50,29 +66,9 @@
<!-- 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>
<div>金額小計:</div>
<div>${{ detail.total }}</div>
<!-- Product Detail End -->
</section>
<!-- Order Detail End -->
@ -92,93 +88,86 @@
<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
}
activeItem.value = item.rec_id;
};
const handleSwipeRight = (event, item) => {
activeItem.value = 0
}
activeItem.value = 0;
};
const handleDeleteItem = async (id) => {
cartStore.delCart(id)
}
cartStore.delCart(id);
};
const changeItemNum = (item, num) => {
if (item.goods_number + num <= 0) {
cartStore.delCart(item.rec_id)
cartStore.delCart(item.rec_id);
} else {
cartStore.updateCart(item,item.goods_number + num)
}
cartStore.updateCart(item, item.goods_number + num);
}
};
const changeInputNum = (item, num) => {
if (num <= 0) {
cartStore.delCart(item.rec_id)
cartStore.delCart(item.rec_id);
} else {
cartStore.updateCart(item,num)
}
cartStore.updateCart(item, num);
}
};
// 計算訂單詳細
const detail = computed(() => {
let sum = items.value.reduce((accumulator, value) => {
return accumulator + (value.goods_price * value.goods_number)
},0)
return accumulator + value.goods_price * value.goods_number;
}, 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 () => {
let res = await checkLogin()
if(res.code !== 200){
return showToast('操作失敗')
}
if(res.data === true){
router.push('/checkout')
if (Cookies.get("token")) {
router.push("/checkout");
} else {
showConfirmDialog({
title: '是否先登入會員',
message:
'您目前尚未登入會員，是否先登入會員',
confirmButtonText: '登入會員',
cancelButtonText: '暱名購買'
title: "是否先登入會員",
message: "您目前尚未登入會員，是否先登入會員",
confirmButtonText: "登入會員",
cancelButtonText: "暱名購買",
})
.then(() => {
router.push('/login')
router.push("/login");
})
.catch(() => {
router.push('/checkout')
router.push("/checkout");
});
}
}
};
</script>
<style lang="less" scoped>
@ -188,7 +177,7 @@ const goCheckOut = async ()=>{
.delete-button {
i {
font-size: 20px;
color: #FFFFFF;
color: #ffffff;
}
}
@ -214,4 +203,15 @@ const goCheckOut = async ()=>{
height: 40px;
}
}
.order-detail {
display: flex;
div:nth-child(1) {
width: 100px;
}
div:nth-child(2) {
flex: 1;
}
}
</style>

13
src/pages/Cart/Shipping.vue
Unescape View File

@ -75,7 +75,8 @@
<script setup>
import { ref, watch, onMounted } from "vue";
import { getMap, getMyCvs, deleteLogistic } from "@/services/shipping";
import { getMap, getMyCvs, deleteLogistic, getShippings } from "@/services/shipping";
import { useOrderStore } from "@/store/Order";
import { showToast } from "vant";
import { useRoute, useRouter } from "vue-router";
@ -94,6 +95,7 @@ const myShipping = ref([]);
onMounted(async () => {
let res = await getMyCvs();
if (res.code === 200) {
shippingId.value = res.data.default.store_id;
activeNames.value = res.data.default.type;
@ -102,6 +104,15 @@ onMounted(async () => {
orderStore.initShippingData(res.data.default);
if (route.query.is_return == 1) {
let res2 = await getShippings();
//在res2.data中取得shipping_code為cvs的Object
res2 = res2.data.find((item) => item.shipping_code == "ecpay");
orderStore.shipping.shipping_code = res2.shipping_code;
orderStore.shipping.shipping_id = res2.shipping_id;
orderStore.shipping.shipping_fee = 0;
router.replace("/checkout");
}
}

208
src/pages/Goods/Index.vue
Unescape View File

@ -24,7 +24,7 @@
<div class="banner-box product-banner">
<van-swipe>
<van-swipe-item v-for="images in goods.goods_gallery" :index="images.img_id">
<img class="banner_img" :src="images.img_url">
<img class="banner_img" :src="images.img_url" />
</van-swipe-item>
<template #indicator="{ active, total }">
<div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
@ -45,14 +45,90 @@
</div>
<div class="rating">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-star"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-star"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-star"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-star"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-star"
>
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
></polygon>
</svg>
<span class="font-xs content-color">(150次點擊)</span>
</div>
<div class="price"><span>${{ goods.shop_price }}</span>
<div class="price">
<span>${{ goods.shop_price }}</span>
<del>${{ goods.market_price }}</del>
<span>{{ discount }}折</span>
</div>
@ -70,20 +146,29 @@
<!-- Accordion Start -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">商品詳情</button>
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
商品詳情
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div
id="collapseOne"
class="accordion-collapse collapse show"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample"
>
<div class="accordion-body">
<p class="content-color font-base">
</p>
<p class="content-color font-base"></p>
</div>
</div>
</div>
<!-- Accordion End -->
</div>
<!-- Product Detail Accordian End -->
</div>
@ -140,38 +225,34 @@
<section class="check-delivery-section">
<div class="service-section">
<ul>
<li class="font-sm content-color"><img src="@/assets/icons/svg/delivery.svg" class="img-fluid"
alt="" />
<li class="font-sm content-color">
<img src="@/assets/icons/svg/delivery.svg" class="img-fluid" alt="" />
滿$200元即可免運
</li>
<li class="font-sm content-color"><img src="@/assets/icons/svg/payment.svg" class="img-fluid"
alt="" />
<li class="font-sm content-color">
<img src="@/assets/icons/svg/payment.svg" class="img-fluid" alt="" />
可貨到付款
</li>
<li class="font-sm content-color"><img src="@/assets/icons/svg/refund.svg" class="img-fluid"
alt="" />
<li class="font-sm content-color">
<img src="@/assets/icons/svg/refund.svg" class="img-fluid" alt="" />
7日不滿意包退
</li>
</ul>
</div>
</section>
</main>
<!-- Main End -->
<!-- Main Start -->
<main class="main-wrap detail-page mb-xxl" v-if="active == 1">
<section class="detail-section" v-html="goods.goods_desc">
</section>
<section class="detail-section" v-html="goods.goods_desc"></section>
</main>
<!-- Main End -->
<!-- Main Start -->
<main class="main-wrap comment-page mb-xxl" v-if="active == 2">
<section class="comment-section">
評論
</section>
<section class="comment-section">評論</section>
</main>
<!-- Main End -->
@ -182,100 +263,88 @@
<div class="icon">
<i class="icon-home"></i>
</div>
<div class="text">
首頁
</div>
<div class="text">首頁</div>
</li>
<li class="footer-item">
<div class="icon">
<i class="icon-chat-dots"></i>
</div>
<div class="text">
客服
</div>
<div class="text">客服</div>
</li>
<li class="footer-item">
<div class="icon">
<i class="icon-favorite"></i>
</div>
<div class="text">
最愛
</div>
<div class="text">最愛</div>
</li>
</ul>
<ul class="footer-right">
<li class="add-cart" @click="addToCart(goods.goods_id,0)">
加入購物車
</li>
<li class="buy-now" @click="addToCart(goods.goods_id,1)">
立即購買
</li>
<li class="add-cart" @click="addToCart(goods.goods_id, 0)">加入購物車</li>
<li class="buy-now" @click="addToCart(goods.goods_id, 1)">立即購買</li>
</ul>
</footer>
<!-- Footer End -->
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { getGoods } from '@/services/goods'
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted, computed } from "vue";
import { getGoods } from "@/services/goods";
import { useRoute, useRouter } from "vue-router";
import { useCartStore } from "@/store/Cart.js";
import { storeToRefs } from "pinia";
import { showToast } from 'vant'
import 'vant/es/toast/style'
import { showToast } from "vant";
import "vant/es/toast/style";
const route = useRoute()
const router = useRouter()
const route = useRoute();
const router = useRouter();
const cartStore = useCartStore();
const active = ref(0)
const goods = ref({})
const active = ref(0);
const goods = ref({});
onMounted(async () => {
const id = route.params.id
const id = route.params.id;
let res = await getGoods(id)
let res = await getGoods(id);
// console.log(res)
if (res.code === 200) {
goods.value = res.data
goods.value = res.data;
}
})
});
const discount = computed(() => {
return Math.floor(goods.value.shop_price / goods.value.market_price * 100)
})
return Math.floor((goods.value.shop_price / goods.value.market_price) * 100);
});
const addToCart = async (id, type) => {
//上傳商品至購物車
let goods = {
quick: 1,
spec:'',
spec: "",
goods_id: id,
number: 1,
parent: 0,
cardInfo: ''
}
cardInfo: "",
};
let res = await cartStore.addCart(goods)
let res = await cartStore.addCart(goods);
if (!res) {
return showToast('添加失敗！');
return showToast("添加失敗！");
}
if (type === 0) {
showToast('添加成功！');
showToast("添加成功！");
} else {
router.push('/cart')
}
return
router.push("/cart");
}
return;
};
</script>
<style lang="less" scoped>
@ -405,5 +474,4 @@ const addToCart = async (id , type) =>{
}
}
}
</style>

10
src/pages/Login/Index.vue
Unescape View File

@ -18,7 +18,7 @@
<div class="input-box">
<input
type="password"
placeholder="登入密碼"
placeholder="驗證碼"
required
class="form-control"
v-model="form.password"
@ -26,11 +26,7 @@
<i class="iconly-Hide icli showHidePassword"></i>
</div>
<!-- Password Input End -->
<a href="javascript:void(0)" class="content-color font-sm forgot mb-3">忘記密碼 ?</a>
<button type="button" class="btn-solid" @click="handleLogin">登入</button>
<span class="content-color font-sm d-block text-center fw-600"
>還沒有帳號？ <router-link to="/register" class="underline">立即註冊 </router-link></span
>
</form>
<!-- Login Form End -->
@ -81,7 +77,9 @@ const handleLogin = async () => {
router.push("/user");
} else if (res.code === 201) {
router.push("/register");
sessionStorage.setItem('reg',form.value.username)
router.push({name:'Register',query: {type:'mobile'}});
}
};

4
src/pages/Login/LineLogin.vue
Unescape View File

@ -38,8 +38,8 @@ if(!code){
router.push('/user/info')
}else if(res.code == 201){
sessionStorage.setItem('line',JSON.stringify(response.data))
router.push('/register')
sessionStorage.setItem('reg',JSON.stringify(response.data))
router.push({name:'Register',query: {type:'line'}});
}else{
}

22
src/pages/My/Index.vue
Unescape View File

@ -5,7 +5,7 @@
<div class="user-panel">
<div class="media">
<a href="javascript:void(0)">
<img :src="userInfo.line_picture" alt="avatar" />
<img :src="userInfo.headimg" alt="avatar" />
</a>
<div class="media-body">
<a href="javascript:void(0)" class="title-color">
@ -77,23 +77,23 @@
>複制</button>
<!-- </a> -->
</li>
<li>
<router-link to="/address" class="nav-link title-color font-sm">
<li @click="$router.push('/address')">
<a class="nav-link title-color font-sm">
<i class="icon-map-marker icli"></i>
<span>收貨地址</span>
</router-link>
<router-link to="/address" class="arrow">
</a>
<a class="arrow">
<i class="icon-chevron-right"></i>
</router-link>
</a>
</li>
<li>
<router-link to="/user/order" class="nav-link title-color font-sm">
<li @click="$router.push('/user/order')">
<a class="nav-link title-color font-sm">
<i class="icon-order icli"></i>
<span>我的訂單</span>
</router-link>
<router-link to="/user/order" class="arrow">
</a>
<a class="arrow">
<i class="icon-chevron-right"></i>
</router-link>
</a>
</li>
<li>
<router-link to="/address" class="nav-link title-color font-sm">

83
src/pages/My/Order/Index.vue
Unescape View File

@ -17,33 +17,38 @@
<main class="main-wrap order-history mb-xxl">
<!-- Catagories Tabs Start -->
<ul class="nav nav-tab nav-pills custom-scroll-hidden" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="catagories1-tab" type="button">
<li class="nav-item" role="presentation" @click="setStatus(0)">
<button class="nav-link" :class="{active: status==0}" id="catagories1-tab" type="button">
待確認
</button>
</li>
<li class="nav-item" role="presentation" @click="setStatus(1)">
<button class="nav-link" :class="{active: status==1}" id="catagories1-tab" type="button">
待付款
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="catagories2-tab" type="button">
<li class="nav-item" role="presentation" @click="setStatus(2)">
<button class="nav-link" :class="{active: status==2}" id="catagories2-tab" type="button">
待出貨
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="catagories3-tab" type="button">
<li class="nav-item" role="presentation" @click="setStatus(3)">
<button class="nav-link" :class="{active: status==3}" id="catagories3-tab" type="button">
待收貨
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="catagories4-tab" type="button">
<li class="nav-item" role="presentation" @click="setStatus(4)">
<button class="nav-link" :class="{active: status==4}" id="catagories4-tab" type="button">
已完成
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="catagories5-tab" type="button">
<li class="nav-item" role="presentation" @click="setStatus(5)">
<button class="nav-link" :class="{active: status==5}" id="catagories5-tab" type="button">
不成立
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="catagories6-tab" type="button">
<li class="nav-item" role="presentation" @click="setStatus(6)">
<button class="nav-link" :class="{active: status==6}" id="catagories6-tab" type="button">
退貨/退款
</button>
</li>
@ -58,19 +63,21 @@
<div class="order-box" v-for="(order,index) in orderList" :key="order.order_id">
<div class="media">
<a href="order-detail.html" class="content-box">
<h2 class="font-sm title-color">訂單編號: #{{ order.order_sn }} , 日期: {{ order.add_time }}</h2>
<h2 class="font-sm title-color">訂單編號: #{{ order.order_sn }} , <br/>日期: {{ order.add_time }}</h2>
<p class="font-xs content-color">
</p>
<span class="content-color font-xs">
訂單金額: <span class="font-theme">${{ order.goods_amount }}</span>
, 商品項目: <span class="font-theme">{{ order.goods_num }}</span>
</span>
<div class="content-color font-xs">
訂單金額: <span class="font-theme">${{ order.order_amount }}</span>
</div>
<div>
{{ getGoodsItem(order.goods_items) }}
</div>
</a>
</div>
<div class="bottom-content">
<a href="address2.html" class="title-color font-sm fw-600"> 再買一次 </a>
<a href="javascript:void(0)" class="give-rating content-color font-sm"> Rate & Review Product</a>
<a href="javascript:void(0)" class="give-rating content-color font-sm"> {{ orderStatus[order.order_status] }}</a>
<div class="rating">
<i data-feather="star"></i>
<i data-feather="star"></i>
@ -92,18 +99,52 @@
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getUserOrders } from '@/services/user'
import { ref, onMounted, watch } from 'vue'
import { getOrders } from '@/services/order'
const status = ref(-1)
const orderList = ref([])
const orderStatus = {
0: '待確認',
1: '待付款',
2: '待出貨',
3: '待收貨',
4: '已完成',
5: '不成立',
6: '退貨退款',
}
onMounted(async () => {
let res = await getUserOrders()
let res = await getOrders(-1)
if(res.code === 200){
orderList.value = res.data
}
})
const setStatus = (value) => {
status.value = value
}
watch(status,async (oVal,nVal)=>{
let res = await getOrders(oVal)
if(res.code === 200){
orderList.value = res.data
}
})
const getGoodsItem = (goods)=>{
let goodsItem = ''
goods.forEach((item,index) => {
goodsItem += item.goods_name + ' x ' + item.goods_number + ' '
})
return goodsItem
}
</script>
<style>

3
src/pages/My/Setting/Index.vue
Unescape View File

@ -19,8 +19,8 @@
<van-form @submit="onSubmit">
<van-cell-group inset>
<van-field v-model="form.real_name" name="real_name" placeholder="真實姓名" />
<van-field v-model="form.email" name="email" placeholder="電子郵件" />
<van-field v-model="form.mobile_phone" name="mobile_phone" placeholder="行動電話" />
<van-field v-model="form.email" name="email" placeholder="電子郵件" />
<van-popup v-model:show="showPicker" position="bottom">
<van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
</van-popup>
@ -46,6 +46,7 @@ const form = ref({
onMounted(async () => {
let res = await getUserInfo();
console.log('res',res)
if (res.code == 200) {
form.value = {
real_name: res.data.real_name,

16
src/pages/Register/Index.vue
Unescape View File

@ -25,10 +25,10 @@
<input type="text" placeholder="行動電話" v-model="form.phone" required class="form-control" />
<i class="icon-cellphone icli"></i>
</div>
<div class="input-box">
<!-- <div class="input-box">
<input type="text" placeholder="Email" v-model="form.email" required class="form-control" />
<i class="icon-cellphone icli"></i>
</div>
</div> -->
<!-- Password Input start -->
<!-- <div class="input-box">
@ -81,7 +81,14 @@ const form = ref({
});
const onSubmit = async () => {
let { id_token } = JSON.parse(sessionStorage.getItem("line"));
let token = '';
if(route.query.type == "line"){
let { id_token } = JSON.parse(sessionStorage.getItem("reg"))
token = id_token
}else{
token = sessionStorage.getItem("reg")
}
showLoadingToast({
duration: 0,
@ -89,8 +96,7 @@ const onSubmit = async () => {
forbidClick: true,
});
let regRes = await register({ token: id_token, ...form.value });
let regRes = await register({ token, type: route.query.type, ...form.value });
if (regRes.code === 500) {
showToast("line 登入已過期");
return router.push("/login");

5
src/services/order.js
Unescape View File

@ -1,6 +1,11 @@
import { request } from '@/utils/request'
export function getOrders(status) {
console.log('status',status)
return request('/order/list', 'get' , { status })
}
export function addOrder(params) {
return request('/order/add', 'post', params)
}

2
src/store/Cart.js
Unescape View File

@ -18,14 +18,12 @@ export const useCartStore = defineStore('cart', {
actions: {
async initCart() {
let res = await getItems()
if (res.code === 200) {
this.cartItems = res.data
}
},
async addCart(goods) {
let res = await addCart(goods)
if (res.code === 200) {
this.cartItems = res.data
return true

8
src/store/Order.js
Unescape View File

@ -8,6 +8,8 @@ export const useOrderStore = defineStore('order', {
pay_id: null,
pay_code: '',
pay_fee: 0,
extra_data: {
},
},
shipping: {
shipping_id: null,
@ -34,17 +36,13 @@ export const useOrderStore = defineStore('order', {
},
actions: {
async initShippingData(params) {
this.shipping = {
shipping_code: 'ecpay',
shipping_fee: 0,
extra_data: {
this.shipping.extra_data = {
type: params.type,
store_id: params.store_id,
store_name: params.store_name,
store_address: params.store_address,
store_tel: params.store_tel
}
}
},
async setDefaultStoreID(params) {
let res = await setDefaultStoreId(params.store_id)

26
src/store/User.js
Unescape View File

@ -0,0 +1,26 @@
import { defineStore } from 'pinia'
import Cookies from "js-cookie"
import { getUserInfo } from '@/services/user'
export const useUserStore = defineStore('user', {
state: () => {
return {
info:{}
}
},
getters: {
},
actions: {
async init() {
//檢查cookie是否為登入狀態，若是則取得資料
if(Cookies.get('token')){
let res = await getUserInfo()
if(res.code === 200){
this.info = res.data
}
}
}
}
})

9
src/utils/init.js
Unescape View File

@ -1,6 +1,7 @@
import { v1 as uuidv1 } from 'uuid'
import Cookies from 'js-cookie'
import { useShopStore } from "@/store/Shop"
import { useUserStore } from "@/store/User"
import { useCartStore } from "@/store/Cart"
export async function initSession(){
@ -10,14 +11,12 @@ export async function initSession(){
}
export async function initStore(){
const shopStore = useShopStore()
await shopStore.getShopInfo()
}
const shopStore = useShopStore()
export async function initCart(){
const userStore = useUserStore()
const cartStore = useCartStore()
await cartStore.initCart()
await Promise.all([shopStore.getShopInfo(),userStore.init(),cartStore.initCart()])
}

7
src/utils/request.js
Unescape View File

@ -3,6 +3,9 @@ import Cookies from 'js-cookie'
import router from '@/router'
import { showToast, showLoadingToast } from 'vant'
import NProgress from "nprogress";
import "nprogress/nprogress.css";
const ajax = axios.create({
baseURL: 'https://shop.h888.fun/appapi/v1',
withCredentials: true,
@ -35,7 +38,7 @@ ajax.interceptors.request.use(
if (Cookies.get('SessionId')) {
config.headers.SessionId = Cookies.get('SessionId')
}
NProgress.start()
return config
},
(error) => {
@ -45,10 +48,12 @@ ajax.interceptors.request.use(
ajax.interceptors.response.use(
(response) => {
NProgress.done()
refreshToken(response)
return response.data
},
(error) => {
NProgress.done()
if (error.response) {
switch (error.response.status) {
case 401:

11
vite.config.js
Unescape View File

@ -4,13 +4,22 @@ import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
import {resolve} from 'path'
import alias from '@rollup/plugin-alias'
import topLevelAwait from "vite-plugin-top-level-await";
// https://vitejs.dev/config/
export default defineConfig({
base: '/m/',
plugins: [alias(),vue(),
plugins: [
alias(),
vue(),
Components({
resolvers: [VantResolver()],
}),
topLevelAwait({
// The export name of top-level await promise for each chunk module
promiseExportName: "__tla",
// The function to generate import names of top-level await promise in each chunk module
promiseImportName: i => `__tla_${i}`
})
],
resolve: {

85
yarn.lock
Unescape View File

@ -547,6 +547,11 @@
dependencies:
slash "^4.0.0"
"@rollup/plugin-virtual@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@rollup/plugin-virtual/-/plugin-virtual-3.0.1.tgz#cea7e489481cc0ca91516c047f8c53c1cfb1adf6"
integrity sha512-fK8O0IL5+q+GrsMLuACVNk2x21g3yaw+sG2qn16SnUd3IlBsQyvWxLMGHmCmXRMecPjGRSZ/1LmZB4rjQm68og==
"@rollup/pluginutils@^5.0.2":
version "5.0.2"
resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz"
@ -563,6 +568,72 @@
dependencies:
clipboard "^2.0.0"
"@swc/core-darwin-arm64@1.3.49":
version "1.3.49"
resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.49.tgz#bc52c5caff6e0ea04f5ed457ccd7904128632524"
integrity sha512-g7aIfXh6uPHmhLXdjXQq5t3HAyS/EdvujasW1DIS5k8UqOBaSoCcSGtLIjzcLv3KujqNfYcm118E+12H0nY6fQ==
"@swc/core-darwin-x64@1.3.49":
version "1.3.49"
resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.3.49.tgz#d1da85440380bdf62b3cf273ad29be5575cd02d6"
integrity sha512-eSIxVX0YDw40Bre5sAx2BV3DzdIGzmQvCf2yiBvLqiiL6GC0mmuDeWbUCAzdUX6fJ6FUVEBMUVqNOc9oJ2/d5w==
"@swc/core-linux-arm-gnueabihf@1.3.49":
version "1.3.49"
resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.49.tgz#d193089e02211dc7a11bff0a60ef098f7c487a26"
integrity sha512-8mj3IcRVr/OJY0mVITz6Z5osNAMJK5GiKDaZ+3QejPLbl6aiu4sH4GmTHDRN14RnaVXOpecsGcUoQmNoNa3u3w==
"@swc/core-linux-arm64-gnu@1.3.49":
version "1.3.49"
resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.49.tgz#c45102a93b8d7e67617f2d488549ad8d2bb26f73"
integrity sha512-Rmg9xw6tmpOpf6GKKjpHQGmjfHzqSths5ebI2ahrHlhekzZF2HYmPkVw4bHda8Bja6mbaw8FVBgBHjPU8mMeDA==
"@swc/core-linux-arm64-musl@1.3.49":
version "1.3.49"
resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.49.tgz#391f20ff83b7195a2a1601e6cdb191e1b4fc112d"
integrity sha512-nlKPYMogAI3Aak6Mlkag8/2AlHAZ/DpH7RjhfMazsaGhD/sQOmYdyY9Al69ejpa419YJuREeeeLoojFlSsd30g==
"@swc/core-linux-x64-gnu@1.3.49":
version "1.3.49"
resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.49.tgz#36c7a165a0bbb763eaf7186eebd759731cb058d2"
integrity sha512-QOyeJQ6NVi73SJcizbwvIZTiGA/N+BxX9liRrvibumaQmRh8fWjJiLNsv3ODSHeuonak7E8Bf7a7NnSTyu48Mw==
"@swc/core-linux-x64-musl@1.3.49":
version "1.3.49"
resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.49.tgz#6b9f85b45f116aaf909ed9ee8fe2d19e19fca8fb"
integrity sha512-WlDMz+SOpYC9O/ZBUw1oiyWI7HyUCMlf/HS8Fy/kRI3eGoGCUxVTCJ1mP57GdQr4Wg32Y/ZpO2KSNQFWnT8mAw==
"@swc/core-win32-arm64-msvc@1.3.49":
version "1.3.49"
resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.49.tgz#f75c69cf5804543b74846b251dec3729466d691a"
integrity sha512-41LZOeI94Za3twib8KOIjnHYAZ+nkBFmboaREsFR1760S7jiMVywqWX8nFZvn/CXj15Fjjgdgyuig+zMREwXwQ==
"@swc/core-win32-ia32-msvc@1.3.49":
version "1.3.49"
resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.49.tgz#8fea171ef5fdc6983174560f0f72a30f6da0b6ba"
integrity sha512-IdqLPoMKssyAoOCZdNXmnAd6/uyx+Hb9KSfZUHepZaNfwMy6J5XXrOsbYs3v53FH8MtekUUdV+mMX4me9bcv9w==
"@swc/core-win32-x64-msvc@1.3.49":
version "1.3.49"
resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.49.tgz#e5a4a3370bb55aac36e19d61ef43af6dcfe76c09"
integrity sha512-7Fqjo5pS3uIohhSbYSaR0+e/bJdxmQb4oG97FIh5qvlCCGQaQ9UiaEeYy4uK0Ad+Menum1IXCAEiG7RHcl6Eyw==
"@swc/core@^1.3.10":
version "1.3.49"
resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.3.49.tgz#98268739aaa998403669a563062c89fa30e9b39e"
integrity sha512-br44ZHOfE9YyRGcORSLkHFQHTvhwRcaithBJ1Q5y5iMGpLbH0Wai3GN49L60RvmGwxNJfWzT+E7+rNNR7ewKgA==
optionalDependencies:
"@swc/core-darwin-arm64" "1.3.49"
"@swc/core-darwin-x64" "1.3.49"
"@swc/core-linux-arm-gnueabihf" "1.3.49"
"@swc/core-linux-arm64-gnu" "1.3.49"
"@swc/core-linux-arm64-musl" "1.3.49"
"@swc/core-linux-x64-gnu" "1.3.49"
"@swc/core-linux-x64-musl" "1.3.49"
"@swc/core-win32-arm64-msvc" "1.3.49"
"@swc/core-win32-ia32-msvc" "1.3.49"
"@swc/core-win32-x64-msvc" "1.3.49"
"@tokenizer/token@^0.3.0":
version "0.3.0"
resolved "https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz"
@ -1446,6 +1517,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
nprogress@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
object-inspect@^1.9.0:
version "1.12.2"
resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz"
@ -1788,6 +1864,15 @@ vant@^4.0.2:
"@vant/popperjs" "^1.3.0"
"@vant/use" "^1.4.3"
vite-plugin-top-level-await@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/vite-plugin-top-level-await/-/vite-plugin-top-level-await-1.3.0.tgz#83c73b5aed33a3819d85432da27f462218cfb3f5"
integrity sha512-owIfsgWudMlQODWJSwp0sQB3AZZu3qsMygeBjZy8CyjEk6OB9AGd8lHqmgwrcEqgvy9N58lYxSBLVk3/4ejEiA==
dependencies:
"@rollup/plugin-virtual" "^3.0.1"
"@swc/core" "^1.3.10"
uuid "^9.0.0"
vite@^3.2.3:
version "3.2.5"
resolved "https://registry.npmjs.org/vite/-/vite-3.2.5.tgz"

Write Preview
Loading…
Cancel
Save