├── vue.config.js
├── src
    ├── bus.js
    ├── assets
    │   ├── image
    │   │   ├── logo.png
    │   │   ├── anniversary8.jpg
    │   │   ├── castorland.jpg
    │   │   ├── clementoni.jpg
    │   │   └── ravensburger.jpg
    │   └── scss
    │   │   ├── all.scss
    │   │   ├── helpers
    │   │       ├── _base.scss
    │   │       └── _loading.scss
    │   │   ├── _coupons.scss
    │   │   ├── _dashboard.scss
    │   │   └── _index.scss
    ├── App.vue
    ├── components
    │   ├── CategoryList.vue
    │   ├── Dashboard.vue
    │   ├── Pagination.vue
    │   ├── Sidebar.vue
    │   ├── Cards.vue
    │   ├── Navbar.vue
    │   └── MessageAlert.vue
    ├── main.js
    ├── views
    │   ├── frontend
    │   │   ├── Login.vue
    │   │   ├── Coupons.vue
    │   │   ├── Products.vue
    │   │   ├── About.vue
    │   │   ├── Like.vue
    │   │   ├── Checkout.vue
    │   │   ├── Product.vue
    │   │   ├── Home.vue
    │   │   └── Cart.vue
    │   └── backend
    │   │   ├── TestCheckout.vue
    │   │   ├── AdminOrders.vue
    │   │   ├── AdminCoupons.vue
    │   │   ├── AdminProducts.vue
    │   │   └── TestOrders.vue
    └── router
    │   └── index.js
├── .env
├── public
    ├── favicon.ico
    ├── RWD-thumbnail.png
    └── index.html
├── babel.config.js
├── .editorconfig
├── .gitignore
├── jsconfig.json
├── package.json
└── README.md


/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   publicPath: './'
3 | }
4 | 


--------------------------------------------------------------------------------
/src/bus.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | 
3 | Vue.prototype.$bus = new Vue()
4 | 


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | VUE_APP_APIPATH = https://vue-course-api.hexschool.io/
2 | VUE_APP_MYPATH = wangxuan
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WangShuan/vue-portfolio-v3/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/RWD-thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WangShuan/vue-portfolio-v3/HEAD/public/RWD-thumbnail.png


--------------------------------------------------------------------------------
/src/assets/image/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WangShuan/vue-portfolio-v3/HEAD/src/assets/image/logo.png


--------------------------------------------------------------------------------
/src/assets/image/anniversary8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WangShuan/vue-portfolio-v3/HEAD/src/assets/image/anniversary8.jpg


--------------------------------------------------------------------------------
/src/assets/image/castorland.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WangShuan/vue-portfolio-v3/HEAD/src/assets/image/castorland.jpg


--------------------------------------------------------------------------------
/src/assets/image/clementoni.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WangShuan/vue-portfolio-v3/HEAD/src/assets/image/clementoni.jpg


--------------------------------------------------------------------------------
/src/assets/image/ravensburger.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WangShuan/vue-portfolio-v3/HEAD/src/assets/image/ravensburger.jpg


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'App',
10 |   watch: {
11 |     $route: () => {
12 |       document.body.scrollTop = 0
13 |       document.documentElement.scrollTop = 0
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style lang="scss">
20 | @import "@/assets/scss/all.scss";
21 | </style>
22 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": [
 3 |     "src/**/*"
 4 |   ],
 5 |   "compilerOptions": {
 6 |     "baseUrl": ".",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     }
12 |   },
13 |   "eslint.autoFixOnSave": true,
14 |   "eslint.validate": [{
15 |       "language": "javascript",
16 |       "autoFix": true
17 |     },
18 |     {
19 |       "language": "javascriptreact",
20 |       "autoFix": true
21 |     },
22 |     {
23 |       "language": "vue",
24 |       "autoFix": true
25 |     }
26 |   ]
27 | }


--------------------------------------------------------------------------------
/src/assets/scss/all.scss:
--------------------------------------------------------------------------------
 1 | @import "~bootstrap/scss/functions";
 2 | @import "./helpers/_var";
 3 | @import "~bootstrap/scss/bootstrap";
 4 | @import "./helpers/_loading";
 5 | @import "./helpers/_base";
 6 | @import "./_dashboard";
 7 | @import "./_index";
 8 | 
 9 | .list-group-item:hover {
10 |   cursor: pointer;
11 |   background-color: $light;
12 | }
13 | 
14 | .sm {
15 |   display: none;
16 | }
17 | 
18 | @media screen and (max-width: 420px) {
19 |   .lg {
20 |     display: none;
21 |   }
22 | 
23 |   .sm {
24 |     display: block;
25 |   }
26 | 
27 | }


--------------------------------------------------------------------------------
/src/assets/scss/helpers/_base.scss:
--------------------------------------------------------------------------------
 1 | #app {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .table th,
 6 | .table td {
 7 |   vertical-align: inherit;
 8 | }
 9 | 
10 | .table-striped {
11 |   tbody tr:nth-of-type(#{$table-striped-order}) {
12 |     background-color: $light;
13 |   }
14 | }
15 | 
16 | .text-lg {
17 |   font-size: 1.2em;
18 | }
19 | 
20 | 
21 | .card-footer {
22 |   background-color: lighten($light, 10%);
23 | }
24 | 
25 | pre {
26 |   white-space: pre-wrap;
27 |   white-space: -moz-pre-wrap !important;
28 |   white-space: -pre-wrap;
29 |   white-space: -o-pre-wrap;
30 |   word-wrap: break-word;
31 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-Hant-TW">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 8 |   <meta name="description" content="Vue出來的拼圖迷電商網站">
 9 |   <meta name="url" content="https://wangshuan.github.io/dist/#/">
10 |   <title>拼圖迷 - 進口拼圖專賣店</title>
11 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
12 |   <link rel="icon" href="favicon.ico">
13 | </head>
14 | 
15 | <body>
16 |   <noscript>
17 |     <strong>We're sorry but 拼圖迷 doesn't work properly without JavaScript enabled.
18 |       Please enable it to continue.</strong>
19 |   </noscript>
20 |   <div id="app"></div>
21 |   <!-- built files will be auto injected -->
22 | </body>
23 | 
24 | </html>
25 | 


--------------------------------------------------------------------------------
/src/components/CategoryList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-md pr-0">
 3 |     <h4 class="my-4 text-left lg">商品分類</h4>
 4 |     <ul class="p-0 m-0">
 5 |       <li
 6 |         class="list-group-item d-flex justify-content-between align-items-center"
 7 |         v-for="item in categories"
 8 |         :key="item.title"
 9 |         :class="{ 'bg-secondary text-light': item.title === active.name }"
10 |         @click="getProducts(item.path)"
11 |       >
12 |         {{ item.title }}
13 |         <span class="badge badge-secondary badge-pill">{{ item.num }}</span>
14 |       </li>
15 |     </ul>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 |   data () {
22 |     return {}
23 |   },
24 |   props: ['categories', 'active'],
25 |   methods: {
26 |     getProducts (item) {
27 |       this.$emit('getProducts', item)
28 |     }
29 |   }
30 | }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/src/components/Dashboard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="container-fluid">
 4 |       <Navbar></Navbar>
 5 |       <MessageAlert></MessageAlert>
 6 |       <div class="row mt-3">
 7 |         <Sidebar></Sidebar>
 8 |         <main role="main" class="mt-1 ml-sm-auto col-md-9 col-lg-10 px-4 pt-0">
 9 |           <router-view :key="this.$route.name"></router-view>
10 |         </main>
11 |       </div>
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import Navbar from '@/components/Navbar'
18 | import Sidebar from '@/components/Sidebar'
19 | import MessageAlert from '@/components/MessageAlert'
20 | 
21 | export default {
22 |   components: {
23 |     Sidebar,
24 |     Navbar,
25 |     MessageAlert
26 |   },
27 |   created () {
28 |     const myCookie = document.cookie.replace(
29 |       /(?:(?:^|.*;\s*)hexToken\s*=\s*([^;]*).*$)|^.*$/,
30 |       '$1'
31 |     )
32 |     this.$http.defaults.headers.common.Authorization = myCookie
33 |   }
34 | }
35 | </script>
36 | 
37 | <style>
38 | @media screen and (max-width: 420px) {
39 |   .container-fluid {
40 |     padding: 0;
41 |     max-width: 100vw;
42 |     overflow: hidden;
43 |   }
44 | }
45 | </style>
46 | 


--------------------------------------------------------------------------------
/src/components/Pagination.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <nav aria-label="Page navigation">
 4 |       <ul class="pagination justify-content-center">
 5 |         <li class="page-item" :class="{ disabled: !pages.has_pre }">
 6 |           <a
 7 |             class="page-link text-secondary"
 8 |             href="#"
 9 |             @click.prevent="getPages(pages.current_page - 1)"
10 |             aria-label="Previous"
11 |           >
12 |             <span aria-hidden="true">&laquo;</span>
13 |           </a>
14 |         </li>
15 |         <li class="page-item" v-for="item in pages.total_pages" :key="item">
16 |           <a
17 |             class="page-link text-secondary"
18 |             href="#"
19 |             @click.prevent="getPages(item)"
20 |           >
21 |             {{ item }}
22 |           </a>
23 |         </li>
24 |         <li class="page-item" :class="{ disabled: !pages.has_next }">
25 |           <a
26 |             class="page-link text-secondary"
27 |             href="#"
28 |             @click.prevent="getPages(pages.current_page + 1)"
29 |             aria-label="Next"
30 |           >
31 |             <span aria-hidden="true">&raquo;</span>
32 |           </a>
33 |         </li>
34 |       </ul>
35 |     </nav>
36 |   </div>
37 | </template>
38 | <script>
39 | export default {
40 |   data () {
41 |     return {}
42 |   },
43 |   props: ['pages'],
44 |   methods: {
45 |     getPages (num) {
46 |       this.$emit('event', num)
47 |     }
48 |   }
49 | }
50 | </script>
51 | 


--------------------------------------------------------------------------------
/src/assets/scss/_coupons.scss:
--------------------------------------------------------------------------------
 1 | .sawtooth {
 2 |   position: relative;
 3 |   overflow: hidden;
 4 |   width: 95%;
 5 |   height: 106px;
 6 |   margin: auto;
 7 |   display: inline-block;
 8 | 
 9 |   &-big {
10 |     width: 35%;
11 |     max-height: 90px;
12 | 
13 |     &>h1 {
14 |       color: #c92104;
15 |       text-shadow: 2px 0 0 #ccc;
16 |     }
17 |   }
18 | 
19 |   &-content {
20 |     position: absolute;
21 |     right: 0;
22 |     z-index: 999;
23 |     top: 0;
24 |     width: 65%;
25 |   }
26 | }
27 | 
28 | .sawtooth:before,
29 | .sawtooth:after {
30 |   content: "";
31 |   width: 0;
32 |   height: 100%;
33 |   position: absolute;
34 |   top: 10px;
35 | }
36 | 
37 | .sawtooth:before {
38 |   border-right: 10px dotted white;
39 |   left: -5px;
40 | }
41 | 
42 | .sawtooth:after {
43 |   border-left: 10px dotted white;
44 |   right: -5px;
45 | }
46 | 
47 | .card {
48 |   overflow: hidden;
49 |   position: relative;
50 |   border-radius: 0 0 50% 50%/10% 10% 25% 25%;
51 |   box-shadow: 5px 5px 5px #ccc;
52 |   border-bottom: 0;
53 | }
54 | 
55 | .index {
56 |   z-index: 1;
57 | }
58 | 
59 | .bg-icon {
60 |   width: 120px;
61 |   height: 120px;
62 |   overflow: hidden;
63 |   float: right;
64 |   margin-top: -20px;
65 |   margin-right: -15px;
66 |   opacity: .4;
67 | }
68 | 
69 | .icon-big {
70 |   font-size: 120px;
71 | }
72 | 
73 | .sm-bg-icon{
74 |   opacity: 0.4;
75 |   position: absolute;
76 |   right: -5%;
77 |   top: 40%;
78 |   z-index: 0;
79 | }
80 | 
81 | .input-bg {
82 |   background: transparent;
83 |   font-size: 1.5em;
84 |   width: 180px;
85 |   padding: 0;
86 |   border: 0;
87 |   color: white;
88 |   font-weight: bolder;
89 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-shop",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.21.0",
12 |     "bootstrap": "^4.5.3",
13 |     "core-js": "^3.6.5",
14 |     "jquery": "^3.5.1",
15 |     "popper.js": "^1.16.1",
16 |     "vee-validate": "^3.4.5",
17 |     "vue": "^2.6.11",
18 |     "vue-axios": "^2.1.5",
19 |     "vue-loading-overlay": "^3.4.2",
20 |     "vue-router": "^3.2.0"
21 |   },
22 |   "devDependencies": {
23 |     "@vue/cli-plugin-babel": "~4.5.0",
24 |     "@vue/cli-plugin-eslint": "^4.5.9",
25 |     "@vue/cli-plugin-router": "^4.5.9",
26 |     "@vue/cli-service": "~4.5.0",
27 |     "@vue/eslint-config-standard": "^5.1.2",
28 |     "babel-eslint": "^10.1.0",
29 |     "eslint": "^6.7.2",
30 |     "eslint-plugin-import": "^2.20.2",
31 |     "eslint-plugin-node": "^11.1.0",
32 |     "eslint-plugin-promise": "^4.2.1",
33 |     "eslint-plugin-standard": "^4.0.0",
34 |     "eslint-plugin-vue": "^6.2.2",
35 |     "node-sass": "^4.12.0",
36 |     "sass-loader": "^8.0.2",
37 |     "vue-template-compiler": "^2.6.11"
38 |   },
39 |   "eslintConfig": {
40 |     "root": true,
41 |     "env": {
42 |       "node": true
43 |     },
44 |     "extends": [
45 |       "plugin:vue/essential",
46 |       "eslint:recommended",
47 |       "@vue/standard"
48 |     ],
49 |     "parserOptions": {
50 |       "parser": "babel-eslint"
51 |     },
52 |     "rules": {}
53 |   },
54 |   "browserslist": [
55 |     "> 1%",
56 |     "last 2 versions",
57 |     "not dead"
58 |   ]
59 | }
60 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import axios from 'axios'
 3 | import VueAxios from 'vue-axios'
 4 | import VueLoading from 'vue-loading-overlay'
 5 | import 'bootstrap'
 6 | 
 7 | import 'vue-loading-overlay/dist/vue-loading.css'
 8 | import App from './App.vue'
 9 | import router from './router'
10 | 
11 | import './bus'
12 | import { ValidationObserver, ValidationProvider, extend, localize } from 'vee-validate'
13 | import * as rules from 'vee-validate/dist/rules'
14 | import TW from 'vee-validate/dist/locale/zh_TW.json'
15 | 
16 | Object.keys(rules).forEach((rule) => extend(rule, rules[rule]))
17 | 
18 | localize('zh_TW', TW)
19 | 
20 | Vue.component('ValidationObserver', ValidationObserver)
21 | Vue.component('ValidationProvider', ValidationProvider)
22 | 
23 | Vue.config.productionTip = false
24 | Vue.use(VueAxios, axios)
25 | axios.defaults.withCredentials = true
26 | 
27 | Vue.component('loading', VueLoading)
28 | 
29 | Vue.filter('dollarSign', (n) => `$${n}`)
30 | 
31 | Vue.filter('numFormat', (n) => {
32 |   const intPart = Number(n).toFixed(0)
33 |   const intPartFormat = intPart
34 |     .toString()
35 |     .replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
36 |   return intPartFormat
37 | })
38 | 
39 | router.beforeEach((to, from, next) => {
40 |   if (to.meta.title) {
41 |     document.title = to.meta.title
42 |   }
43 |   if (to.meta.requiresAuth) {
44 |     const api = `${process.env.VUE_APP_APIPATH}api/user/check`
45 |     axios.post(api).then((res) => {
46 |       if (res.data.success === false) {
47 |         next('/login')
48 |       } else {
49 |         next()
50 |       }
51 |     })
52 |   } else {
53 |     next()
54 |   }
55 | })
56 | 
57 | new Vue({
58 |   router,
59 |   render: (h) => h(App)
60 | }).$mount('#app')
61 | 


--------------------------------------------------------------------------------
/src/components/Sidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <nav class="col-md-3 col-lg-2 d-none d-md-block bg-light sidebar">
 4 |       <div class="sidebar-sticky">
 5 |         <h6
 6 |           class="d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"
 7 |         >
 8 |           <span>
 9 |             <i class="fa fa-user" aria-hidden="true"></i>
10 |             管理員
11 |           </span>
12 |         </h6>
13 |         <ul class="nav text-left ml-3">
14 |           <li class="nav-item">
15 |             <router-link class="nav-link" to="/admin/products">
16 |               <i class="fa fa-wrench" aria-hidden="true"></i>
17 |               產品管理
18 |             </router-link>
19 |             <router-link class="nav-link" to="/admin/orders">
20 |               <i class="fa fa-list-ol" aria-hidden="true"></i>
21 |               訂單管理
22 |             </router-link>
23 |             <router-link class="nav-link" to="/admin/coupons">
24 |               <i class="fa fa-ticket" aria-hidden="true"></i>
25 |               優惠碼管理
26 |             </router-link>
27 |           </li>
28 |         </ul>
29 |         <hr />
30 |         <h6
31 |           class="d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"
32 |         >
33 |           <span>
34 |             <i class="fa fa-cogs" aria-hidden="true"></i>
35 |             功能
36 |           </span>
37 |         </h6>
38 |         <ul class="nav text-left ml-3">
39 |           <li class="nav-item">
40 |             <router-link class="nav-link" to="/test/test_orders">
41 |               <i class="fa fa-flask" aria-hidden="true"></i>
42 |               模擬訂單
43 |             </router-link>
44 |           </li>
45 |         </ul>
46 |       </div>
47 |     </nav>
48 |   </div>
49 | </template>
50 | 


--------------------------------------------------------------------------------
/src/components/Cards.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="row d-inline-flex text-dark">
 4 |       <div
 5 |         class="col-lg-4 col-md-6 mb-4"
 6 |         v-for="item in products"
 7 |         :key="item.id"
 8 |       >
 9 |         <div class="card border-0 shadow-sm">
10 |           <img
11 |             :src="`${item.imageUrl || item.image}`"
12 |             alt
13 |             style="width:100%;height:250px;object-fit:contain "
14 |           />
15 |           <div class="card-body">
16 |             <h5 class="card-title m-0">{{ item.title }}</h5>
17 |             <span class="badge badge-secondary p-1">{{ item.category }}</span>
18 |             <p class="card-text">{{ item.content }}</p>
19 |             <div class="d-flex justify-content-between align-items-baseline">
20 |               <div class="h5" v-if="!item.price">
21 |                 {{ item.origin_price }} 元
22 |               </div>
23 |               <del class="h6 text-muted m-auto" v-if="item.price">
24 |                 原價${{ item.origin_price }}
25 |               </del>
26 |               <div class="h5 text-dark m-auto" v-if="item.price">
27 |                 現在只要${{ item.price }}
28 |               </div>
29 |             </div>
30 |           </div>
31 |           <div class="card-footer d-flex">
32 |             <button
33 |               type="button"
34 |               class="btn border border-dark btn-sm"
35 |               @click="getOneProduct(item.id)"
36 |             >
37 |               查看更多
38 |             </button>
39 |             <button
40 |               type="button"
41 |               class="btn btn-dark btn-sm ml-auto"
42 |               @click="addCart(item.id)"
43 |             >
44 |               加到購物車
45 |             </button>
46 |           </div>
47 |         </div>
48 |       </div>
49 |     </div>
50 |   </div>
51 | </template>
52 | <script>
53 | export default {
54 |   data () {
55 |     return {}
56 |   },
57 |   props: ['products'],
58 |   methods: {
59 |     getProducts () {
60 |       this.$emit('getProducts')
61 |     },
62 |     getOneProduct (id) {
63 |       this.$emit('getOneProduct', id)
64 |     },
65 |     addCart (id) {
66 |       this.$emit('addCart', id)
67 |     }
68 |   },
69 |   created () {
70 |     this.$emit('getProducts')
71 |   }
72 | }
73 | </script>
74 | 


--------------------------------------------------------------------------------
/src/assets/scss/_dashboard.scss:
--------------------------------------------------------------------------------
  1 | body {
  2 |   font-size: .875rem;
  3 | }
  4 | 
  5 | .feather {
  6 |   width: 16px;
  7 |   height: 16px;
  8 |   vertical-align: text-bottom;
  9 | }
 10 | 
 11 | /*
 12 |  * Sidebar
 13 |  */
 14 | 
 15 | .sidebar {
 16 |   position: fixed;
 17 |   top: 0;
 18 |   bottom: 0;
 19 |   left: 0;
 20 |   z-index: 100;
 21 |   /* Behind the navbar */
 22 |   padding: 48px 0 0;
 23 |   /* Height of navbar */
 24 |   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
 25 | }
 26 | 
 27 | .sidebar-sticky {
 28 |   position: relative;
 29 |   top: 0;
 30 |   height: calc(100vh - 48px);
 31 |   padding-top: .5rem;
 32 |   overflow-x: hidden;
 33 |   overflow-y: auto;
 34 |   /* Scrollable contents if viewport is shorter than content. */
 35 | }
 36 | 
 37 | @supports ((position: -webkit-sticky) or (position: sticky)) {
 38 |   .sidebar-sticky {
 39 |     position: -webkit-sticky;
 40 |     position: sticky;
 41 |   }
 42 | }
 43 | 
 44 | .sidebar .nav-link {
 45 |   font-weight: 500;
 46 |   color: #333;
 47 | }
 48 | 
 49 | .sidebar .nav-link .feather {
 50 |   margin-right: 4px;
 51 |   color: #999;
 52 | }
 53 | 
 54 | .sidebar .nav-link.active {
 55 |   color: #007bff;
 56 | }
 57 | 
 58 | .sidebar .nav-link:hover .feather,
 59 | .sidebar .nav-link.active .feather {
 60 |   color: inherit;
 61 | }
 62 | 
 63 | .sidebar-heading {
 64 |   font-size: .75rem;
 65 |   text-transform: uppercase;
 66 | }
 67 | 
 68 | /*
 69 |  * Content
 70 |  */
 71 | 
 72 | [role="main"] {
 73 |   padding-top: 133px;
 74 |   /* Space for fixed navbar */
 75 | }
 76 | 
 77 | @media (min-width: 768px) {
 78 |   [role="main"] {
 79 |     padding-top: 48px;
 80 |     /* Space for fixed navbar */
 81 |   }
 82 | }
 83 | 
 84 | /*
 85 |  * Navbar
 86 |  */
 87 | 
 88 | .navbar-brand {
 89 |   padding-top: .75rem;
 90 |   padding-bottom: .75rem;
 91 |   font-size: 1rem;
 92 |   background-color: rgba(0, 0, 0, .25);
 93 |   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
 94 | }
 95 | 
 96 | .navbar .form-control {
 97 |   padding: .75rem 1rem;
 98 |   border-width: 0;
 99 |   border-radius: 0;
100 | }
101 | 
102 | .form-control-dark {
103 |   color: #fff;
104 |   background-color: rgba(255, 255, 255, .1);
105 |   border-color: rgba(255, 255, 255, .1);
106 | }
107 | 
108 | .form-control-dark:focus {
109 |   border-color: transparent;
110 |   box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
111 | }


--------------------------------------------------------------------------------
/src/assets/scss/helpers/_loading.scss:
--------------------------------------------------------------------------------
  1 | @keyframes ldio-dwsbgiuamos {
  2 |   0% {
  3 |     opacity: 1;
  4 |     backface-visibility: hidden;
  5 |     transform: translateZ(0) scale(1.5, 1.5);
  6 |   }
  7 | 
  8 |   100% {
  9 |     opacity: 0;
 10 |     backface-visibility: hidden;
 11 |     transform: translateZ(0) scale(1, 1);
 12 |   }
 13 | }
 14 | 
 15 | .ldio-dwsbgiuamos div>div {
 16 |   position: absolute;
 17 |   width: 28px;
 18 |   height: 28px;
 19 |   border-radius: 50%;
 20 |   background: #111111;
 21 |   animation: ldio-dwsbgiuamos 1s linear infinite;
 22 | }
 23 | 
 24 | .ldio-dwsbgiuamos div:nth-child(1)>div {
 25 |   left: 146px;
 26 |   top: 86px;
 27 |   animation-delay: -0.875s;
 28 | }
 29 | 
 30 | .ldio-dwsbgiuamos>div:nth-child(1) {
 31 |   transform: rotate(0deg);
 32 |   transform-origin: 160px 100px;
 33 | }
 34 | 
 35 | .ldio-dwsbgiuamos div:nth-child(2)>div {
 36 |   left: 128px;
 37 |   top: 128px;
 38 |   animation-delay: -0.75s;
 39 | }
 40 | 
 41 | .ldio-dwsbgiuamos>div:nth-child(2) {
 42 |   transform: rotate(45deg);
 43 |   transform-origin: 142px 142px;
 44 | }
 45 | 
 46 | .ldio-dwsbgiuamos div:nth-child(3)>div {
 47 |   left: 86px;
 48 |   top: 146px;
 49 |   animation-delay: -0.625s;
 50 | }
 51 | 
 52 | .ldio-dwsbgiuamos>div:nth-child(3) {
 53 |   transform: rotate(90deg);
 54 |   transform-origin: 100px 160px;
 55 | }
 56 | 
 57 | .ldio-dwsbgiuamos div:nth-child(4)>div {
 58 |   left: 44px;
 59 |   top: 128px;
 60 |   animation-delay: -0.5s;
 61 | }
 62 | 
 63 | .ldio-dwsbgiuamos>div:nth-child(4) {
 64 |   transform: rotate(135deg);
 65 |   transform-origin: 58px 142px;
 66 | }
 67 | 
 68 | .ldio-dwsbgiuamos div:nth-child(5)>div {
 69 |   left: 26px;
 70 |   top: 86px;
 71 |   animation-delay: -0.375s;
 72 | }
 73 | 
 74 | .ldio-dwsbgiuamos>div:nth-child(5) {
 75 |   transform: rotate(180deg);
 76 |   transform-origin: 40px 100px;
 77 | }
 78 | 
 79 | .ldio-dwsbgiuamos div:nth-child(6)>div {
 80 |   left: 44px;
 81 |   top: 44px;
 82 |   animation-delay: -0.25s;
 83 | }
 84 | 
 85 | .ldio-dwsbgiuamos>div:nth-child(6) {
 86 |   transform: rotate(225deg);
 87 |   transform-origin: 58px 58px;
 88 | }
 89 | 
 90 | .ldio-dwsbgiuamos div:nth-child(7)>div {
 91 |   left: 86px;
 92 |   top: 26px;
 93 |   animation-delay: -0.125s;
 94 | }
 95 | 
 96 | .ldio-dwsbgiuamos>div:nth-child(7) {
 97 |   transform: rotate(270deg);
 98 |   transform-origin: 100px 40px;
 99 | }
100 | 
101 | .ldio-dwsbgiuamos div:nth-child(8)>div {
102 |   left: 128px;
103 |   top: 44px;
104 |   animation-delay: 0s;
105 | }
106 | 
107 | .ldio-dwsbgiuamos>div:nth-child(8) {
108 |   transform: rotate(315deg);
109 |   transform-origin: 142px 58px;
110 | }
111 | 
112 | .loadingio-spinner-spin-ur5grgaunp {
113 |   width: 200px;
114 |   height: 200px;
115 |   display: inline-block;
116 |   overflow: hidden;
117 | }
118 | 
119 | .ldio-dwsbgiuamos {
120 |   width: 100%;
121 |   height: 100%;
122 |   position: relative;
123 |   transform: translateZ(0) scale(1);
124 |   backface-visibility: hidden;
125 |   transform-origin: 0 0;
126 |   /* see note above */
127 | }
128 | 
129 | .ldio-dwsbgiuamos div {
130 |   box-sizing: content-box;
131 | }
132 | 
133 | /* generated by https://loading.io/ */


--------------------------------------------------------------------------------
/src/views/frontend/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <loading :active.sync="isLoading">
  4 |       <h4>載入中 請稍候...</h4>
  5 |     </loading>
  6 |     <form class="form-signin text-dark" @submit.prevent="signin">
  7 |       <b class="text-danger">***限管理員操作***</b>
  8 |       <h1 class="h3 my-3 font-weight-normal">後台登入</h1>
  9 |       <label for="inputEmail" class="sr-only">請輸入信箱</label>
 10 |       <input
 11 |         type="email"
 12 |         id="inputEmail"
 13 |         class="form-control"
 14 |         placeholder="請輸入信箱"
 15 |         required
 16 |         v-model="user.username"
 17 |       />
 18 |       <label for="inputPassword" class="sr-only">請輸入密碼</label>
 19 |       <input
 20 |         type="password"
 21 |         id="inputPassword"
 22 |         class="form-control"
 23 |         placeholder="請輸入密碼"
 24 |         required
 25 |         v-model="user.password"
 26 |       />
 27 |       <div class="checkbox mb-3">
 28 |         <label>
 29 |           <input type="checkbox" v-model="remember" value="remember-me" />
 30 |           自動填入
 31 |         </label>
 32 |       </div>
 33 |       <button class="btn btn-lg btn-dark mt-3 btn-block" type="submit">
 34 |         登入
 35 |       </button>
 36 |     </form>
 37 |   </div>
 38 | </template>
 39 | 
 40 | <script>
 41 | export default {
 42 |   data () {
 43 |     return {
 44 |       user: {
 45 |         username: '',
 46 |         password: ''
 47 |       },
 48 |       isLoading: false,
 49 |       remember: false
 50 |     }
 51 |   },
 52 |   methods: {
 53 |     signin () {
 54 |       const vm = this
 55 |       vm.isLoading = true
 56 |       const api = `${process.env.VUE_APP_APIPATH}admin/signin`
 57 |       vm.$http.post(api, vm.user).then((res) => {
 58 |         if (res.data.success) {
 59 |           const token = res.data.token
 60 |           const expired = res.data.expired
 61 |           vm.$router.push('/admin/products')
 62 |           document.cookie = `hexToken=${token}; expires=${new Date(expired)};`
 63 |         } else {
 64 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
 65 |         }
 66 |         vm.isLoading = false
 67 |       })
 68 |     }
 69 |   },
 70 |   watch: {
 71 |     remember: function (newV) {
 72 |       const vm = this
 73 |       if (newV) {
 74 |         vm.user = { username: 'test@foo.bar', password: 'qweqwe' }
 75 |       } else {
 76 |         vm.user = { username: '', password: '' }
 77 |       }
 78 |     }
 79 |   }
 80 | }
 81 | </script>
 82 | 
 83 | <style scoped>
 84 | .form-signin {
 85 |   width: 100%;
 86 |   max-width: 330px;
 87 |   padding: 15px;
 88 |   margin: auto;
 89 |   padding-top: 60px;
 90 | }
 91 | .form-signin .checkbox {
 92 |   font-weight: 400;
 93 | }
 94 | .form-signin .form-control {
 95 |   position: relative;
 96 |   box-sizing: border-box;
 97 |   height: auto;
 98 |   padding: 10px;
 99 |   font-size: 16px;
100 | }
101 | .form-signin .form-control:focus {
102 |   z-index: 2;
103 | }
104 | .form-signin input[type="email"] {
105 |   margin-bottom: -1px;
106 |   border-bottom-right-radius: 0;
107 |   border-bottom-left-radius: 0;
108 | }
109 | .form-signin input[type="password"] {
110 |   margin-bottom: 10px;
111 |   border-top-left-radius: 0;
112 |   border-top-right-radius: 0;
113 | }
114 | </style>
115 | 


--------------------------------------------------------------------------------
/src/assets/scss/_index.scss:
--------------------------------------------------------------------------------
  1 | .logo {
  2 |   height: 30px;
  3 | }
  4 | 
  5 | .main-img-lg {
  6 |   width: 100%;
  7 |   overflow: hidden;
  8 |   position: relative;
  9 | 
 10 |   &>img {
 11 |     height: 600px;
 12 |     object-fit: cover;
 13 |     opacity: 0.8;
 14 |     object-position: top;
 15 |   }
 16 | 
 17 |   &-caption {
 18 |     position: absolute;
 19 |     top: calc(50% - 160px);
 20 |     left: calc(50% - 270px);
 21 |     width: 540px;
 22 |     height: 320px;
 23 |     opacity: 0.7;
 24 |     padding: 30px;
 25 | 
 26 |     &>p {
 27 |       line-height: 1.5em;
 28 |     }
 29 |   }
 30 | 
 31 |   &-btn {
 32 |     font-size: 25px;
 33 |     z-index: 99999;
 34 |     opacity: 0.8;
 35 |     position: absolute;
 36 |     top: calc(50% + 90px);
 37 |     left: calc(50% + 80px);
 38 |     animation: jittery 1.15s infinite;
 39 |   }
 40 | }
 41 | 
 42 | .main-img-sm {
 43 |   width: 100%;
 44 |   overflow: hidden;
 45 |   position: relative;
 46 | 
 47 |   &>img {
 48 |     height: 65vh;
 49 |     object-fit: cover;
 50 |     object-position: top;
 51 |   }
 52 | 
 53 |   &-caption {
 54 |     overflow: hidden;
 55 |     position: absolute;
 56 |     bottom: 0;
 57 |     width: 100%;
 58 |     height: 230px;
 59 |     opacity: 0.7;
 60 |     background-color: $light;
 61 |     padding: 10px;
 62 | 
 63 |     &>p {
 64 |       line-height: 1.5em;
 65 |     }
 66 |   }
 67 | 
 68 |   &-btn {
 69 |     position: absolute;
 70 |     bottom: 15px;
 71 |     left: calc(50vw - 44px);
 72 |     animation: jittery-sm 1.15s infinite;
 73 |   }
 74 | }
 75 | 
 76 | .copy {
 77 |   width: 96px;
 78 |   background: none;
 79 |   border: 0;
 80 |   text-align: center;
 81 | 
 82 |   &:hover {
 83 |     cursor: pointer;
 84 |   }
 85 | }
 86 | 
 87 | @keyframes jittery {
 88 | 
 89 |   5%,
 90 |   50% {
 91 |     transform: scale(1);
 92 |   }
 93 | 
 94 |   10% {
 95 |     transform: scale(0.9);
 96 |   }
 97 | 
 98 |   15% {
 99 |     transform: scale(1.15);
100 |   }
101 | 
102 |   20% {
103 |     transform: scale(1.15) rotate(-5deg);
104 |   }
105 | 
106 |   25% {
107 |     transform: scale(1.15) rotate(5deg);
108 |   }
109 | 
110 |   30% {
111 |     transform: scale(1.15) rotate(-3deg);
112 |   }
113 | 
114 |   35% {
115 |     transform: scale(1.15) rotate(2deg);
116 |   }
117 | 
118 |   40% {
119 |     transform: scale(1.15) rotate(0);
120 |     opacity: 1;
121 |     font-size: 25px;
122 |   }
123 | }
124 | 
125 | @keyframes jittery-sm {
126 | 
127 |   5%,
128 |   50% {
129 |     transform: scale(1);
130 |   }
131 | 
132 |   10% {
133 |     transform: scale(0.9);
134 |   }
135 | 
136 |   15% {
137 |     transform: scale(1.15);
138 |   }
139 | 
140 |   20% {
141 |     transform: scale(1.15) rotate(-5deg);
142 |   }
143 | 
144 |   25% {
145 |     transform: scale(1.15) rotate(5deg);
146 |   }
147 | 
148 |   30% {
149 |     transform: scale(1.15) rotate(-3deg);
150 |   }
151 | 
152 |   35% {
153 |     transform: scale(1.15) rotate(2deg);
154 |   }
155 | 
156 |   40% {
157 |     transform: scale(1.15) rotate(0);
158 |     opacity: 1;
159 |     font-size: 1.15em;
160 |   }
161 | }
162 | 
163 | .main-content {
164 |   min-height: calc(100vh - 190px) !important;
165 | }
166 | 
167 | .sm-header {
168 |   height: 60px;
169 | 
170 |   & .dropdown {
171 |     &-toggle {
172 |       line-height: 45px;
173 |     }
174 | 
175 |     &-menu {
176 |       top: 40px;
177 |       right: 0;
178 |     }
179 | 
180 |     &-item {
181 |       padding: 10px 25px;
182 |     }
183 |   }
184 | }


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import VueRouter from 'vue-router'
  3 | import Home from '../views/frontend/Home.vue'
  4 | 
  5 | Vue.use(VueRouter)
  6 | 
  7 | const routes = [{
  8 |   path: '/',
  9 |   name: 'Home',
 10 |   component: Home,
 11 |   meta: {
 12 |     title: '拼圖迷 - 進口拼圖專賣店'
 13 |   },
 14 |   children: [{
 15 |     path: 'about',
 16 |     name: 'About',
 17 |     component: () => import('../views/frontend/About.vue'),
 18 |     meta: {
 19 |       title: '拼圖迷 - 關於我們'
 20 |     }
 21 |   },
 22 |   {
 23 |     path: 'cart',
 24 |     name: 'Cart',
 25 |     component: () => import('../views/frontend/Cart.vue'),
 26 |     meta: {
 27 |       title: '拼圖迷 - 購物車'
 28 |     }
 29 |   },
 30 |   {
 31 |     path: 'products/:category',
 32 |     name: 'Products',
 33 |     component: () => import('../views/frontend/Products.vue'),
 34 |     meta: {
 35 |       title: '拼圖迷 - 產品列表'
 36 |     }
 37 |   },
 38 |   {
 39 |     path: 'product/:id',
 40 |     name: 'Product',
 41 |     component: () => import('../views/frontend/Product.vue'),
 42 |     meta: {
 43 |       title: '拼圖迷 - 產品內容'
 44 |     }
 45 |   },
 46 |   {
 47 |     path: 'login',
 48 |     name: 'Login',
 49 |     component: () => import('../views/frontend/Login.vue'),
 50 |     meta: {
 51 |       title: '拼圖迷 - 後台管理登入'
 52 |     }
 53 |   },
 54 |   {
 55 |     path: 'coupon',
 56 |     name: 'Coupons',
 57 |     component: () => import('../views/frontend/Coupons.vue'),
 58 |     meta: {
 59 |       title: '拼圖迷 - 優惠券專區'
 60 |     }
 61 |   },
 62 |   {
 63 |     path: 'checkout/:orderId',
 64 |     name: 'Checkout',
 65 |     component: () => import('../views/frontend/Checkout.vue'),
 66 |     meta: {
 67 |       title: '拼圖迷 - 結帳'
 68 |     }
 69 |   },
 70 |   {
 71 |     path: 'like',
 72 |     name: 'Like',
 73 |     component: () => import('../views/frontend/Like.vue'),
 74 |     meta: {
 75 |       title: '拼圖迷 - 喜好項目'
 76 |     }
 77 |   }
 78 |   ]
 79 | },
 80 | {
 81 |   path: '/admin',
 82 |   name: 'Dashboard',
 83 |   component: () => import('../components/Dashboard.vue'),
 84 |   meta: {
 85 |     requiresAuth: true
 86 |   },
 87 |   children: [{
 88 |     path: 'products',
 89 |     name: 'AdminProducts',
 90 |     component: () => import('../views/backend/AdminProducts.vue'),
 91 |     meta: {
 92 |       requiresAuth: true,
 93 |       title: '拼圖迷 - 產品管理'
 94 |     }
 95 |   }, {
 96 |     path: 'orders',
 97 |     name: 'AdminOrders',
 98 |     component: () => import('../views/backend/AdminOrders.vue'),
 99 |     meta: {
100 |       requiresAuth: true,
101 |       title: '拼圖迷 - 訂單管理'
102 |     }
103 |   }, {
104 |     path: 'coupons',
105 |     name: 'AdminCoupons',
106 |     component: () => import('../views/backend/AdminCoupons.vue'),
107 |     meta: {
108 |       requiresAuth: true,
109 |       title: '拼圖迷 - 優惠券管理'
110 |     }
111 |   }]
112 | },
113 | {
114 |   path: '/test',
115 |   component: () => import('../components/Dashboard.vue'),
116 |   children: [{
117 |     path: 'test_orders',
118 |     name: 'TestOrders',
119 |     component: () => import('../views/backend/TestOrders.vue'),
120 |     meta: {
121 |       title: '拼圖迷 - 模擬訂單'
122 |     }
123 |   },
124 |   {
125 |     path: 'test_checkout/:orderId',
126 |     name: 'TestCheckout',
127 |     component: () => import('../views/backend/TestCheckout.vue'),
128 |     meta: {
129 |       title: '拼圖迷 - 模擬結帳'
130 |     }
131 |   }
132 |   ]
133 | },
134 | {
135 |   path: '*',
136 |   redirect: '/',
137 |   meta: {
138 |     title: '拼圖迷 - 進口拼圖專賣店'
139 |   }
140 | }
141 | ]
142 | 
143 | const router = new VueRouter({
144 |   routes
145 | })
146 | 
147 | export default router
148 | 


--------------------------------------------------------------------------------
/src/components/Navbar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <loading :active.sync="isLoading">
  4 |       <h4>登出中 請稍候...</h4>
  5 |     </loading>
  6 | 
  7 |     <nav
  8 |       class="navbar lg navbar-dark fixed-top bg-secondary flex-md-nowrap p-0 shadow"
  9 |     >
 10 |       <router-link
 11 |         class="navbar-brand col-md-3 text-white col-lg-2 mr-0 font-weight-bold"
 12 |         to="/"
 13 |       >
 14 |         <i class="fa fa-cog" aria-hidden="true"></i>
 15 |         拼圖迷後台管理
 16 |       </router-link>
 17 |       <ul class="navbar-nav px-3">
 18 |         <li class="nav-item text-nowrap">
 19 |           <a
 20 |             class="nav-link text-light font-weight-bold"
 21 |             href="#"
 22 |             @click.prevent="signout"
 23 |           >
 24 |             登出
 25 |           </a>
 26 |         </li>
 27 |       </ul>
 28 |     </nav>
 29 | 
 30 |     <div class="sm">
 31 |       <div class="d-flex justify-content-between">
 32 |         <div class="navbar w-100 sm-header sm bg-secondary">
 33 |           <router-link class="h4 text-light float-left mt-2" to="/">
 34 |             <i class="fa fa-cog" aria-hidden="true"></i>
 35 |             拼圖迷後台管理
 36 |           </router-link>
 37 | 
 38 |           <div class="float-right" id="navbarSupportedContent">
 39 |             <a
 40 |               class="dropdown-toggle text-light"
 41 |               href="#"
 42 |               id="navbarDropdown"
 43 |               role="button"
 44 |               data-toggle="dropdown"
 45 |               aria-haspopup="true"
 46 |               aria-expanded="false"
 47 |             >
 48 |               選單
 49 |             </a>
 50 |             <div class="dropdown-menu w-auto dropdown-menu-right">
 51 |               <router-link class="dropdown-item text-dark" to="/admin/products">
 52 |                 <i class="fa-wrench fa" aria-hidden="true"></i>
 53 |                 產品管理
 54 |               </router-link>
 55 |               <router-link class="dropdown-item text-dark" to="/admin/orders">
 56 |                 <i class="fa fa-list-ol" aria-hidden="true"></i>
 57 |                 訂單管理
 58 |               </router-link>
 59 |               <router-link class="dropdown-item text-dark" to="/admin/coupons">
 60 |                 <i class="fa fa-ticket" aria-hidden="true"></i>
 61 |                 優惠碼管理
 62 |               </router-link>
 63 |               <router-link
 64 |                 class="dropdown-item text-dark"
 65 |                 to="/test/test_orders"
 66 |               >
 67 |                 <i class="fa fa-flask" aria-hidden="true"></i>
 68 |                 模擬訂單功能
 69 |               </router-link>
 70 |               <div class="dropdown-divider"></div>
 71 |               <a class="dropdown-item text-dark" @click.prevent="signout">
 72 |                 <i class="fa fa-sign-out" aria-hidden="true"></i>
 73 |                 登出
 74 |               </a>
 75 |             </div>
 76 |           </div>
 77 |         </div>
 78 |       </div>
 79 |     </div>
 80 |   </div>
 81 | </template>
 82 | 
 83 | <script>
 84 | export default {
 85 |   data () {
 86 |     return {
 87 |       isLoading: false
 88 |     }
 89 |   },
 90 |   methods: {
 91 |     signout () {
 92 |       const vm = this
 93 |       vm.isLoading = true
 94 |       const api = `${process.env.VUE_APP_APIPATH}logout`
 95 |       vm.$http.post(api).then((res) => {
 96 |         if (res.data.success) {
 97 |           vm.isLoading = false
 98 |           vm.$router.push('/login')
 99 |         } else {
100 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
101 |         }
102 |       })
103 |     }
104 |   }
105 | }
106 | </script>
107 | 


--------------------------------------------------------------------------------
/src/components/MessageAlert.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="message-alert">
  4 |       <div
  5 |         class="alert alert-dismissible"
  6 |         :class="`alert-${item.status}`"
  7 |         v-for="(item, i) in messages"
  8 |         :key="i"
  9 |       >
 10 |         {{ item.message }}
 11 |         <button
 12 |           type="button"
 13 |           class="close"
 14 |           @click="removeMessage(i)"
 15 |           aria-label="Close"
 16 |         >
 17 |           <span aria-hidden="true">&times;</span>
 18 |         </button>
 19 |       </div>
 20 |     </div>
 21 | 
 22 |     <div v-if="this.$route.path.indexOf('admin') === -1 && this.$route.path !== '/login' && this.$route.path !== '/cart'  ">
 23 |       <router-link
 24 |         v-if="this.$route.path.indexOf('test') === -1 && cart.num > 0"
 25 |         to="/cart"
 26 |       >
 27 |         <div class="cart">
 28 |           <span v-if="cart.num > 0" class="badge cart-badge badge-danger">
 29 |             {{ cart.num }}
 30 |           </span>
 31 |           <i
 32 |             :class="{ 'text-muted': cart.num === 0, 'text-dark': cart.num > 0 }"
 33 |             class="fa fa-shopping-cart"
 34 |             aria-hidden="true"
 35 |           ></i>
 36 |         </div>
 37 |       </router-link>
 38 |       <a
 39 |         href="#"
 40 |         @click.prevent="goCart"
 41 |         v-if="this.$route.path.indexOf('test_order') !== -1"
 42 |       >
 43 |         <div class="cart">
 44 |           <span class="badge cart-badge badge-danger">
 45 |             {{ cart.num }}
 46 |           </span>
 47 |           <i
 48 |             class="fa fa-shopping-cart text-dark"
 49 |             aria-hidden="true"
 50 |           ></i>
 51 |         </div>
 52 |       </a>
 53 |     </div>
 54 |   </div>
 55 | </template>
 56 | 
 57 | <script>
 58 | import $ from 'jquery'
 59 | export default {
 60 |   name: 'Navbar',
 61 |   data () {
 62 |     return {
 63 |       messages: [],
 64 |       cart: { num: 0 }
 65 |     }
 66 |   },
 67 |   methods: {
 68 |     updateMessage (message, status) {
 69 |       const timestamp = Math.floor(new Date() / 1000)
 70 |       this.messages.push({
 71 |         message,
 72 |         status,
 73 |         timestamp
 74 |       })
 75 |       this.removeMessageWithTiming(timestamp)
 76 |     },
 77 |     removeMessage (num) {
 78 |       this.messages.splice(num, 1)
 79 |     },
 80 |     removeMessageWithTiming (timestamp) {
 81 |       const vm = this
 82 |       setTimeout(() => {
 83 |         vm.messages.forEach((item, i) => {
 84 |           if (item.timestamp === timestamp) {
 85 |             vm.messages.splice(i, 1)
 86 |           }
 87 |         })
 88 |       }, 5000)
 89 |     },
 90 |     getCart () {
 91 |       const vm = this
 92 |       vm.isLoading = true
 93 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
 94 |       vm.$http.get(api).then((res) => {
 95 |         vm.isLoading = false
 96 |         if (res.data.success) {
 97 |           vm.cart.num = res.data.data.carts.length
 98 |         } else {
 99 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
100 |         }
101 |       })
102 |     },
103 |     goCart () {
104 |       const screenWidth = document.documentElement.clientWidth
105 |       if (screenWidth < 768) {
106 |         $('html,body').animate(
107 |           { scrollTop: $('#cart-list-sm').offset().top },
108 |           800
109 |         )
110 |       } else {
111 |         $('html,body').animate(
112 |           { scrollTop: $('#cart-list-lg').offset().top },
113 |           800
114 |         )
115 |       }
116 |     }
117 |   },
118 |   created () {
119 |     const vm = this
120 |     vm.$bus.$on('message:push', (message, status = 'warning') => {
121 |       vm.getCart()
122 |       vm.updateMessage(message, status)
123 |     })
124 |   },
125 |   watch: {
126 |     $route: function () {
127 |       this.getCart()
128 |     }
129 |   }
130 | }
131 | </script>
132 | 
133 | <style lang="scss" scope>
134 | .message-alert {
135 |   position: fixed;
136 |   max-width: 80%;
137 |   top: 56px;
138 |   right: 10px;
139 |   z-index: 1100;
140 |   & .close {
141 |     line-height: 16px;
142 |   }
143 | }
144 | 
145 | .cart {
146 |   background-color: #fff;
147 |   width: 50px;
148 |   height: 50px;
149 |   border-radius: 25px;
150 |   right: 30px;
151 |   position: fixed;
152 |   z-index: 99999;
153 |   bottom: 50px;
154 |   border: 1px solid #aaa;
155 |   &-badge {
156 |     position: absolute;
157 |     top: 3px;
158 |     right: 3px;
159 |   }
160 |   & i {
161 |     font-size: 25px;
162 |     line-height: 50px;
163 |   }
164 | }
165 | </style>
166 | 


--------------------------------------------------------------------------------
/src/views/backend/TestCheckout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-if="order.id">
  3 |     <loading :active.sync="isLoading">
  4 |       <div class="loadingio-spinner-spin-ur5grgaunp">
  5 |         <div class="ldio-dwsbgiuamos">
  6 |           <div>
  7 |             <div></div>
  8 |           </div>
  9 |           <div>
 10 |             <div></div>
 11 |           </div>
 12 |           <div>
 13 |             <div></div>
 14 |           </div>
 15 |           <div>
 16 |             <div></div>
 17 |           </div>
 18 |           <div>
 19 |             <div></div>
 20 |           </div>
 21 |           <div>
 22 |             <div></div>
 23 |           </div>
 24 |           <div>
 25 |             <div></div>
 26 |           </div>
 27 |           <div>
 28 |             <div></div>
 29 |           </div>
 30 |         </div>
 31 |       </div>
 32 |     </loading>
 33 |     <div class="container mb-4 mt-md-5">
 34 |       <div>
 35 |         <h4 class="my-3">
 36 |           <i class="fa fa-check-square-o" aria-hidden="true"></i>
 37 |           結帳確認
 38 |         </h4>
 39 |         <form class="row justify-content-md-center" @submit.prevent="payOrder">
 40 |           <div class="col-lg-7">
 41 |             <h5 class="my-3">購物車內容</h5>
 42 |             <table class="table table-striped table-bordered text-dark">
 43 |               <thead>
 44 |                 <th>品名</th>
 45 |                 <th>數量</th>
 46 |                 <th>單價</th>
 47 |               </thead>
 48 |               <tbody>
 49 |                 <tr v-for="item in order.products" :key="item.id">
 50 |                   <td class="align-middle text-left">
 51 |                     {{ item.product.title }}
 52 |                   </td>
 53 |                   <td class="align-middle">
 54 |                     {{ item.qty }}/{{ item.product.unit }}
 55 |                   </td>
 56 |                   <td class="align-middle text-right">
 57 |                     {{ item.final_total | numFormat | dollarSign }}
 58 |                   </td>
 59 |                 </tr>
 60 |               </tbody>
 61 |               <tfoot>
 62 |                 <tr>
 63 |                   <td colspan="2" class="text-right">總計</td>
 64 |                   <td class="text-right">
 65 |                     {{ order.total | numFormat | dollarSign }}
 66 |                   </td>
 67 |                 </tr>
 68 |               </tfoot>
 69 |             </table>
 70 |           </div>
 71 |           <div class="col-lg-5">
 72 |             <h5 class="my-3">收件人資料</h5>
 73 |             <div class="border list-bg p-3">
 74 |               <table class="table text-dark m-0">
 75 |                 <tbody>
 76 |                   <tr>
 77 |                     <th class="border-0" width="120">Email :</th>
 78 |                     <td class="border-0">{{ order.user.email }}</td>
 79 |                   </tr>
 80 |                   <tr>
 81 |                     <th>姓名 :</th>
 82 |                     <td>{{ order.user.name }}</td>
 83 |                   </tr>
 84 |                   <tr>
 85 |                     <th>收件人電話 :</th>
 86 |                     <td>{{ order.user.tel }}</td>
 87 |                   </tr>
 88 |                   <tr>
 89 |                     <th>收件人地址 :</th>
 90 |                     <td>{{ order.user.address }}</td>
 91 |                   </tr>
 92 |                   <tr>
 93 |                     <th>付款狀態 :</th>
 94 |                     <td class="font-weight-bolder">
 95 |                       <i v-if="!order.is_paid" class="text-muted">尚未付款</i>
 96 |                       <span v-else class="text-dark">付款完成</span>
 97 |                     </td>
 98 |                   </tr>
 99 |                 </tbody>
100 |               </table>
101 |             </div>
102 | 
103 |             <div v-if="order.is_paid === false">
104 |               <button class="btn btn-dark my-3">確認付款</button>
105 |             </div>
106 |           </div>
107 |         </form>
108 |       </div>
109 |     </div>
110 |   </div>
111 | </template>
112 | 
113 | <script>
114 | export default {
115 |   data () {
116 |     return {
117 |       order: {},
118 |       orderId: '',
119 |       isLoading: false
120 |     }
121 |   },
122 |   methods: {
123 |     getOrder () {
124 |       const vm = this
125 |       vm.isLoading = true
126 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/order/${vm.orderId}`
127 |       vm.$http.get(api).then((res) => {
128 |         if (res.data.success) {
129 |           vm.order = res.data.order
130 |         } else {
131 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
132 |         }
133 |         vm.isLoading = false
134 |       })
135 |     },
136 |     payOrder () {
137 |       const vm = this
138 |       vm.isLoading = true
139 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/pay/${vm.orderId}`
140 |       vm.$http.post(api).then((res) => {
141 |         vm.isLoading = false
142 |         if (res.data.success) {
143 |           vm.$bus.$emit('message:push', res.data.message, 'dark')
144 |           vm.getOrder()
145 |         } else {
146 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
147 |         }
148 |       })
149 |     }
150 |   },
151 |   created () {
152 |     this.orderId = this.$route.params.orderId
153 |     this.getOrder()
154 |   }
155 | }
156 | </script>
157 | 


--------------------------------------------------------------------------------
/src/views/frontend/Coupons.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container text-dark">
  3 |     <div class="lg mb-5">
  4 |       <h3 class="py-4 border-bottom">
  5 |         <i class="fa fa-ticket"></i>
  6 |         優惠券專區
  7 |       </h3>
  8 |       <i>
  9 |         <h4 class="pt-3 text-muted">新客優惠</h4>
 10 |       </i>
 11 |       <div class="row">
 12 |           <div
 13 |           class="col-lg-4 col-md-6 m-auto"
 14 |         >
 15 |           <div class="sawtooth bg-warning p-2 my-4">
 16 |             <div class="float-left pt-2 sawtooth-big">
 17 |               <h1 class="m-0 mb-2">
 18 |                 88
 19 |                 <small>折</small>
 20 |               </h1>
 21 |               <button
 22 |                 class="btn rounded px-1 py-0 btn-sm btn-danger"
 23 |                 @click="copyBtn('new88')"
 24 |               >
 25 |                 點擊領取
 26 |               </button>
 27 |               <input
 28 |                 type="text"
 29 |                 class="mt-5 text-center input-bg"
 30 |                 id="new88"
 31 |                 value="new88"
 32 |               />
 33 |             </div>
 34 |             <div class="float-right pt-3 border-left sawtooth-content">
 35 |               <h5 class="text-dark">新客專屬優惠碼</h5>
 36 |               <p>
 37 |                 全館不限金額皆享優惠
 38 |                 <br />
 39 |                 <u class="text-dark">
 40 |                   無使用期限 - 限首購
 41 |                 </u>
 42 |               </p>
 43 |             </div>
 44 |             <div class="bg-icon">
 45 |               <div class="icon-big">🎁</div>
 46 |             </div>
 47 |           </div>
 48 |         </div>
 49 |       </div>
 50 |       <i>
 51 |         <h4 class="pt-3 text-muted">其他優惠</h4>
 52 |       </i>
 53 |       <div class="row">
 54 |         <div
 55 |           class="col-lg-4 col-md-6 m-auto"
 56 |           v-for="item in coupons"
 57 |           :key="item.id"
 58 |         >
 59 |           <div class="sawtooth bg-light p-2 my-4">
 60 |             <div class="float-left pt-2 sawtooth-big">
 61 |               <h1 class="m-0 mb-2">
 62 |                 {{ item.percent }}
 63 |                 <small>折</small>
 64 |               </h1>
 65 |               <button
 66 |                 class="btn rounded px-1 py-0 btn-sm btn-danger"
 67 |                 @focus="copyBtn(item.code)"
 68 |               >
 69 |                 點擊領取
 70 |               </button>
 71 |               <input
 72 |                 type="text"
 73 |                 class="mt-5 text-center input-bg"
 74 |                 :id="item.code"
 75 |                 :value="item.code"
 76 |               />
 77 |             </div>
 78 |             <div class="float-right pt-3 border-left sawtooth-content">
 79 |               <h5 class="text-dark">{{ item.title }}</h5>
 80 |               <p>
 81 |                 全館不限金額皆享優惠
 82 |                 <br />使用期限至
 83 |                 <u class="text-dark">
 84 |                   {{ new Date(item.due_date).toLocaleDateString() }}
 85 |                 </u>
 86 |               </p>
 87 |             </div>
 88 |             <div class="bg-icon">
 89 |               <div class="icon-big">🎊</div>
 90 |             </div>
 91 |           </div>
 92 |         </div>
 93 |       </div>
 94 |     </div>
 95 |     <div class="m-3 sm">
 96 |       <h5 class="my-3">
 97 |         <i class="fa fa-ticket"></i>
 98 |         優惠券專區
 99 |       </h5>
100 |       <div>
101 |         <div class="card mb-5 bg-white">
102 |           <div class="card-body index">
103 |             <h5 class="card-title h6 text-dark">新客加碼送！</h5>
104 |             <hr />
105 |             <p class="card-text text-dark">
106 |               全館不限金額享
107 |               <span class="text-danger font-width-bolder">88 折</span>
108 |               優惠
109 |               <br />無使用期限
110 |               <br />
111 |               <br />
112 |               <span>立即點擊複製下方優惠碼並在結帳時使用</span>
113 |             </p>
114 |             <input
115 |               type="text"
116 |               class="text-center text-muted input-bg"
117 |               value="new88"
118 |               @focus="copy"
119 |             />
120 |           </div>
121 |           <div class="sm-bg-icon">
122 |             <div class="icon-big">🎁</div>
123 |           </div>
124 |         </div>
125 |       </div>
126 |       <div v-for="item in coupons" :key="item.id">
127 |         <div class="card mb-5 border-0 bg-light">
128 |           <div class="card-body index">
129 |             <h5 class="card-title h6 text-secondary">{{ item.title }}</h5>
130 |             <hr />
131 |             <p class="card-text text-dark">
132 |               全館不限金額享
133 |               <span class="text-danger font-width-bolder">
134 |                 {{ item.percent }} 折
135 |               </span>
136 |               優惠
137 |               <br />
138 |               使用期限至 {{ new Date(item.due_date).toLocaleDateString() }}
139 |               <br />
140 |               <br />
141 |               <span class="text-muted">
142 |                 立即點擊複製下方優惠碼並在結帳時使用
143 |               </span>
144 |             </p>
145 |             <input
146 |               type="text"
147 |               class="text-center text-secondary input-bg"
148 |               @focus="copy"
149 |               v-model="item.code"
150 |             />
151 |           </div>
152 |           <div class="sm-bg-icon">
153 |             <div class="icon-big">🎊</div>
154 |           </div>
155 |         </div>
156 |       </div>
157 |     </div>
158 |   </div>
159 | </template>
160 | 
161 | <script>
162 | export default {
163 |   data () {
164 |     return {
165 |       coupons: [
166 |         {
167 |           code: 'GAMESKY9',
168 |           due_date: 1631750400000,
169 |           num: 1,
170 |           percent: 9,
171 |           title: '週年慶優惠券'
172 |         },
173 |         {
174 |           code: '8YEARS8',
175 |           due_date: 1665878400000,
176 |           id: 2,
177 |           percent: 8,
178 |           title: '開幕八週年優惠券'
179 |         },
180 |         {
181 |           code: 'LOVEYOUTHX75',
182 |           due_date: 1613865600000,
183 |           id: 3,
184 |           percent: 75,
185 |           title: '佛心優惠券限時搶購'
186 |         }
187 |       ]
188 |     }
189 |   },
190 |   methods: {
191 |     copy (e) {
192 |       e.currentTarget.select()
193 |       document.execCommand('Copy')
194 |       this.$bus.$emit('message:push', '複製成功', 'dark')
195 |     },
196 |     copyBtn (id) {
197 |       const ipt = document.getElementById(id)
198 |       ipt.select()
199 |       document.execCommand('copy')
200 |       this.$bus.$emit('message:push', '複製成功', 'dark')
201 |     }
202 |   }
203 | }
204 | </script>
205 | 
206 | <style lang="scss" scoped>
207 | @import "@/assets/scss/_coupons.scss";
208 | </style>
209 | 


--------------------------------------------------------------------------------
/src/views/frontend/Products.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <loading :active.sync="isLoading">
  4 |       <h4>載入中 請稍候...</h4>
  5 |     </loading>
  6 | 
  7 |     <div class="row mb-3">
  8 |       <CategoryList
  9 |         class="lg col-lg-3"
 10 |         :categories="categories"
 11 |         :active="active"
 12 |         @getProducts="getProducts"
 13 |       ></CategoryList>
 14 | 
 15 |       <div class="col-lg-9">
 16 |         <h4 class="my-lg-4 mt-4 text-left">商品列表</h4>
 17 |         <div class="dropdown sm md">
 18 |           當前商品類別：
 19 |           <button class="btn btn-sm border-dark mb-1 dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 20 |             {{ active.name }}
 21 |           </button>
 22 |           <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
 23 |             <a
 24 |               v-for="item in categories"
 25 |               href="#"
 26 |               :key="item.title"
 27 |               :class="{ active: item.title === active.name }"
 28 |               @click.prevent="getProducts(item.path)"
 29 |               class="dropdown-item"
 30 |             >
 31 |               {{ item.title }}
 32 |             </a>
 33 |           </div>
 34 |         </div>
 35 |         <div class="row">
 36 |           <div class="col-md-4" v-for="item in products" :key="item.id">
 37 |             <div class="card my-2"
 38 |                 @click="$router.push(`/product/${item.id}`)"
 39 |             >
 40 |               <div
 41 |                 class="card-img"
 42 |                 :style="{
 43 |                   backgroundImage: `url(${item.imageUrl || item.image})`
 44 |                 }"
 45 |               ></div>
 46 |               <div class="card-body">
 47 |                 <h5 class="card-title">
 48 |                   {{ item.title }}
 49 |                   <br />
 50 |                   <small>
 51 |                     <span class="badge badge-secondary">
 52 |                       {{ item.category }}
 53 |                     </span>
 54 |                   </small>
 55 |                 </h5>
 56 |                 {{ item.content }}
 57 |                 <div class="mt-2">
 58 |                   <div class="h5" v-if="!item.price">
 59 |                     {{ item.origin_price }} 元
 60 |                   </div>
 61 |                   <del class="text-muted" v-if="item.price">
 62 |                     原價 {{ item.origin_price }} 元
 63 |                   </del>
 64 | 
 65 |                   <div class="h5" v-if="item.price">
 66 |                     現在只要 {{ item.price }} 元
 67 |                   </div>
 68 |                 </div>
 69 |               </div>
 70 |             </div>
 71 |           </div>
 72 |         </div>
 73 | 
 74 |         <Pagination
 75 |           v-if="active.path === 'all'"
 76 |           :pages="pagination"
 77 |           @event="getPage"
 78 |         ></Pagination>
 79 |       </div>
 80 |     </div>
 81 |   </div>
 82 | </template>
 83 | 
 84 | <script>
 85 | import Pagination from '@/components/Pagination'
 86 | import CategoryList from '@/components/CategoryList'
 87 | 
 88 | export default {
 89 |   data () {
 90 |     return {
 91 |       isLoading: false,
 92 |       products: [],
 93 |       categories: [],
 94 |       active: { name: '', path: '' },
 95 |       pagination: {}
 96 |     }
 97 |   },
 98 |   components: { Pagination, CategoryList },
 99 |   watch: {
100 |     products: () => {
101 |       document.body.scrollTop = 0
102 |       document.documentElement.scrollTop = 0
103 |     }
104 |   },
105 |   methods: {
106 |     getProducts (category = this.$route.params.category) {
107 |       const vm = this
108 |       vm.isLoading = true
109 |       vm.$router.push('/products/' + category).catch((err) => err)
110 |       vm.active.path = category
111 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/products/all`
112 |       vm.$http.get(api).then((res) => {
113 |         if (res.data.success) {
114 |           if (category === 'all') {
115 |             vm.getPage()
116 |             vm.active.name = '全部'
117 |           } else {
118 |             vm.products = res.data.products.filter((item) => {
119 |               return item.category === category
120 |             })
121 |             vm.active.name = category
122 |           }
123 |         } else {
124 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
125 |         }
126 |         vm.isLoading = false
127 |       })
128 |     },
129 |     getPage (page = 1) {
130 |       const vm = this
131 |       vm.isLoading = true
132 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/products?page=${page}`
133 |       vm.$http.get(api).then((res) => {
134 |         vm.isLoading = false
135 |         if (res.data.success) {
136 |           vm.products = res.data.products
137 |           vm.pagination = res.data.pagination
138 |         } else {
139 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
140 |         }
141 |       })
142 |     },
143 |     getProduct (item) {
144 |       this.$router.push(`/product/${item.id}`)
145 |     },
146 |     getCategory () {
147 |       const vm = this
148 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/products/all`
149 |       vm.$http.get(api).then((res) => {
150 |         if (res.data.success) {
151 |           const arr = res.data.products
152 |           const set = new Set()
153 |           arr.filter((item) =>
154 |             !set.has(item.category) ? set.add(item.category) : false
155 |           )
156 |           const temCategory = [...set]
157 |           temCategory.forEach((item) => {
158 |             vm.categories.push({ title: item, num: 0, path: '' })
159 |           })
160 |           vm.categories.unshift({ title: '全部', num: 0, path: '' })
161 |           const arr2 = []
162 |           for (let i = 1; i < vm.categories.length; i++) {
163 |             const arr = res.data.products.filter((item) => {
164 |               return item.category === vm.categories[i].title
165 |             })
166 |             arr2.push(arr.length)
167 |           }
168 |           arr2.unshift(arr.length)
169 |           for (let j = 0; j < arr2.length; j++) {
170 |             vm.categories[j].num = arr2[j]
171 |           }
172 |           const arr4 = ['all', 'Castorland', 'Clementoni', 'Ravensburger']
173 |           for (let i = 0; i < vm.categories.length; i++) {
174 |             vm.categories[i].path = arr4[i]
175 |           }
176 |           vm.getProducts()
177 |         } else {
178 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
179 |         }
180 |       })
181 |     }
182 |   },
183 |   created () {
184 |     this.getCategory()
185 |     this.getProducts()
186 |     this.getPage(1)
187 |   }
188 | }
189 | </script>
190 | 
191 | <style lang="scss" scoped>
192 | .media-img {
193 |   width: 35%;
194 | }
195 | 
196 | .card-img{
197 |   height: 200px;
198 |   background-size: cover;
199 |   background-position: center;
200 | }
201 | 
202 | .card:hover{
203 |   cursor: pointer;
204 |   background-color: #343a40;
205 |   color: #f8f9fa;
206 | }
207 | 
208 | @media screen and (min-width: 420px) and (max-width: 992px) {
209 |   .lg {
210 |     display: none;
211 |   }
212 | 
213 |   .md {
214 |     display: block;
215 |   }
216 | }
217 | </style>
218 | 


--------------------------------------------------------------------------------
/src/views/frontend/About.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container ">
  3 |     <h2 class="my-4 text-dark">
  4 |       <i aria-hidden="true" class="fa fa-info mr-2"></i>
  5 |       關於拼圖迷
  6 |     </h2>
  7 |     <div class="lead">
  8 |       <p>
  9 |         本公司成立於2012年，由一群特別喜愛進口拼圖的同仁們合力創建，經過不斷接洽後，最終取得了三大品牌授權:
 10 |       </p>
 11 |       <div class="row lg">
 12 |         <div class="col-md-4 border my-3 py-3">
 13 |           <a
 14 |             href="#"
 15 |             @click.prevent="goBrand('castorland')"
 16 |             class="text-muted h2 mb-2"
 17 |           >
 18 |             <span class="small">波蘭</span>
 19 |             <br />Castorland
 20 |           </a>
 21 |         </div>
 22 |         <div class="col-md-4 border my-3 py-3">
 23 |           <a
 24 |             href="#"
 25 |             @click.prevent="goBrand('clementoni')"
 26 |             class="text-muted h2 mb-2"
 27 |           >
 28 |             <span class="small">義大利</span>
 29 |             <br />Clementoni
 30 |           </a>
 31 |         </div>
 32 |         <div class="col-md-4 border my-3 py-3">
 33 |           <a
 34 |             href="#"
 35 |             @click.prevent="goBrand('ravensburger')"
 36 |             class="text-muted h2 mb-2"
 37 |           >
 38 |             <span class="small">德國</span>
 39 |             <br />Ravensburger
 40 |           </a>
 41 |         </div>
 42 |       </div>
 43 |       <div class="row sm">
 44 |         <div class="border m-3 py-3">
 45 |           <a
 46 |             href="#"
 47 |             @click.prevent="goBrand('castorland')"
 48 |             class="text-muted h2 mb-2"
 49 |           >
 50 |             <span class="small">波蘭</span>
 51 |             <br />Castorland
 52 |           </a>
 53 |         </div>
 54 |         <div class="border m-3 py-3">
 55 |           <a
 56 |             href="#"
 57 |             @click.prevent="goBrand('clementoni')"
 58 |             class="text-muted h2 mb-2"
 59 |           >
 60 |             <span class="small">義大利</span>
 61 |             <br />Clementoni
 62 |           </a>
 63 |         </div>
 64 |         <div class="border m-3 py-3">
 65 |           <a
 66 |             href="#"
 67 |             @click.prevent="goBrand('ravensburger')"
 68 |             class="text-muted h2 mb-2"
 69 |           >
 70 |             <span class="small">德國</span>
 71 |             <br />Ravensburger
 72 |           </a>
 73 |         </div>
 74 |       </div>
 75 |       <p>
 76 |         並開始經營電商平台，致力於給進口拼圖迷們最好的服務，讓客戶們不必再到處尋求總是要等超級霹靂久的代購！
 77 |       </p>
 78 |     </div>
 79 |     <hr />
 80 |     <h3 class="py-3 text-dark">
 81 |       <i class="fa fa-quote-right"></i>
 82 |       各家品牌介紹
 83 |     </h3>
 84 |     <div class="card-group">
 85 |       <div class="card" id="castorland">
 86 |         <img
 87 |           alt="該品牌介紹圖"
 88 |           src="@/assets/image/castorland.jpg"
 89 |           class="card-img-top"
 90 |         />
 91 |         <div class="card-body">
 92 |           <h4 class="card-title">
 93 |             波蘭 - Castorland
 94 |           </h4>
 95 |           <p class="card-text text-lg">
 96 |             公司成立於1989年，拼圖切割方式是採規則切割，刀膜跟heye類似，拼片較薄，也因此形狀的辨識程度很不錯，結合程度分明。但其實若與美系的軟拼片比較，該品牌還是算較硬實的拼片，其拼片聲音清脆，手感很好，且拼圖的屑屑量並不多，拼組時只要滑進去即可。其印刷色澤也很棒，就算靠近去看也完全不會有模糊感。是波蘭有名的拼圖品牌！
 97 |           </p>
 98 |           <router-link to="/products/Castorland" class="btn btn-secondary"
 99 |             >搶購去 >></router-link
100 |           >
101 |         </div>
102 |         <div class="card-footer">
103 |           <span class="text-muted">最後更新於 2020/10/03</span>
104 |         </div>
105 |       </div>
106 |       <div class="card" id="clementoni">
107 |         <img
108 |           alt="該品牌介紹圖"
109 |           src="@/assets/image/clementoni.jpg"
110 |           class="card-img-top"
111 |         />
112 |         <div class="card-body">
113 |           <h4 class="card-title">
114 |             義大利 - Clementoni
115 |           </h4>
116 |           <p class="card-text text-lg">
117 |             Clementoni 拼圖公司是著名的義大利拼圖公司，
118 |             以高雅藝術和優級質材製作， 頂級採景角度展現出優美的拼圖圖案，
119 |             產品包括全球名勝地風景、博物館收藏的名畫，和兒童動畫圖，
120 |             不愧是來自藝術之國義大利的拼圖廠牌。
121 |             其迷人的原版拼圖擁有著紙材佳印刷清晰，
122 |             色彩鮮明，刀切變化明顯不易錯放位置，
123 |             打印、密和的精密度都是沒話說的高品質。 千萬不要錯過了！
124 |           </p>
125 |           <router-link to="/products/Clementoni" class="btn btn-secondary"
126 |             >搶購去 >></router-link
127 |           >
128 |         </div>
129 |         <div class="card-footer">
130 |           <span class="text-muted">最後更新於 2020/10/03</span>
131 |         </div>
132 |       </div>
133 |       <div class="card" id="ravensburger">
134 |         <img
135 |           alt="該品牌介紹圖"
136 |           src="@/assets/image/ravensburger.jpg"
137 |           class="card-img-top"
138 |         />
139 |         <div class="card-body">
140 |           <h4 class="card-title">
141 |             德國 - Ravensburger
142 |           </h4>
143 |           <p class="card-text text-lg">
144 |             創始於1833年來自德國的百年拼圖品牌，該品牌在德國家喻戶曉。其名字
145 |             Ravensburger
146 |             是一個德國小鎮的名字，中文名“睿思”，取意於“睿智地思考”。該公司的每個拼圖畫面都是通過手工切割的，因此每幅拼圖的拼片都不一樣，每個拼片也只有在原生的圖畫中可以完全契合。該公司目前最多片數的拼圖有4萬多片，已打破世界紀錄。
147 |           </p>
148 |           <router-link to="/products/Ravensburger" class="btn btn-secondary"
149 |             >搶購去 >></router-link
150 |           >
151 |         </div>
152 |         <div class="card-footer">
153 |           <span class="text-muted">最後更新於 2020/10/03</span>
154 |         </div>
155 |       </div>
156 |     </div>
157 |     <hr />
158 |     <h3 class="py-3 text-dark"><i class="fa fa-map-signs"></i> 我們的追求</h3>
159 |     <li class="media row">
160 |       <img
161 |         src="https://images.unsplash.com/photo-1472457847783-3d10540b03d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
162 |         class="col-lg-5 lg align-self-center"
163 |         alt="飛高高圖片"
164 |       />
165 |       <div class="media-body col-lg-7 align-self-center">
166 |         <h4 class="m-3">透過拼圖促進親子間的關係 ❤️</h4>
167 |         <img
168 |           alt="飛高高圖片"
169 |           src="https://images.unsplash.com/photo-1472457847783-3d10540b03d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
170 |           class="col-lg-5 sm align-self-center"
171 |         />
172 |         <p class="lead">
173 |           讓大人與小孩透過我們的產品獲得更多親子同樂時光，促進交流，
174 |           <br />更可以提升小孩子的發展，活在拼圖與父母愛下成長的更好！
175 |           <br />本公司販賣的各項益智拼圖都能幫助孩子提升專注力、觀察力，
176 |           <br />還能促進大家靈活思考！手腦並用，使大人小孩都能玩得不亦樂乎 🎉
177 |         </p>
178 |       </div>
179 |     </li>
180 |     <li class="media my-3 row">
181 |       <div class="media-body col-lg-7 align-self-center">
182 |         <h4 class="m-3">陪伴您與您的子孫一同長大 ❤️</h4>
183 |         <img
184 |           src="https://images.unsplash.com/photo-1518331647614-7a1f04cd34cf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80"
185 |           alt="一起玩圖片"
186 |           class="col-lg-5 sm align-self-center"
187 |         />
188 |         <p class="lead">
189 |           我們從 2012 年開幕至今，已經擁有許多像家人般存在的老顧客了，
190 |           <br />希望未來的八年、十八年、二十八年都能一路相伴到老！
191 |           <br />您們的陪伴就是我們持續走下去的動力！感謝一路上有您義氣相挺！
192 |           <br />我們還要繼續走過下一個金融風暴、繼續看您與您的子孫成長 ✨
193 |         </p>
194 |       </div>
195 |       <img
196 |         src="https://images.unsplash.com/photo-1518331647614-7a1f04cd34cf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1049&q=80"
197 |         alt="一起玩圖片"
198 |         class="col-lg-5 lg align-self-center"
199 |       />
200 |     </li>
201 |   </div>
202 | </template>
203 | 
204 | <script>
205 | import $ from 'jquery'
206 | export default {
207 |   data () {
208 |     return {}
209 |   },
210 |   methods: {
211 |     goBrand (id) {
212 |       $('html,body').animate({ scrollTop: $(`#${id}`).offset().top }, 800)
213 |     }
214 |   }
215 | }
216 | </script>
217 | 
218 | <style scope>
219 | .card-img-top {
220 |   height: 240px;
221 | }
222 | </style>
223 | 


--------------------------------------------------------------------------------
/src/views/backend/AdminOrders.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="text-dark">
  3 |     <loading :active.sync="isLoading">
  4 |       <div class="loadingio-spinner-spin-ur5grgaunp">
  5 |         <div class="ldio-dwsbgiuamos">
  6 |           <div>
  7 |             <div></div>
  8 |           </div>
  9 |           <div>
 10 |             <div></div>
 11 |           </div>
 12 |           <div>
 13 |             <div></div>
 14 |           </div>
 15 |           <div>
 16 |             <div></div>
 17 |           </div>
 18 |           <div>
 19 |             <div></div>
 20 |           </div>
 21 |           <div>
 22 |             <div></div>
 23 |           </div>
 24 |           <div>
 25 |             <div></div>
 26 |           </div>
 27 |           <div>
 28 |             <div></div>
 29 |           </div>
 30 |         </div>
 31 |       </div>
 32 |     </loading>
 33 | 
 34 |     <div>
 35 |       <div class="mt-5 lg">
 36 |         <div class="float-left">
 37 |           <h4 class="mt-3 font-weight-bold">
 38 |             <i class="fa fa-list-ol" aria-hidden="true"></i>
 39 |             訂單管理
 40 |           </h4>
 41 |         </div>
 42 |       </div>
 43 |       <table class="table lg table-striped table-bordered mt-4 text-dark">
 44 |         <thead>
 45 |           <tr>
 46 |             <th scope="col">訂單編號</th>
 47 |             <th scope="col">付款狀態</th>
 48 |             <th scope="col">操作</th>
 49 |           </tr>
 50 |         </thead>
 51 |         <tbody>
 52 |           <tr v-for="item in orders" :key="item.id">
 53 |             <td>
 54 |               {{ item.id }}
 55 |               <br />
 56 |               <i class="text-muted small">
 57 |                 成立於:
 58 |                 {{ new Date(item.create_at * 1000).toLocaleDateString() }}
 59 |               </i>
 60 |             </td>
 61 |             <td :class="{ 'text-muted': !item.is_paid }">
 62 |               {{ item.total | numFormat | dollarSign }} /
 63 |               <b v-if="item.is_paid"> 已付款</b>
 64 |               <i v-else> 未付款</i>
 65 |             </td>
 66 |             <td>
 67 |               <button
 68 |                 class="btn btn-dark btn-sm"
 69 |                 @click="openModal(item)"
 70 |               >查看購買項目</button>
 71 |             </td>
 72 |           </tr>
 73 |         </tbody>
 74 |       </table>
 75 |     </div>
 76 | 
 77 |     <div class="sm">
 78 |       <div class="float-left">
 79 |         <h5 class="mb-3 font-weight-bold">
 80 |           <i class="fa fa-list-ol"></i>
 81 |           訂單管理
 82 |         </h5>
 83 |       </div>
 84 |       <table class="table table-striped table-bordered text-dark">
 85 |         <thead>
 86 |           <tr>
 87 |             <th scope="col">訂單編號 - click to see more</th>
 88 |             <th scope="col">付款狀態</th>
 89 |           </tr>
 90 |         </thead>
 91 |         <tbody>
 92 |           <tr v-for="item in orders" :key="item.id">
 93 |             <td>
 94 |               <button
 95 |                 @click="openModal(item)"
 96 |                 class="btn btn-sm btn-outline-dark border-0"
 97 |               >
 98 |                 {{ item.id }}
 99 |               </button>
100 |             </td>
101 |             <td
102 |               class="text-dark"
103 |               :class="{ 'text-muted': item.is_paid === false }"
104 |             >
105 |               <span v-if="item.is_paid">☑️ 已付款</span>
106 |               <span v-else>✖️ 未付款</span>
107 |               <br />
108 |               {{ item.total | numFormat | dollarSign }}
109 |             </td>
110 |           </tr>
111 |         </tbody>
112 |       </table>
113 |     </div>
114 | 
115 |     <Pagination :pages="pagination" @event="getOrders"></Pagination>
116 | 
117 |     <div
118 |       class="modal fade"
119 |       id="orderModal"
120 |       tabindex="-1"
121 |       role="dialog"
122 |       aria-labelledby="exampleModalLabel"
123 |       aria-hidden="true"
124 |     >
125 |       <div class="modal-dialog modal-md" role="document">
126 |         <div class="modal-content border-0">
127 |           <div class="modal-header bg-dark text-white">
128 |             <h5 class="modal-title" id="exampleModalLabel">
129 |               <span>訂單明細</span>
130 |             </h5>
131 |             <button
132 |               type="button"
133 |               class="close"
134 |               data-dismiss="modal"
135 |               aria-label="Close"
136 |             >
137 |               <span class="text-light" aria-hidden="true">&times;</span>
138 |             </button>
139 |           </div>
140 |           <div class="modal-body">
141 |             <div class="row">
142 |               <div class="col-10 mx-auto my-2">
143 |                 <div class="text-muted">訂單編號:</div>
144 |                 <div>{{ order.id }}</div>
145 |               </div>
146 |               <div class="col-10 mx-auto my-2">
147 |                 <div class="text-muted">成立時間:</div>
148 |                 <i>
149 |                   {{ new Date(order.create_at * 1000).toLocaleDateString() }}
150 |                 </i>
151 |               </div>
152 |               <div class="col-12 my-2">
153 |                 <div class="text-muted">購買清單:</div>
154 |                 <div
155 |                   class="w-75 mx-auto"
156 |                   v-for="product in order.products"
157 |                   :key="product.id"
158 |                 >
159 |                   {{ product.product.title }}
160 |                   {{ product.product.price | numFormat | dollarSign }} x
161 |                   {{ product.qty }}{{ product.product.unit }}
162 |                 </div>
163 |               </div>
164 |               <div class="col-10 mx-auto my-2">
165 |                 <div class="text-muted">付款狀態:</div>
166 |                 <div
167 |                   class="text-dark"
168 |                   :class="{ 'text-muted': order.is_paid === false }"
169 |                 >
170 |                   <b v-if="order.is_paid">已付款</b>
171 |                   <i v-else>未付款</i>
172 |                   {{ order.total | numFormat | dollarSign }}
173 |                 </div>
174 |               </div>
175 |             </div>
176 |           </div>
177 |           <div class="modal-footer">
178 |             <button
179 |               type="button"
180 |               class="btn btn-outline-secondary"
181 |               data-dismiss="modal"
182 |             >
183 |               確定
184 |             </button>
185 |           </div>
186 |         </div>
187 |       </div>
188 |     </div>
189 |   </div>
190 | </template>
191 | 
192 | <script>
193 | import Pagination from '@/components/Pagination'
194 | import $ from 'jquery'
195 | 
196 | export default {
197 |   data () {
198 |     return {
199 |       orders: [],
200 |       pagination: {},
201 |       isLoading: false,
202 |       order: {}
203 |     }
204 |   },
205 |   methods: {
206 |     getOrders (page = 1) {
207 |       const vm = this
208 |       vm.isLoading = true
209 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/admin/orders?page=${page}`
210 |       vm.$http.get(api).then((res) => {
211 |         vm.isLoading = false
212 |         if (res.data.success) {
213 |           vm.orders = res.data.orders
214 |           vm.pagination = res.data.pagination
215 |         } else {
216 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
217 |         }
218 |       })
219 |     },
220 |     copy (e) {
221 |       e.currentTarget.select()
222 |       document.execCommand('Copy')
223 |       this.$bus.$emit('message:push', '複製成功', 'dark')
224 |     },
225 |     openModal (item) {
226 |       this.order = item
227 |       $('#orderModal').modal('show')
228 |     }
229 |   },
230 |   created () {
231 |     this.getOrders()
232 |   },
233 |   components: {
234 |     Pagination
235 |   }
236 | }
237 | </script>
238 | 
239 | <style scoped>
240 | .input {
241 |   border: 0;
242 |   background: transparent;
243 | }
244 | </style>
245 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue 出一個電商教學手冊
  2 | 
  3 | ## 專案說明
  4 | 
  5 | 該專案使用 `vue-cli v3` 以上版本 並添加了 `ESLint`
  6 | 
  7 |   * 若一開始沒有為專案添加 ESLint 可通過以下方式加入：
  8 | 
  9 |     1. 開啟終端機 切到當前專案資料夾
 10 | 
 11 |     2. 輸入 `vue add eslint`
 12 | 
 13 |     3. 選擇風格(不熟悉者建議選擇 Standard 風格)
 14 | 
 15 | ## 結構說明
 16 | 
 17 | ### src
 18 | 
 19 | 主要用到的檔案都在 `src` 這個資料夾中
 20 | 
 21 | `src/main.js` 是入口文件 裡面處理各種插件的配置
 22 | 
 23 | `src/router/index.js` 專門處理所有路由元件的檔案
 24 | 
 25 | `src/App.vue` 是整個 vue 實例
 26 | 
 27 | `src/assets/scss` 資料夾存放需要用到的樣式
 28 | 
 29 | `src/assets/image` 資料夾存放需要用到的圖片
 30 | 
 31 | `src/components` 資料夾存放共用的元件
 32 | 
 33 | ### views
 34 | 
 35 | 用來存放要作為頁面的檔案 
 36 | 
 37 |  - 這裏為了區別前後台 另外添加了 `backend` `frontend` 兩個資料夾
 38 | 
 39 | ### public
 40 | 
 41 | 裡面存放不需要被編譯的檔案 以及最主要的 `index.html`
 42 | 
 43 |  - `index.html` 例外 會被編譯
 44 | 
 45 | ### 其他自行創建的檔案
 46 | 
 47 |  - `.env` 用來設定環境變量
 48 | 
 49 |  - `webpack.config.js` 用來設定路徑 在該檔案中設定用 `@` 取代 `src` 資料夾路徑
 50 | 
 51 |  - `vue.config.js` 用來設定生產環境模式下的 `gh-page` 引用路徑
 52 | 
 53 |  - `.editorconfig` 加入 ESLint 後自動創建的檔案
 54 | 
 55 |  - `jsconfig.json` 手動設定 ESLint
 56 | 
 57 | ## 一些比較重要的代碼詳解
 58 | 
 59 | ### 1. 路由守衛
 60 | 
 61 | vue-router 中提供了一個路由守衛的功能，我們可以藉由它來阻止路由跳轉，比如某些頁面需要登入後才能訪問，就可以藉由路由守衛判斷登入狀態再進行頁面訪問。
 62 | 
 63 | ```js
 64 |  
 65 | router.beforeEach((to, from, next) => {
 66 |   // 這裏更改網頁的 title
 67 |   if (to.meta.title) {
 68 |     document.title = to.meta.title
 69 |   }
 70 |   // 這裏檢查是否登入
 71 |   if(to.meta.requiresAuth) {
 72 |     const api = process.env.APIPATH + "api/user/check"
 73 |     axios.post(api).then((res) => {
 74 |       if(!res.data.success) {
 75 |         next({ path: '/login' })
 76 |       } else {
 77 |         next()
 78 |       }
 79 |     })
 80 |   } else {
 81 |     next()
 82 |   }
 83 | })
 84 | 
 85 | ```
 86 | 
 87 | ### 2. 子路由使用方式
 88 | 
 89 |  - 通過在需要路由守衛的元件中添加上 `meta: { requiresAuth: true },` 後路由守衛就會幫忙判定登入狀態
 90 | 
 91 |  - 通過在路由對象中添加 `children:[]` 就可以增加子路由 子路由會生成在父組件中放有 `<router-view></router-view>` 標籤的位置
 92 | 
 93 |  - 在路由中可以添加上 `{path: '*',redirect: '/'}` 即可讓所有沒被定義的路徑都會重定向到首頁
 94 | 
 95 |  - 在路由對象中添加 `meta: { title: '拼圖迷 - 進口拼圖專賣店'}` 可以更改`index.html` 的 `title`
 96 | 
 97 |  - `vue-cli v3` 以上的版本可以通過新的方法引入 `.vue` 檔 代碼如下：
 98 | 
 99 | ```js
100 | 
101 | component: () => import('../views/frontend/About.vue')
102 | 
103 | ```
104 | 
105 | ### 3. vue-loading 用法
106 | 
107 | 在代碼的最上面加入以下內容後即可通過 vue 中 data 下的 `isLoading` 資料狀態 來切換是否為載入中
108 | 
109 | * 其樣式可到 `https://loading.io/` 中抓取使用
110 | 
111 | ### 4. 切換與判斷路由
112 | 
113 | * 可以在標籤中直接通過 `@click="$router.push('/')` 跳轉路由到 '/'
114 | 
115 | * 可以使用 `this.$route.path!=='/'` 判斷路由是否為 '/'
116 | 
117 | * 可以使用 `this.$route.fullPath` 獲取當前路由的完整路徑
118 | 
119 | * 假設使用同個路由不同參數要切換時可以通過 `vm.$router.push("/products/" + category).catch((err) => err);` 來阻止報錯與頁面不刷新的問題
120 | 
121 | ### 5. style 相關
122 | 
123 | * 在元件中的 style 標籤上添加 `scoped` 就可以讓該元件的樣式僅在該元件中被使用
124 | 
125 | * 可以通過在元件中的 style 標籤上添加 `lang="scss"` 來改變 css 語言
126 | 
127 | 合併使用代碼如下：
128 | 
129 | ```html
130 | 
131 | <style lang="scss" scoped>
132 | 
133 | </style>
134 | 
135 | ```
136 | 
137 | ### 6. cookie 相關
138 | 
139 | 該專案使用 cookie 保存了喜好項目與後台的登入狀態
140 | 
141 | 主要代碼分別在 `Login.vue` `Dashboard.vue` `Like.vue`
142 | 
143 | * 登入的部分
144 | 
145 |   在 `Login.vue` 中保存了登入的 `token` 主要代碼如下：
146 | 
147 |   ```js
148 | 
149 |   this.$http.post(api, vm.user).then((res) => {
150 |     if (res.data.success) {
151 |       const token = res.data.token;
152 |       const expired = res.data.expired;
153 |       document.cookie = `hexToken=${token}; expires=${new Date(expired)};`;
154 |     }
155 |   })
156 | 
157 |   ```
158 | 
159 |   接下來在 `Dashboard.vue` 中將登入成功後取得的 token 設定於每次 request 中的 header 參數
160 | 
161 |   如下：
162 | 
163 |   ```js
164 | 
165 |   created() {
166 |     // 在登入時我們將 cookie 存到 hexToken 中，這裏就是獲取 hexToken 的值
167 |     const myCookie = document.cookie.replace(/(?:(?:^|.*;\s*)hexToken\s*=\s*([^;]*).*$)|^.*$/,"$1");
168 |     // 這句是主要代碼 將 hexToken 的值 設定到 axios 的請求頭中
169 |     this.$http.defaults.headers.common.Authorization = myCookie;
170 |   },
171 | 
172 |   ```
173 | 
174 | * 喜好項目
175 | 
176 | 在 `Product.vue` 中直接判斷 cookie 裡面是否含有產品的 id 如果有代表該產品是喜好項目
177 | 
178 | 在 `Like.vue` 中把所有 cookie 分成鍵對值然後判斷是否有 `like` 這個鍵 再獲取它對應的值從而取得所有喜好項目的產品 id
179 | 
180 | 取得後再將所有 id 渲染成一個個的產品顯示於喜好項目列表中
181 | 
182 | 主要代碼如下：
183 | 
184 | ```js
185 | 
186 | let cookieObj = {};
187 | let cookieAry = document.cookie.split(";");
188 | let cookie;
189 | let arr;
190 | for (var i = 0, l = cookieAry.length; i < l; ++i) {
191 |   cookie = cookieAry[i].trim();
192 |   cookie = cookie.split("=");
193 |   // cookie[0] => key ; cookie[1] => value
194 |   if (cookie[0] === "like") {
195 |     arr = cookie[1];
196 |     // 如果有人添加過喜好項目又清空的話 arr 就會是空字符串
197 |     // 所以這裡要判斷它的長度大於零確定 cookie 中有產品 id 
198 |     if (arr.length !== 0) {
199 |       // 這裡就是渲染喜好項目的 methods
200 |       vm.getLikes(arr);
201 |     }
202 |   }
203 | }
204 | 
205 | ```
206 | 
207 | ### 7. event Bus 使用
208 | 
209 | 主要代碼在 `messageAlert.vue` 中 我將該專案中通過 event bus 建立提示訊息的同時生成購物車的數量
210 | 
211 | 如下：
212 | 
213 | ```js
214 | 
215 | vm.$bus.$on("message:push", (message, status = "warning") => {
216 |   // 獲取購物車數量
217 |   vm.getCart();
218 |   // 生成互動訊息提示窗
219 |   vm.updateMessage(message, status);
220 | });
221 | 
222 | ```
223 | 
224 | ### 8. 添加購買品項時判斷是否重複
225 | 
226 | 如果重複的產品想添加 就更新產品數量 不要讓購物車有兩個一樣的品項
227 | 
228 | 實現方法為：
229 | 
230 | 1. 用 `find` 方法判斷是否有重複的對象
231 | 
232 | 2. 重複的對象提取出來 將其產品 id 數量記下 並刪除該對象
233 | 
234 | 3. 當有重複的對象時 添加產品的 api 參數就傳入剛才記下的對象
235 | 
236 | 主要代碼範例如下：
237 | 
238 | ```js
239 | 
240 | addCart(id, num = 1) {
241 |   const vm = this;
242 |   let rel = vm.cart.find((item) => {
243 |     return item.product_id === id;
244 |   });
245 |   let obj;
246 |   if (rel) {
247 |     obj = { product_id: rel.product_id, qty: num + rel.qty };
248 |     vm.delCart(rel.id);
249 |   } else {
250 |     obj = { product_id: id, qty: num };
251 |   }
252 |   vm.isLoading = true;
253 |   const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`;
254 |   vm.$http.post(api, {data: obj,})
255 |     .then((res) => {
256 |       vm.isLoading = false;
257 |       if (res.data.success) {
258 |         vm.$bus.$emit("message:push", "購物車清單已更新", "success");
259 |       } else {
260 |         vm.$bus.$emit("message:push", res.data.message, "danger");
261 |       }
262 |     });
263 | }
264 | 
265 | ```
266 | 
267 | ## 9. 結帳前重新確認品項
268 | 
269 | 在購物車頁面中可以修改產品購買數量與添加優惠券
270 | 
271 | 在最後按下確認結帳時才將剛才修改的數量與優惠券重新傳送
272 | 
273 | 整個過程會先刪除原本購物車的內容 再添加更新後的數量與優惠券 
274 | 
275 | ajax 跑完後會開啟 modal 讓用戶填寫資料 按下送出後才跳轉至結帳頁面
276 | 
277 | 主要代碼如下：
278 | 
279 | ```js
280 | 
281 | goCheckout () {
282 |   const vm = this
283 |   // 判斷購物車內容是否更新過
284 |   if (JSON.stringify(vm.cart) === JSON.stringify(vm.tempCart)) {
285 |     $('#modal').modal('show')
286 |   } else {
287 |     vm.isLoading = true
288 |     // 讓 tempCart 為更新後的購買內容
289 |     vm.tempCart.carts = vm.cart.carts
290 |     const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
291 |     vm.$http.get(api).then((res) => {
292 |       if (res.data.success) {
293 |         // 重新獲取購買內容
294 |         vm.cart = res.data.data
295 |         let times = vm.cart.carts.length
296 |         vm.cart.carts.forEach((item) => {
297 |           times--
298 |           let code = ''
299 |           // 判斷是否有折價券
300 |           if (vm.cart.carts[0].coupon) {
301 |             code = vm.cart.carts[0].coupon.code
302 |           }
303 |           const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart/${item.id}`
304 |           // 刪除所有購買產品
305 |           vm.$http.delete(api).then()
306 |           if (times === 0) {
307 |             const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
308 |             let times = vm.tempCart.carts.length
309 |             // 重新添加更新後的購買產品、數量
310 |             vm.tempCart.carts.forEach((item) => {
311 |               const obj = { product_id: item.product_id, qty: item.qty }
312 |               vm.$http.post(api, { data: obj }).then((res) => {
313 |                 if (res.data.success) {
314 |                   times--
315 |                   const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
316 |                   vm.$http.get(api).then((res) => {
317 |                     if (res.data.success) {
318 |                       vm.cart = res.data.data
319 |                       vm.tempCart = vm.cart
320 |                       // 判斷是否使用優惠券並添加優惠券
321 |                       if (code !== '') {
322 |                         vm.couponCode = code
323 |                         if (times === 0) {
324 |                           vm.addCoupon(false)
325 |                           vm.isLoading = false
326 |                         }
327 |                       } else {
328 |                         vm.getCart(true)
329 |                       }
330 |                     }
331 |                   })
332 |                 }
333 |               })
334 |             })
335 |             vm.$bus.$emit('message:push', '購物車清單已更新', 'dark')
336 |           }
337 |         })
338 |       } else {
339 |         vm.$bus.$emit('message:push', res.data.message, 'danger')
340 |       }
341 |     })
342 |   }
343 | }
344 | 
345 | ```


--------------------------------------------------------------------------------
/src/views/frontend/Like.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <loading :active.sync="isLoading">
  4 |       <h4>載入中 請稍候...</h4>
  5 |     </loading>
  6 |     <h3 class="my-4 text-dark">
  7 |       <i class="fa fa-heart-o" aria-hidden="true"></i>
  8 |       喜好項目
  9 |     </h3>
 10 |     <div v-if="hasLiked == false">
 11 |       <h4 class="my-5">
 12 |         您的喜好項目為空，
 13 |         <br />
 14 |         將在
 15 |         <span class="h3 text-danger" v-if="time >= 0"> {{ time }} </span>
 16 |         秒後跳轉回商品列表
 17 |       </h4>
 18 |     </div>
 19 |     <div id="cart-list" v-else>
 20 |       <table class="lg table table-striped table-bordered text-dark mt-4">
 21 |         <thead class="thead">
 22 |           <th>操作</th>
 23 |           <th>品名</th>
 24 |           <th>單價</th>
 25 |           <th>商品連結</th>
 26 |         </thead>
 27 |         <tbody>
 28 |           <tr v-for="item in products" :key="item.id">
 29 |             <td class="align-middle">
 30 |               <button
 31 |                 @click="removeLike(item.id)"
 32 |                 type="button"
 33 |                 class="btn btn-outline-danger mr-2 btn-sm"
 34 |               >
 35 |                 <i class="fa fa-trash" aria-hidden="true"></i> 取消收藏
 36 |               </button>
 37 |               <button
 38 |                 @click="addCart(item.id)"
 39 |                 type="button"
 40 |                 class="btn-outline-dark btn-sm btn"
 41 |               >
 42 |                 加入購物車
 43 |                 <i class="fa fa-shopping-basket" aria-hidden="true"></i>
 44 |               </button>
 45 |             </td>
 46 |             <td class="align-middle">{{ item.title }}</td>
 47 |             <td class="align-middle">
 48 |               {{ item.price | numFormat | dollarSign }} / {{ item.unit }}
 49 |             </td>
 50 |             <td class="align-middle">
 51 |               <router-link class="text-secondary" :to="`/product/${item.id}`">
 52 |                 查看更多
 53 |                 <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
 54 |               </router-link>
 55 |             </td>
 56 |           </tr>
 57 |         </tbody>
 58 |       </table>
 59 |       <div class="sm">
 60 |         <table class="table table-striped table-bordered text-dark my-2">
 61 |           <thead class="thead">
 62 |             <th>操作</th>
 63 |             <th>瀏覽商品</th>
 64 |           </thead>
 65 |           <tbody>
 66 |             <tr v-for="item in products" :key="item.id">
 67 |               <td class="align-middle">
 68 |                 <button
 69 |                   @click="removeLike(item.id)"
 70 |                   type="button"
 71 |                   class="btn btn-outline-danger btn-sm mr-2"
 72 |                 >
 73 |                   <i class="fa fa-trash" aria-hidden="true"></i>
 74 |                 </button>
 75 |                 <button
 76 |                   @click="addCart(item.id)"
 77 |                   type="button"
 78 |                   class="btn-outline-dark btn-sm btn"
 79 |                 >
 80 |                   <i class="fa fa-shopping-basket" aria-hidden="true"></i>
 81 |                 </button>
 82 |               </td>
 83 |               <td class="align-middle">
 84 |                 <router-link class="text-muted" :to="`/product/${item.id}`">
 85 |                   {{ item.title }}
 86 |                 </router-link>
 87 |                 <i
 88 |                   class="fa ml-2 text-muted fa-arrow-circle-right"
 89 |                   aria-hidden="true"
 90 |                 ></i>
 91 |               </td>
 92 |             </tr>
 93 |           </tbody>
 94 |         </table>
 95 |       </div>
 96 |       <button class="btn btn-dark my-3" @click="addCart(products)">
 97 |         全部加入購物車
 98 |       </button>
 99 |     </div>
100 |   </div>
101 | </template>
102 | 
103 | <script>
104 | export default {
105 |   data () {
106 |     return {
107 |       products: [],
108 |       isLoading: false,
109 |       hasLiked: true,
110 |       cookie: '',
111 |       time: 0
112 |     }
113 |   },
114 |   methods: {
115 |     getLikes (arr) {
116 |       const vm = this
117 |       vm.isLoading = true
118 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/products/all`
119 |       vm.$http.get(api).then((res) => {
120 |         if (res.data.success) {
121 |           vm.products = res.data.products
122 |           vm.hasLiked = true
123 |           if (arr.length > 20) {
124 |             arr = arr.split(',')
125 |           } else {
126 |             arr = [arr]
127 |           }
128 |           vm.isLoading = false
129 |           vm.products = vm.products.filter(
130 |             (item) => arr.indexOf(item.id) !== -1
131 |           )
132 |         } else {
133 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
134 |         }
135 |       })
136 |     },
137 |     removeLike (id) {
138 |       const vm = this
139 |       vm.isLoading = true
140 |       let arr = vm.cookie
141 |       if (arr.length === 20) {
142 |         document.cookie = 'like=;expires=7;path=/'
143 |       } else if (arr.length > 20) {
144 |         arr = arr.split(',')
145 |         const i = arr.indexOf(id)
146 |         arr.splice(i, 1)
147 |         const str = arr.toString()
148 |         document.cookie = `like=${str};expires=7;path=/`
149 |       }
150 |       vm.isLoading = false
151 |       vm.hasLikes()
152 |     },
153 |     hasLikes () {
154 |       const vm = this
155 |       const cookieAry = document.cookie.split(';')
156 |       let cookie
157 |       for (let i = 0; i < cookieAry.length; ++i) {
158 |         cookie = cookieAry[i].trim()
159 |         cookie = cookie.split('=')
160 |         if (cookie[0] === 'like') {
161 |           vm.cookie = cookie[1]
162 |         }
163 |       }
164 |       if (vm.cookie) {
165 |         if (vm.cookie.length > 0) {
166 |           vm.getLikes(vm.cookie)
167 |           vm.getCart()
168 |         } else {
169 |           vm.hasLiked = false
170 |           vm.time = 3
171 |           setInterval(vm.countDown, 1000)
172 |         }
173 |       } else {
174 |         vm.hasLiked = false
175 |         vm.time = 3
176 |         setInterval(vm.countDown, 1000)
177 |       }
178 |     },
179 |     addCart (id, num = 1) {
180 |       const vm = this
181 |       if (typeof id === 'string') {
182 |         const rel = vm.cart.find((item) => item.product_id === id)
183 |         let obj
184 |         if (rel) {
185 |           obj = { product_id: rel.product_id, qty: num + rel.qty }
186 |           vm.isLoading = true
187 |           const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
188 |           vm.$http
189 |             .post(api, {
190 |               data: obj
191 |             })
192 |             .then((res) => {
193 |               vm.isLoading = false
194 |               if (res.data.success) {
195 |                 vm.delCart(rel.id, true)
196 |               } else {
197 |                 vm.$bus.$emit('message:push', res.data.message, 'danger')
198 |               }
199 |             })
200 |         } else {
201 |           obj = { product_id: id, qty: num }
202 |           vm.isLoading = true
203 |           const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
204 |           vm.$http
205 |             .post(api, {
206 |               data: obj
207 |             })
208 |             .then((res) => {
209 |               vm.isLoading = false
210 |               if (res.data.success) {
211 |                 vm.getCart()
212 |                 vm.$bus.$emit('message:push', res.data.message, 'dark')
213 |               } else {
214 |                 vm.$bus.$emit('message:push', res.data.message, 'danger')
215 |               }
216 |             })
217 |         }
218 |       } else {
219 |         id.forEach(function (item) {
220 |           const rel = vm.cart.find((cart) => cart.product_id === item.id)
221 |           let obj
222 |           if (rel) {
223 |             obj = { product_id: rel.product_id, qty: num + rel.qty }
224 |             vm.isLoading = true
225 |             const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
226 |             vm.$http
227 |               .post(api, {
228 |                 data: obj
229 |               })
230 |               .then((res) => {
231 |                 vm.isLoading = false
232 |                 if (res.data.success) {
233 |                   vm.delCart(rel.id, true)
234 |                 } else {
235 |                   vm.$bus.$emit('message:push', res.data.message, 'danger')
236 |                 }
237 |               })
238 |           } else {
239 |             obj = { product_id: item.id, qty: 1 }
240 |             vm.isLoading = true
241 |             const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
242 |             vm.$http
243 |               .post(api, {
244 |                 data: obj
245 |               })
246 |               .then((res) => {
247 |                 vm.isLoading = false
248 |                 if (res.data.success) {
249 |                   vm.getCart()
250 |                   vm.$bus.$emit('message:push', res.data.message, 'dark')
251 |                 } else {
252 |                   vm.$bus.$emit('message:push', res.data.message, 'danger')
253 |                 }
254 |               })
255 |           }
256 |         })
257 |       }
258 |     },
259 |     delCart (id, rep = false) {
260 |       const vm = this
261 |       vm.isLoading = true
262 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart/${id}`
263 |       vm.$http.delete(api).then((res) => {
264 |         if (res.data.success) {
265 |           if (rep === false) {
266 |             vm.$bus.$emit('message:push', res.data.message, 'dark')
267 |           } else {
268 |             vm.$bus.$emit('message:push', '購物車清單已更新', 'dark')
269 |           }
270 |         } else {
271 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
272 |         }
273 |         vm.isLoading = false
274 |         vm.getCart()
275 |       })
276 |     },
277 |     getCart () {
278 |       const vm = this
279 |       vm.isLoading = true
280 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
281 |       vm.$http.get(api).then((res) => {
282 |         if (res.data.success) {
283 |           vm.cart = res.data.data.carts
284 |         } else {
285 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
286 |         }
287 |         vm.isLoading = false
288 |       })
289 |     },
290 |     countDown () {
291 |       this.time--
292 |     }
293 |   },
294 |   watch: {
295 |     time: function (newVal) {
296 |       if (newVal === 0) {
297 |         this.$router.push('/products/all')
298 |       }
299 |     }
300 |   },
301 |   created () {
302 |     this.hasLikes()
303 |   }
304 | }
305 | </script>
306 | 


--------------------------------------------------------------------------------
/src/views/frontend/Checkout.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-if="order.id">
  3 |     <loading :active.sync="isLoading">
  4 |       <h4>載入中 請稍候...</h4>
  5 |     </loading>
  6 |     <div class="container text-dark">
  7 |       <div class="my-3">
  8 |         <h4 class="my-3">結帳</h4>
  9 |         <form
 10 |           class="row justify-content-md-center"
 11 |           @submit.prevent="payOrder(times)"
 12 |         >
 13 |           <div class="col-lg-4 col-md-6" v-if="!order.is_paid">
 14 |             <div class="border p-3 mb-3">
 15 |               <h5 class="mb-4">
 16 |                 <i class="fa fa-pencil" aria-hidden="true"></i>
 17 |                 訂單摘要
 18 |               </h5>
 19 |               <h6>
 20 |                 <div class="float-left">小計：</div>
 21 |                 <div class="float-right">NT$ {{ order.total | numFormat }}</div>
 22 |               </h6>
 23 |               <br />
 24 |               <h6>
 25 |                 <div class="float-left">
 26 |                   運費
 27 |                   <i class="small text-muted">(週年慶 - 免運費)</i> ：
 28 |                 </div>
 29 |                 <div class="float-right">
 30 |                   <del class="text-secondary mr-2">NT$ 200</del> NT$ 0
 31 |                 </div>
 32 |                 <br />
 33 |               </h6>
 34 |               <h4
 35 |                 class="mt-5 border-top py-3"
 36 |                 :class="{ h5: order.final_total !== order.total }"
 37 |               >
 38 |                 <div class="float-left">總計</div>
 39 |                 <div class="float-right">NT$ {{ order.total | numFormat }}</div>
 40 |               </h4>
 41 |               <h3
 42 |                 v-if="paymethods === '2' && order.is_paid"
 43 |                 class="bg-dark text-light p-2 my-3"
 44 |               >
 45 |                 請於三日內完成匯款🙏
 46 |               </h3>
 47 |               <h3
 48 |                 v-else-if="paymethods === '1' && order.is_paid"
 49 |                 class="bg-dark text-light p-2 my-3"
 50 |               >
 51 |                 已完成結帳手續😊
 52 |               </h3>
 53 |             </div>
 54 |             <div class="border p-3">
 55 |               <h5 class="mb-3">
 56 |                 <i class="fa fa-list-ol" aria-hidden="true"></i>
 57 |                 購物車內容
 58 |               </h5>
 59 |               <hr />
 60 |               <table class="table table-borderless text-dark">
 61 |                 <tbody>
 62 |                   <tr v-for="item in order.products" :key="item.id">
 63 |                     <th>
 64 |                       <img
 65 |                         class="cart-img"
 66 |                         :src="item.product.imageUrl"
 67 |                         :alt="item.product.title"
 68 |                       />
 69 |                     </th>
 70 |                     <td class="text-left">
 71 |                       <p>
 72 |                         {{ item.product.title }}
 73 |                         <br />
 74 |                         <span class="text-muted">
 75 |                           NT${{ item.product.price }}
 76 |                         </span>
 77 |                         x
 78 |                         {{ item.qty }}
 79 |                       </p>
 80 |                     </td>
 81 |                   </tr>
 82 |                 </tbody>
 83 |               </table>
 84 |             </div>
 85 |           </div>
 86 |           <div class="col-lg-8 col-md-6">
 87 |             <div class="p-2">
 88 |               <div class="row my-3 text-muted">
 89 |                 <div class="col-4">1.確認資料</div>
 90 |                 <div class="col-4">2.付款方式</div>
 91 |                 <div class="col-4">3.完成</div>
 92 |               </div>
 93 |               <div class="progress mx-lg-5">
 94 |                 <div class="progress-bar" :class="step"></div>
 95 |               </div>
 96 |               <div v-if="times === 1" class="my-3">
 97 |                 <div class="border p-3 mx-lg-5">
 98 |                   <h5 class="my-3">收件人資料</h5>
 99 |                   <table class="table text-dark m-0">
100 |                     <tbody>
101 |                       <tr>
102 |                         <th class="border-0" width="120">Email :</th>
103 |                         <td class="border-0" width>{{ order.user.email }}</td>
104 |                       </tr>
105 |                       <tr>
106 |                         <th>姓名 :</th>
107 |                         <td>{{ order.user.name }}</td>
108 |                       </tr>
109 |                       <tr>
110 |                         <th>收件人電話 :</th>
111 |                         <td>{{ order.user.tel }}</td>
112 |                       </tr>
113 |                       <tr>
114 |                         <th>收件人地址 :</th>
115 |                         <td>{{ order.user.address }}</td>
116 |                       </tr>
117 |                     </tbody>
118 |                   </table>
119 |                 </div>
120 |               </div>
121 |               <div v-else-if="times === 2" class="my-3">
122 |                 <div class="border p-3 mx-lg-5">
123 |                   <h5 class="my-3">付款方式</h5>
124 |                   <div class="my-3">
125 |                     <div class="custom-control custom-radio">
126 |                       <input
127 |                         id="getandpay"
128 |                         name="paymentMethod"
129 |                         type="radio"
130 |                         class="custom-control-input"
131 |                         required
132 |                         value="1"
133 |                         v-model="paymethods"
134 |                       />
135 |                       <label class="custom-control-label" for="getandpay">
136 |                         取貨付款
137 |                       </label>
138 |                     </div>
139 |                     <div class="custom-control custom-radio">
140 |                       <input
141 |                         id="transfer"
142 |                         name="paymentMethod"
143 |                         type="radio"
144 |                         class="custom-control-input"
145 |                         required
146 |                         v-model="paymethods"
147 |                         value="2"
148 |                       />
149 |                       <label class="custom-control-label" for="transfer">
150 |                         銀行轉帳
151 |                       </label>
152 |                     </div>
153 |                   </div>
154 |                   <div class="bank" :class="{ 'd-none': paymethods === '1' }">
155 |                     <p class="my-3">ATM 轉帳繳款資料如下</p>
156 |                     <table class="table table-striped table-bordered text-dark">
157 |                       <tbody>
158 |                         <tr>
159 |                           <th>◆ 銀行名稱：</th>
160 |                           <td>012 台北富邦銀行</td>
161 |                         </tr>
162 |                         <tr>
163 |                           <th>◆ 戶 名：</th>
164 |                           <td>拼圖迷股份有限公司</td>
165 |                         </tr>
166 |                         <tr>
167 |                           <th>◆ 帳 號：</th>
168 |                           <td>123-321-123456-7</td>
169 |                         </tr>
170 |                       </tbody>
171 |                     </table>
172 |                   </div>
173 |                 </div>
174 |               </div>
175 |               <div class="my-3 px-lg-5 down" :class="{ 'd-none': times !== 3 }">
176 |                 <h3 v-if="order.is_paid" class="my-4 text-success">
177 |                   ☑️ 結帳成功
178 |                 </h3>
179 |                 <table class="table table-striped text-dark m-0">
180 |                   <tbody>
181 |                     <tr>
182 |                       <th>姓名 :</th>
183 |                       <td>{{ order.user.name }}</td>
184 |                     </tr>
185 |                     <tr>
186 |                       <th>收件人電話 :</th>
187 |                       <td>{{ order.user.tel }}</td>
188 |                     </tr>
189 |                     <tr>
190 |                       <th>收件人地址 :</th>
191 |                       <td>{{ order.user.address }}</td>
192 |                     </tr>
193 |                     <tr>
194 |                       <th>
195 |                         購買品項 :
196 |                       </th>
197 |                       <td>
198 |                         <span v-for="item in order.products" :key="item.id">
199 |                           {{ item.product.title }} x {{ item.qty }}
200 |                           <br />
201 |                         </span>
202 |                       </td>
203 |                     </tr>
204 |                     <tr>
205 |                       <th>付款方式 :</th>
206 |                       <td v-if="paymethods === '1'">貨到付款</td>
207 |                       <td v-else-if="paymethods === '2'">ATM 匯款</td>
208 |                     </tr>
209 |                     <tr>
210 |                       <th>付款狀態 :</th>
211 |                       <td
212 |                         class="text-muted"
213 |                         v-if="paymethods === '1' && order.is_paid"
214 |                       >
215 |                         已選擇貨到付款
216 |                       </td>
217 |                       <td
218 |                         class="text-muted"
219 |                         v-else-if="paymethods === '2' && order.is_paid"
220 |                       >
221 |                         已選擇ATM 匯款
222 |                       </td>
223 |                       <td class="text-muted" v-if="order.is_paid === false">
224 |                         <i>等待付款中</i>
225 |                       </td>
226 |                     </tr>
227 |                   </tbody>
228 |                 </table>
229 |               </div>
230 |               <button v-if="times !== 3" class="btn btn-dark my-3">
231 |                 下一步
232 |               </button>
233 |               <button
234 |                 v-if="times === 3"
235 |                 class="btn btn-dark my-3"
236 |                 @click="$router.push('/products/all')"
237 |               >
238 |                 再去逛逛
239 |               </button>
240 |             </div>
241 |           </div>
242 |         </form>
243 |       </div>
244 |     </div>
245 |   </div>
246 | </template>
247 | 
248 | <script>
249 | import $ from 'jquery'
250 | 
251 | export default {
252 |   data () {
253 |     return {
254 |       order: {},
255 |       orderId: '',
256 |       isLoading: false,
257 |       step: {
258 |         'w-50': false,
259 |         'w-100': false
260 |       },
261 |       times: 1,
262 |       paymethods: '1',
263 |       card: {
264 |         name: '',
265 |         num: '',
266 |         key: '',
267 |         mm: '',
268 |         yy: ''
269 |       }
270 |     }
271 |   },
272 |   methods: {
273 |     getOrder () {
274 |       const vm = this
275 |       vm.isLoading = true
276 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/order/${vm.orderId}`
277 |       vm.$http.get(api).then((res) => {
278 |         vm.isLoading = false
279 |         if (res.data.success) {
280 |           vm.order = res.data.order
281 |           if (vm.order.is_paid) {
282 |             vm.times = 3
283 |             vm.step['w-100'] = true
284 |           }
285 |         } else {
286 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
287 |         }
288 |       })
289 |     },
290 |     payOrder (times) {
291 |       const vm = this
292 |       vm.isLoading = true
293 |       vm.times++
294 |       if (times === 1) {
295 |         vm.step['w-50'] = true
296 |       } else if (times === 2) {
297 |         vm.step['w-100'] = true
298 |         const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/pay/${vm.orderId}`
299 |         vm.$http.post(api).then((res) => {
300 |           if (res.data.success) {
301 |             vm.$bus.$emit('message:push', '結帳確認完成', 'dark')
302 |             vm.getOrder()
303 |             $('.down').show()
304 |           } else {
305 |             vm.$bus.$emit('message:push', res.data.message, 'danger')
306 |           }
307 |         })
308 |       }
309 |       vm.isLoading = false
310 |     }
311 |   },
312 |   created () {
313 |     this.orderId = this.$route.params.orderId
314 |     this.getOrder()
315 |   },
316 |   watch: {
317 |     paymethods: function () {
318 |       const vm = this
319 |       if (vm.paymethods === '1') {
320 |         $('.bank').hide()
321 |       } else if (vm.paymethods === '2') {
322 |         $('.bank').show()
323 |       }
324 |     }
325 |   }
326 | }
327 | </script>
328 | 
329 | <style scoped>
330 | .cart-img {
331 |   width: 100px;
332 | }
333 | 
334 | p {
335 |   margin: 5px;
336 |   font-size: 16px;
337 |   line-height: 32px;
338 | }
339 | </style>
340 | 


--------------------------------------------------------------------------------
/src/views/backend/AdminCoupons.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <loading :active.sync="isLoading">
  4 |       <div class="loadingio-spinner-spin-ur5grgaunp">
  5 |         <div class="ldio-dwsbgiuamos">
  6 |           <div>
  7 |             <div></div>
  8 |           </div>
  9 |           <div>
 10 |             <div></div>
 11 |           </div>
 12 |           <div>
 13 |             <div></div>
 14 |           </div>
 15 |           <div>
 16 |             <div></div>
 17 |           </div>
 18 |           <div>
 19 |             <div></div>
 20 |           </div>
 21 |           <div>
 22 |             <div></div>
 23 |           </div>
 24 |           <div>
 25 |             <div></div>
 26 |           </div>
 27 |           <div>
 28 |             <div></div>
 29 |           </div>
 30 |         </div>
 31 |       </div>
 32 |     </loading>
 33 | 
 34 |     <div class="lg mt-5">
 35 |       <div class="float-left">
 36 |         <h4 class="mt-3 font-weight-bold">
 37 |           <i class="fa fa-ticket" aria-hidden="true"></i>
 38 |           優惠碼管理
 39 |         </h4>
 40 |       </div>
 41 |       <div class="float-right">
 42 |         <button
 43 |           class="btn btn-dark font-weight-bold mt-2 mb-3"
 44 |           @click="openModal(true)"
 45 |         >
 46 |           添加新優惠券
 47 |         </button>
 48 |       </div>
 49 |       <table class="table table-striped table-bordered mt-4 text-dark">
 50 |         <thead>
 51 |           <tr>
 52 |             <th scope="col">名稱</th>
 53 |             <th scope="col">到期日</th>
 54 |             <th scope="col">是否啟用</th>
 55 |             <th scope="col">操作</th>
 56 |           </tr>
 57 |         </thead>
 58 |         <tbody>
 59 |           <tr v-for="item in coupons" :key="item.id">
 60 |             <td scope="row">
 61 |               {{ item.title }} - {{ item.percent }}% off
 62 |               <br />
 63 |               <i class="text-muted">
 64 |                 優惠碼 -
 65 |                 <b class="text-secondary">{{ item.code }}</b>
 66 |               </i>
 67 |             </td>
 68 |             <td>{{ new Date(item.due_date).toLocaleDateString() }}</td>
 69 |             <td class="font-weight-bold">
 70 |               <span v-if="item.is_enabled" class="text-dark">已啟用</span>
 71 |               <span v-else class="text-muted">未啟用</span>
 72 |             </td>
 73 |             <td>
 74 |               <button
 75 |                 class="btn btn-outline-dark btn-sm mr-lg-2 font-weight-bold"
 76 |                 @click="openModal(false, item)"
 77 |               >
 78 |                 編輯
 79 |               </button>
 80 |               <button
 81 |                 class="btn btn-dark btn-sm font-weight-bold"
 82 |                 @click="openDelModal(item)"
 83 |               >
 84 |                 刪除
 85 |               </button>
 86 |             </td>
 87 |           </tr>
 88 |         </tbody>
 89 |       </table>
 90 |     </div>
 91 | 
 92 |     <div class="sm">
 93 |       <div class="float-left">
 94 |         <h5 class="font-weight-bold">
 95 |           <i class="fa fa-ticket"></i>
 96 |           優惠碼管理
 97 |         </h5>
 98 |       </div>
 99 |       <div class="float-right mb-3">
100 |         <button
101 |           class="btn btn-dark font-weight-bold btn-sm"
102 |           @click="openModal(true)"
103 |         >
104 |           添加新優惠券
105 |         </button>
106 |       </div>
107 |       <table class="table table-striped table-bordered text-dark">
108 |         <thead>
109 |           <tr>
110 |             <th scope="col">操作</th>
111 |             <th scope="col">優惠券 - click to edit</th>
112 |           </tr>
113 |         </thead>
114 |         <tbody>
115 |           <tr v-for="item in coupons" :key="item.id">
116 |             <td>
117 |               <button
118 |                 @click="openDelModal(item)"
119 |                 type="button"
120 |                 class="btn btn-outline-danger btn-sm"
121 |               >
122 |                 <i class="fa fa-trash"></i>
123 |               </button>
124 |             </td>
125 |             <td scope="row" @click="openModal(false, item)">
126 |               {{ item.title }} - {{ item.percent }}% off
127 |               <br />
128 |               <i>
129 |                 優惠碼 -
130 |                 <b>{{ item.code }}</b>
131 |               </i>
132 |               <br />
133 |               <i class="text-muted">
134 |                 {{ new Date(item.due_date).toLocaleDateString() }} 截止
135 |               </i>
136 |             </td>
137 |           </tr>
138 |         </tbody>
139 |       </table>
140 |     </div>
141 | 
142 |     <Pagination :pages="pagination" @event="getCoupons"></Pagination>
143 | 
144 |     <div
145 |       class="modal fade"
146 |       id="couponModal"
147 |       tabindex="-1"
148 |       role="dialog"
149 |       aria-labelledby="exampleModalLabel"
150 |       aria-hidden="true"
151 |     >
152 |       <div class="modal-dialog modal-md" role="document">
153 |         <div class="modal-content border-0">
154 |           <div class="modal-header bg-dark text-white">
155 |             <h5 class="modal-title" id="exampleModalLabel">
156 |               <span>新增優惠券</span>
157 |             </h5>
158 |             <button
159 |               type="button"
160 |               class="close"
161 |               data-dismiss="modal"
162 |               aria-label="Close"
163 |             >
164 |               <span class="text-light" aria-hidden="true">&times;</span>
165 |             </button>
166 |           </div>
167 |           <div class="modal-body">
168 |             <div class="row">
169 |               <div class="col-sm-12">
170 |                 <div class="form-group">
171 |                   <label for="title">優惠券名稱</label>
172 |                   <input
173 |                     type="text"
174 |                     class="form-control"
175 |                     id="title"
176 |                     placeholder="請輸入名稱"
177 |                     v-model="tempCoupon.title"
178 |                   />
179 |                 </div>
180 | 
181 |                 <div class="form-row">
182 |                   <div class="form-group col-md-6">
183 |                     <label for="percent">折扣百分比</label>
184 |                     <input
185 |                       type="text"
186 |                       class="form-control"
187 |                       id="percent"
188 |                       placeholder="請輸入百分比"
189 |                       v-model="tempCoupon.percent"
190 |                     />
191 |                   </div>
192 |                   <div class="form-group col-md-6">
193 |                     <label for="due_date">到期日</label>
194 |                     <input
195 |                       type="date"
196 |                       class="form-control"
197 |                       id="due_date"
198 |                       placeholder="請輸入到期日"
199 |                       v-model="tempCoupon.due_date"
200 |                     />
201 |                   </div>
202 |                 </div>
203 |                 <hr />
204 |                 <div class="form-group">
205 |                   <label for="code">優惠碼</label>
206 |                   <input
207 |                     type="text"
208 |                     class="form-control"
209 |                     id="code"
210 |                     placeholder="請輸入優惠碼"
211 |                     v-model="tempCoupon.code"
212 |                   />
213 |                 </div>
214 |                 <div class="form-group">
215 |                   <div class="form-check">
216 |                     <input
217 |                       class="form-check-input"
218 |                       type="checkbox"
219 |                       id="is_enabled"
220 |                       v-model="tempCoupon.is_enabled"
221 |                       :true-value="1"
222 |                       :false-value="0"
223 |                     />
224 |                     <label class="form-check-label" for="is_enabled"
225 |                       >是否啟用</label
226 |                     >
227 |                   </div>
228 |                 </div>
229 |               </div>
230 |             </div>
231 |           </div>
232 |           <div class="modal-footer">
233 |             <button
234 |               type="button"
235 |               class="btn btn-outline-secondary"
236 |               data-dismiss="modal"
237 |             >
238 |               取消
239 |             </button>
240 |             <button
241 |               type="button"
242 |               class="btn btn-dark"
243 |               @click="updateCoupon(tempCoupon)"
244 |             >
245 |               確認
246 |             </button>
247 |           </div>
248 |         </div>
249 |       </div>
250 |     </div>
251 | 
252 |     <div
253 |       class="modal fade"
254 |       id="delCouponModal"
255 |       tabindex="-1"
256 |       role="dialog"
257 |       aria-labelledby="exampleModalLabel"
258 |       aria-hidden="true"
259 |     >
260 |       <div class="modal-dialog" role="document">
261 |         <div class="modal-content border-0">
262 |           <div class="modal-header bg-dark text-white">
263 |             <h5 class="modal-title" id="exampleModalLabel">
264 |               <span>刪除優惠券</span>
265 |             </h5>
266 |             <button
267 |               type="button"
268 |               class="close"
269 |               data-dismiss="modal"
270 |               aria-label="Close"
271 |             >
272 |               <span class="text-light" aria-hidden="true">&times;</span>
273 |             </button>
274 |           </div>
275 |           <div class="modal-body lead">
276 |             是否刪除<br />
277 |             <strong class="text-light bg-dark p-1">
278 |               {{ tempCoupon.title }}
279 |             </strong>
280 |             <br />
281 |             優惠券(刪除後將無法恢復)。
282 |           </div>
283 |           <div class="modal-footer">
284 |             <button
285 |               type="button"
286 |               class="btn btn-outline-secondary"
287 |               data-dismiss="modal"
288 |             >
289 |               取消
290 |             </button>
291 |             <button type="button" class="btn btn-dark" @click="deleteCoupon()">
292 |               確認刪除
293 |             </button>
294 |           </div>
295 |         </div>
296 |       </div>
297 |     </div>
298 |   </div>
299 | </template>
300 | 
301 | <script>
302 | import $ from 'jquery'
303 | import Pagination from '@/components/Pagination'
304 | 
305 | export default {
306 |   data () {
307 |     return {
308 |       coupons: [],
309 |       pagination: {},
310 |       tempCoupon: {},
311 |       isNew: false,
312 |       isLoading: false
313 |     }
314 |   },
315 |   methods: {
316 |     getCoupons (page = 1) {
317 |       const vm = this
318 |       vm.isLoading = true
319 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/admin/coupons?page=${page}`
320 |       vm.$http.get(api).then((res) => {
321 |         vm.isLoading = false
322 |         if (res.data.success) {
323 |           vm.coupons = res.data.coupons
324 |           vm.pagination = res.data.pagination
325 |         } else {
326 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
327 |         }
328 |       })
329 |     },
330 |     openModal (isNew, item) {
331 |       if (isNew) {
332 |         this.tempCoupon = {}
333 |         this.isNew = true
334 |       } else {
335 |         this.tempCoupon = { ...item }
336 |         this.isNew = false
337 |       }
338 |       $('#couponModal').modal('show')
339 |     },
340 |     updateCoupon () {
341 |       const vm = this
342 |       vm.isLoading = true
343 | 
344 |       let httpMethod = 'post'
345 |       let api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/admin/coupon`
346 |       if (!vm.isNew) {
347 |         api = `${api}/${vm.tempCoupon.id}`
348 |         httpMethod = 'put'
349 |       }
350 |       vm.tempCoupon.due_date = Date.parse(vm.tempCoupon.due_date)
351 |       vm.$http[httpMethod](api, { data: vm.tempCoupon }).then((res) => {
352 |         if (res.data.success) {
353 |           $('#couponModal').modal('hide')
354 |         } else {
355 |           $('#couponModal').modal('hide')
356 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
357 |         }
358 |         vm.isLoading = false
359 |         vm.getCoupons()
360 |       })
361 |     },
362 |     openDelModal (item) {
363 |       this.tempCoupon = { ...item }
364 |       $('#delCouponModal').modal('show')
365 |     },
366 |     deleteCoupon () {
367 |       const vm = this
368 |       vm.isLoading = true
369 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/admin/coupon/${vm.tempCoupon.id}`
370 |       vm.$http.delete(api).then((res) => {
371 |         if (res.data.success) {
372 |           vm.$bus.$emit('message:push', res.data.message, 'dark')
373 |         } else {
374 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
375 |         }
376 |         $('#delCouponModal').modal('hide')
377 |         vm.isLoading = false
378 |         vm.getCoupons()
379 |       })
380 |     }
381 |   },
382 |   created () {
383 |     this.getCoupons()
384 |   },
385 |   components: {
386 |     Pagination
387 |   }
388 | }
389 | </script>
390 | 


--------------------------------------------------------------------------------
/src/views/frontend/Product.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <loading :active.sync="isLoading">
  4 |       <h4>載入中 請稍候...</h4>
  5 |     </loading>
  6 |     <div class="row">
  7 |       <div class="col-lg-12">
  8 |         <div class="sm">
  9 |           <router-link class="btn py-0 btn-sm border-dark float-right" to="/products/all">回商品列表</router-link>
 10 |           <h5 class="my-3 text-left">商品內容</h5>
 11 |         </div>
 12 |         <h4 class="py-4 text-left lg md">商品內容</h4>
 13 |         <div class="row mb-3 media">
 14 |           <img
 15 |             :src="product.imageUrl"
 16 |             :alt="product.title"
 17 |             class="sm media-sm-img mb-3"
 18 |           />
 19 |           <img
 20 |             :src="product.imageUrl"
 21 |             :alt="product.title"
 22 |             class="border ml-3 media-lg-img lg md col-md-6 align-self-center"
 23 |           />
 24 |           <div class="media-body px-3">
 25 |             <div class="text-justify">
 26 |               <h4 class="text-dark">
 27 |                 {{ product.title }}
 28 |                 <span
 29 |                   v-if="product.id === '-NYXBMCKSLI9cZGSfPj4'"
 30 |                   class="badge badge-danger small"
 31 |                 >
 32 |                   銷售冠軍
 33 |                 </span>
 34 |               </h4>
 35 |               <p class="text-dark">{{ product.content }}</p>
 36 |               <div class="input-group mb-2">
 37 |                 <button
 38 |                   v-if="isLiked"
 39 |                   class="btn btn-sm btn-danger"
 40 |                   @click="liked(product.id)"
 41 |                 >
 42 |                   <i class="fa fa-heart" aria-hidden="true"></i>
 43 |                   喜歡 ( 987 )
 44 |                 </button>
 45 |                 <button
 46 |                   v-else
 47 |                   class="btn btn-sm btn-outline-danger"
 48 |                   @click="liked(product.id)"
 49 |                 >
 50 |                   <i class="fa fa-heart-o" aria-hidden="true"></i>
 51 |                   喜歡 ( 986 )
 52 |                 </button>
 53 |               </div>
 54 |               <div
 55 |                 v-if="product.id === '-NYXBMCKSLI9cZGSfPj4'"
 56 |                 class="text-dark"
 57 |               >
 58 |                 已售出 9897 {{ product.unit }} | 剩餘數量 102
 59 |               </div>
 60 |               <div v-else class="text-dark">
 61 |                 已售出 876 {{ product.unit }} | 剩餘數量 9999
 62 |               </div>
 63 |               <hr />
 64 | 
 65 |               <div class="mt-2 mb-3">
 66 |                 <select class="input-group p-2" v-model="product.num">
 67 |                   <option v-for="num in 10" :key="num" :value="num">
 68 |                     選購 {{ num }} {{ product.unit }}
 69 |                   </option>
 70 |                 </select>
 71 |                 <div class="input-group m-0 row">
 72 |                   <button
 73 |                     class="btn border border-dark col-6 rounded-0"
 74 |                     @click="addCart(product.id, product.num)"
 75 |                   >
 76 |                     加入購物車
 77 |                   </button>
 78 |                   <button
 79 |                     @click="buyNow(product.id, product.num)"
 80 |                     class="btn btn-dark col-6 rounded-0"
 81 |                   >
 82 |                     立即購買
 83 |                   </button>
 84 |                 </div>
 85 |               </div>
 86 | 
 87 |               <div>
 88 |                 <h5 class="text-right" v-if="product.price > 0">
 89 |                   <del class="text-muted h6">
 90 |                     原價 {{ product.origin_price }} 元
 91 |                   </del>
 92 |                   <br />
 93 | 
 94 |                   <h2 class="float-right ml-2">
 95 |                     <b class="text-dark p-1">
 96 |                       <span class="small">現在只要</span>
 97 |                       {{ product.price }}元
 98 |                     </b>
 99 |                   </h2>
100 |                 </h5>
101 |                 <h3 class="text-right" v-else>
102 |                   <b>售價 {{ product.origin_price }} 元</b>
103 |                 </h3>
104 |               </div>
105 |             </div>
106 |           </div>
107 |           <div class="col-md-12 mt-2 text-left">
108 |             <h5 class="bg-light text-dark p-2">商品描述：</h5>
109 |             <pre v-html="product.description" class="m-3 text-dark"></pre>
110 |             <p class="mt-3 text-muted">
111 |               ***溫馨提醒：所有產品皆有提供七天鑑賞期***
112 |             </p>
113 |           </div>
114 |           <div class="col-md-12 mt-2">
115 |             <a
116 |               href="#"
117 |               @click.prevent="$router.push(`/products/${product.category}`)"
118 |               class="float-right m-2 text-muted"
119 |             >
120 |               更多>>
121 |             </a>
122 |             <h5 class="bg-light text-left text-dark p-2">類似商品：</h5>
123 |             <div class="row text-dark">
124 |               <div
125 |                 class="col-md-3 mb-4"
126 |                 v-for="item in products"
127 |                 :key="item.id"
128 |               >
129 |                 <div
130 |                   @click="getProduct(item.id)"
131 |                   class="card border-0 shadow-sm"
132 |                 >
133 |                   <div
134 |                     style="height: 200px;background-size: cover;background-position: center;"
135 |                     :style="{
136 |                       backgroundImage: `url(${item.imageUrl || item.image})`,
137 |                     }"
138 |                   ></div>
139 |                   <div class="card-body">
140 |                     <h5>{{ item.title }}</h5>
141 |                     <b class="h6 text-muted">優惠價 {{ item.price }}元</b>
142 |                   </div>
143 |                 </div>
144 |               </div>
145 |             </div>
146 |           </div>
147 |         </div>
148 |       </div>
149 |     </div>
150 |   </div>
151 | </template>
152 | 
153 | <script>
154 | export default {
155 |   data () {
156 |     return {
157 |       product: '',
158 |       isLoading: false,
159 |       products: [],
160 |       isLiked: false,
161 |       categories: [],
162 |       cart: [],
163 |       active: { name: '', path: '' }
164 |     }
165 |   },
166 |   methods: {
167 |     getProducts (item) {
168 |       this.$router.push('/products/' + item)
169 |     },
170 |     delCart (id, rep = false) {
171 |       const vm = this
172 |       vm.isLoading = true
173 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart/${id}`
174 |       vm.$http.delete(api).then((res) => {
175 |         if (res.data.success) {
176 |           if (rep === false) {
177 |             vm.$bus.$emit('message:push', res.data.message, 'dark')
178 |           } else {
179 |             vm.$bus.$emit('message:push', '購物車清單已更新', 'dark')
180 |           }
181 |         } else {
182 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
183 |         }
184 |         vm.isLoading = false
185 |         vm.getCart()
186 |       })
187 |     },
188 |     getProduct (id = this.$route.params.id) {
189 |       const vm = this
190 |       vm.isLoading = true
191 |       vm.$router.push('/product/' + id).catch((err) => err)
192 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/product/${id}`
193 |       vm.$http.get(api).then((res) => {
194 |         if (res.data.success) {
195 |           vm.product = res.data.product
196 |           vm.product.num = 1
197 |           vm.active.name = vm.product.category
198 |           vm.filterProducts()
199 |         } else {
200 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
201 |         }
202 |       })
203 |     },
204 |     filterProducts () {
205 |       const vm = this
206 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/products/all`
207 |       vm.$http.get(api).then((res) => {
208 |         vm.isLoading = false
209 |         if (res.data.success) {
210 |           const arr = res.data.products.filter(function (item) {
211 |             return item.category === vm.product.category
212 |           })
213 |           arr.forEach((item) => {
214 |             if (vm.products.length < 4 && item.id !== vm.product.id) {
215 |               vm.products.push(item)
216 |             }
217 |           })
218 |           if (document.cookie.indexOf(vm.$route.params.id) !== -1) {
219 |             vm.isLiked = true
220 |           }
221 |         } else {
222 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
223 |         }
224 |       })
225 |     },
226 |     addCart (id, num = 1) {
227 |       const vm = this
228 |       const rel = vm.cart.find((item) => item.product_id === id)
229 |       let obj
230 |       if (rel) {
231 |         obj = { product_id: rel.product_id, qty: num + rel.qty }
232 |         vm.isLoading = true
233 |         const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
234 |         vm.$http
235 |           .post(api, {
236 |             data: obj
237 |           })
238 |           .then((res) => {
239 |             vm.isLoading = false
240 |             if (res.data.success) {
241 |               vm.delCart(rel.id, true)
242 |             } else {
243 |               vm.$bus.$emit('message:push', res.data.message, 'danger')
244 |             }
245 |           })
246 |       } else {
247 |         obj = { product_id: id, qty: num }
248 |         vm.isLoading = true
249 |         const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
250 |         vm.$http
251 |           .post(api, {
252 |             data: obj
253 |           })
254 |           .then((res) => {
255 |             vm.isLoading = false
256 |             if (res.data.success) {
257 |               vm.getCart()
258 |               vm.$bus.$emit('message:push', res.data.message, 'dark')
259 |             } else {
260 |               vm.$bus.$emit('message:push', res.data.message, 'danger')
261 |             }
262 |           })
263 |       }
264 |     },
265 |     buyNow (id, num = 1) {
266 |       const vm = this
267 |       const rel = vm.cart.find((item) => item.product_id === id)
268 |       let obj
269 |       if (rel) {
270 |         obj = { product_id: rel.product_id, qty: num + rel.qty }
271 |         vm.delCart(rel.id, true)
272 |       } else {
273 |         obj = { product_id: id, qty: num }
274 |       }
275 |       vm.isLoading = true
276 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
277 |       vm.$http.post(api, { data: obj }).then((res) => {
278 |         vm.isLoading = false
279 |         if (res.data.success) {
280 |           vm.getCart()
281 |           vm.$bus.$emit('message:push', res.data.message, 'dark')
282 |           vm.$router.push('/cart')
283 |         } else {
284 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
285 |         }
286 |       })
287 |     },
288 |     liked (id = this.$route.params.id) {
289 |       const vm = this
290 |       const cookieAry = document.cookie.split(';')
291 |       let cookie
292 |       let arr
293 |       for (let i = 0, l = cookieAry.length; i < l; ++i) {
294 |         cookie = cookieAry[i].trim()
295 |         cookie = cookie.split('=')
296 |         if (cookie[0] === 'like') {
297 |           arr = cookie[1]
298 |           if (arr.indexOf(id) !== -1) {
299 |             arr = arr.split(',')
300 |             if (arr.length <= 1) {
301 |               document.cookie = 'like=;expires=7;path=/'
302 |             } else {
303 |               arr.splice(arr.indexOf(id), 1)
304 |               document.cookie = `like=${arr};expires=7;path=/`
305 |             }
306 |             vm.$bus.$emit('message:push', '已移除喜好項目', 'danger')
307 |             vm.isLiked = false
308 |           } else if (arr.indexOf(id) === -1) {
309 |             if (arr.length !== 0) {
310 |               arr = arr + ',' + id
311 |             } else {
312 |               arr = id
313 |             }
314 |             document.cookie = `like=${arr};expires=7;path=/`
315 |             vm.$bus.$emit('message:push', '已加入喜好項目', 'dark')
316 |             vm.isLiked = true
317 |           }
318 |         } else if (document.cookie.indexOf('like') === -1) {
319 |           document.cookie = `like=${id};expires=7;path=/`
320 |           vm.$bus.$emit('message:push', '已加入喜好項目', 'dark')
321 |           vm.isLiked = true
322 |         }
323 |       }
324 |     },
325 |     getCart () {
326 |       const vm = this
327 |       vm.isLoading = true
328 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
329 |       vm.$http.get(api).then((res) => {
330 |         if (res.data.success) {
331 |           vm.cart = res.data.data.carts
332 |         } else {
333 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
334 |         }
335 |         vm.isLoading = false
336 |       })
337 |     }
338 |   },
339 |   created () {
340 |     const vm = this
341 |     const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/products/all`
342 |     vm.$http.get(api).then((res) => {
343 |       if (res.data.success) {
344 |         const arr = res.data.products
345 |         const set = new Set()
346 |         arr.filter((item) =>
347 |           !set.has(item.category) ? set.add(item.category) : false
348 |         )
349 |         const temCategory = [...set]
350 |         temCategory.forEach(function (item) {
351 |           vm.categories.push({ title: item, num: 0, path: '' })
352 |         })
353 |         vm.categories.unshift({ title: '全部', num: 0, path: '' })
354 |         const arr2 = []
355 |         for (let i = 1; i < vm.categories.length; i++) {
356 |           const arr = res.data.products.filter(function (item) {
357 |             return item.category === vm.categories[i].title
358 |           })
359 |           arr2.push(arr.length)
360 |         }
361 |         arr2.unshift(arr.length)
362 |         for (let j = 0; j < arr2.length; j++) {
363 |           vm.categories[j].num = arr2[j]
364 |         }
365 |         const arr3 = vm.categories
366 |         const arr4 = ['all', 'Castorland', 'Clementoni', 'Ravensburger']
367 |         for (let i = 0; i < arr3.length; i++) {
368 |           arr3[i].path = arr4[i]
369 |         }
370 |         vm.categories = arr3
371 |       } else {
372 |         vm.$bus.$emit('message:push', res.data.message, 'danger')
373 |       }
374 |     })
375 |     vm.getProduct()
376 |     vm.getCart()
377 |   }
378 | }
379 | </script>
380 | 
381 | <style lang="scss" scoped>
382 | p,
383 | pre {
384 |   font-size: 16px !important;
385 | }
386 | 
387 | .media {
388 |   &-lg-img {
389 |     object-fit: contain;
390 |     height: 330px;
391 |     width: 100%;
392 |   }
393 |   &-sm-img {
394 |     width: 90vw;
395 |     height: auto;
396 |     margin: 0 auto;
397 |   }
398 | }
399 | 
400 | .card:hover{
401 |   cursor: pointer;
402 |   background-color: #343a40;
403 |   color: #f8f9fa;
404 | }
405 | 
406 | @media screen and (min-width: 420px) and (max-width: 992px) {
407 |   .lg {
408 |     display: none;
409 |   }
410 | 
411 |   .md {
412 |     display: block;
413 |   }
414 | }
415 | </style>
416 | 


--------------------------------------------------------------------------------
/src/views/backend/AdminProducts.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <loading :active.sync="isLoading">
  4 |       <div class="loadingio-spinner-spin-ur5grgaunp">
  5 |         <div class="ldio-dwsbgiuamos">
  6 |           <div>
  7 |             <div></div>
  8 |           </div>
  9 |           <div>
 10 |             <div></div>
 11 |           </div>
 12 |           <div>
 13 |             <div></div>
 14 |           </div>
 15 |           <div>
 16 |             <div></div>
 17 |           </div>
 18 |           <div>
 19 |             <div></div>
 20 |           </div>
 21 |           <div>
 22 |             <div></div>
 23 |           </div>
 24 |           <div>
 25 |             <div></div>
 26 |           </div>
 27 |           <div>
 28 |             <div></div>
 29 |           </div>
 30 |         </div>
 31 |       </div>
 32 |     </loading>
 33 | 
 34 |     <div class="lg">
 35 |       <div class="mt-5">
 36 |         <div class="float-left">
 37 |           <h4 class="mt-3 font-weight-bold">
 38 |             <i class="fa fa-wrench" aria-hidden="true"></i>
 39 |             產品管理
 40 |           </h4>
 41 |         </div>
 42 |         <div class="float-right">
 43 |           <button
 44 |             class="btn btn-dark font-weight-bold mt-2 mb-3"
 45 |             @click="openModal(true)"
 46 |           >
 47 |             添加新產品
 48 |           </button>
 49 |         </div>
 50 |       </div>
 51 |       <table class="table lg table-striped table-bordered mt-4 text-dark">
 52 |         <thead>
 53 |           <tr>
 54 |             <th scope="col">名稱</th>
 55 |             <th scope="col">分類</th>
 56 |             <th scope="col">原價</th>
 57 |             <th scope="col">售價</th>
 58 |             <th scope="col">操作</th>
 59 |           </tr>
 60 |         </thead>
 61 |         <tbody>
 62 |           <tr v-for="item in products" :key="item.id">
 63 |             <td>
 64 |               {{ item.title }}
 65 |               <br />
 66 |               <span v-if="item.is_enabled" class="text-muted">已啟用</span>
 67 |               <i v-else class="text-muted">未啟用</i>
 68 |             </td>
 69 |             <td>{{ item.category }}</td>
 70 |             <td class="text-right">
 71 |               {{ item.origin_price | numFormat | dollarSign }}
 72 |             </td>
 73 |             <td class="text-right">
 74 |               {{ item.price | numFormat | dollarSign }}
 75 |             </td>
 76 | 
 77 |             <td>
 78 |               <button
 79 |                 class="btn btn-outline-dark btn-sm mr-lg-2 mr-md-0 font-weight-bold"
 80 |                 @click="openModal(false, item)"
 81 |               >
 82 |                 編輯
 83 |               </button>
 84 |               <button
 85 |                 class="btn btn-outline-danger btn-sm font-weight-bold"
 86 |                 @click="openDelModal(item)"
 87 |               >
 88 |                 刪除
 89 |               </button>
 90 |             </td>
 91 |           </tr>
 92 |         </tbody>
 93 |       </table>
 94 |     </div>
 95 | 
 96 |     <div class="sm">
 97 |       <div>
 98 |         <div class="float-left">
 99 |           <h5 class="font-weight-bold mb-3">
100 |             <i class="fa fa-wrench" aria-hidden="true"></i>
101 |             產品管理
102 |           </h5>
103 |         </div>
104 |         <div class="float-right">
105 |           <button
106 |             class="btn btn-dark btn-sm font-weight-bold"
107 |             @click="openModal(true)"
108 |           >
109 |             添加新產品
110 |           </button>
111 |         </div>
112 |       </div>
113 |       <table class="table table-bordered table-striped text-dark">
114 |         <thead>
115 |           <tr>
116 |             <th scope="col">操作</th>
117 |             <th scope="col">產品名稱 - click to edit</th>
118 |           </tr>
119 |         </thead>
120 |         <tbody>
121 |           <tr v-for="item in products" :key="item.id">
122 |             <td class="align-middle">
123 |               <button
124 |                 type="button"
125 |                 @click="openDelModal(item)"
126 |                 class="btn btn-outline-danger btn-sm"
127 |               >
128 |                 <i aria-hidden="true" class="fa fa-trash"></i>
129 |               </button>
130 |             </td>
131 |             <td>
132 |               <a
133 |                 href="#"
134 |                 class="text-dark"
135 |                 :class="{ 'text-muted': !item.is_enabled }"
136 |                 @click.prevent="openModal(false, item)"
137 |               >
138 |                 {{ item.title }}
139 |               </a>
140 |             </td>
141 |           </tr>
142 |         </tbody>
143 |       </table>
144 |     </div>
145 | 
146 |     <Pagination :pages="pagination" @event="getProducts"></Pagination>
147 | 
148 |     <div
149 |       class="modal fade"
150 |       id="productModal"
151 |       tabindex="-1"
152 |       role="dialog"
153 |       aria-labelledby="exampleModalLabel"
154 |       aria-hidden="true"
155 |     >
156 |       <div class="modal-dialog modal-lg" role="document">
157 |         <div class="modal-content border-0">
158 |           <div class="modal-header bg-dark text-white">
159 |             <h5 class="modal-title" id="exampleModalLabel">
160 |               <span>新增產品</span>
161 |             </h5>
162 |             <button
163 |               type="button"
164 |               class="close"
165 |               data-dismiss="modal"
166 |               aria-label="Close"
167 |             >
168 |               <span class="text-light" aria-hidden="true">&times;</span>
169 |             </button>
170 |           </div>
171 |           <div class="modal-body">
172 |             <div class="row">
173 |               <div class="col-sm-4">
174 |                 <div class="form-group">
175 |                   <label for="image">輸入圖片網址</label>
176 |                   <input
177 |                     type="text"
178 |                     class="form-control"
179 |                     id="image"
180 |                     placeholder="請輸入圖片連結"
181 |                     v-model="tempProduct.imageUrl"
182 |                   />
183 |                 </div>
184 |                 <div class="form-group">
185 |                   <label for="customFile">
186 |                     或
187 |                     <label class="btn btn-dark btn-sm">
188 |                       <input
189 |                         style="display: none"
190 |                         type="file"
191 |                         id="customFile"
192 |                         class="form-control"
193 |                         ref="files"
194 |                         @change="uploadImg"
195 |                       />
196 |                       <i class="fa fa-photo"></i> 上傳圖片
197 |                     </label>
198 |                   </label>
199 |                 </div>
200 |                 <i
201 |                   class="mt-2 fa fa-spinner fa-pulse fa-fw fa-3x"
202 |                   v-if="status.imgUploading"
203 |                 ></i>
204 |                 <img
205 |                   img="https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=828346ed697837ce808cae68d3ddc3cf&auto=format&fit=crop&w=1350&q=80"
206 |                   class="img-fluid"
207 |                   alt
208 |                   :src="tempProduct.imageUrl"
209 |                 />
210 |               </div>
211 |               <div class="col-sm-8">
212 |                 <div class="form-group">
213 |                   <label for="title">標題</label>
214 |                   <input
215 |                     type="text"
216 |                     class="form-control"
217 |                     id="title"
218 |                     placeholder="請輸入標題"
219 |                     v-model="tempProduct.title"
220 |                   />
221 |                 </div>
222 | 
223 |                 <div class="form-row">
224 |                   <div class="form-group col-md-6">
225 |                     <label for="category">分類</label>
226 |                     <input
227 |                       type="text"
228 |                       class="form-control"
229 |                       id="category"
230 |                       placeholder="請輸入分類"
231 |                       v-model="tempProduct.category"
232 |                     />
233 |                   </div>
234 |                   <div class="form-group col-md-6">
235 |                     <label for="price">單位</label>
236 |                     <input
237 |                       type="unit"
238 |                       class="form-control"
239 |                       id="unit"
240 |                       placeholder="請輸入單位"
241 |                       v-model="tempProduct.unit"
242 |                     />
243 |                   </div>
244 |                 </div>
245 | 
246 |                 <div class="form-row">
247 |                   <div class="form-group col-md-6">
248 |                     <label for="origin_price">原價</label>
249 |                     <input
250 |                       type="number"
251 |                       class="form-control"
252 |                       id="origin_price"
253 |                       placeholder="請輸入原價"
254 |                       v-model="tempProduct.origin_price"
255 |                     />
256 |                   </div>
257 |                   <div class="form-group col-md-6">
258 |                     <label for="price">售價</label>
259 |                     <input
260 |                       type="number"
261 |                       class="form-control"
262 |                       id="price"
263 |                       v-model="tempProduct.price"
264 |                       placeholder="請輸入售價"
265 |                     />
266 |                   </div>
267 |                 </div>
268 |                 <hr />
269 | 
270 |                 <div class="form-group">
271 |                   <label for="description">產品描述</label>
272 |                   <textarea
273 |                     type="text"
274 |                     class="form-control"
275 |                     id="description"
276 |                     placeholder="請輸入產品描述"
277 |                     rows="3"
278 |                     v-model="tempProduct.description"
279 |                   ></textarea>
280 |                 </div>
281 |                 <div class="form-group">
282 |                   <label for="content">說明內容</label>
283 |                   <input
284 |                     type="text"
285 |                     class="form-control"
286 |                     id="content"
287 |                     v-model="tempProduct.content"
288 |                     placeholder="請輸入產品說明內容"
289 |                   />
290 |                 </div>
291 |                 <div class="form-group">
292 |                   <div class="form-check">
293 |                     <input
294 |                       class="form-check-input"
295 |                       type="checkbox"
296 |                       id="is_enabled"
297 |                       v-model="tempProduct.is_enabled"
298 |                       :true-value="1"
299 |                       :false-value="0"
300 |                     />
301 |                     <label class="form-check-label" for="is_enabled">
302 |                       是否啟用
303 |                     </label>
304 |                   </div>
305 |                 </div>
306 |               </div>
307 |             </div>
308 |           </div>
309 |           <div class="modal-footer">
310 |             <button
311 |               type="button"
312 |               class="btn btn-outline-secondary"
313 |               data-dismiss="modal"
314 |             >
315 |               取消
316 |             </button>
317 |             <button type="button" class="btn btn-dark" @click="updateProduct">
318 |               確認
319 |             </button>
320 |           </div>
321 |         </div>
322 |       </div>
323 |     </div>
324 | 
325 |     <div
326 |       class="modal fade"
327 |       id="delProductModal"
328 |       tabindex="-1"
329 |       role="dialog"
330 |       aria-labelledby="exampleModalLabel"
331 |       aria-hidden="true"
332 |     >
333 |       <div class="modal-dialog" role="document">
334 |         <div class="modal-content border-0">
335 |           <div class="modal-header bg-dark text-white">
336 |             <h5 class="modal-title" id="exampleModalLabel">
337 |               <span>刪除產品</span>
338 |             </h5>
339 |             <button
340 |               type="button"
341 |               class="close"
342 |               data-dismiss="modal"
343 |               aria-label="Close"
344 |             >
345 |               <span class="text-light" aria-hidden="true">&times;</span>
346 |             </button>
347 |           </div>
348 |           <div class="modal-body lead">
349 |             是否刪除
350 |             <br />
351 |             <strong class="text-light bg-dark p-1">
352 |               {{ tempProduct.title }}
353 |             </strong>
354 |             商品
355 |             <br />
356 |             (刪除後將無法恢復)。
357 |           </div>
358 |           <div class="modal-footer">
359 |             <button
360 |               type="button"
361 |               class="btn btn-outline-secondary"
362 |               data-dismiss="modal"
363 |             >
364 |               取消
365 |             </button>
366 |             <button
367 |               type="button"
368 |               class="btn btn-outline-danger"
369 |               @click="deleteProduct()"
370 |             >
371 |               確認刪除
372 |             </button>
373 |           </div>
374 |         </div>
375 |       </div>
376 |     </div>
377 |   </div>
378 | </template>
379 | 
380 | <script>
381 | import $ from 'jquery'
382 | import Pagination from '@/components/Pagination'
383 | 
384 | export default {
385 |   data () {
386 |     return {
387 |       products: [],
388 |       pagination: {},
389 |       tempProduct: {},
390 |       isNew: false,
391 |       isLoading: false,
392 |       status: {
393 |         imgUploading: false
394 |       }
395 |     }
396 |   },
397 |   methods: {
398 |     getProducts (page = 1) {
399 |       const vm = this
400 |       vm.isLoading = true
401 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/admin/products?page=${page}`
402 |       vm.$http.get(api).then((res) => {
403 |         vm.isLoading = false
404 |         if (res.data.success) {
405 |           vm.products = res.data.products
406 |           vm.pagination = res.data.pagination
407 |         } else {
408 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
409 |         }
410 |       })
411 |     },
412 |     openModal (isNew, item) {
413 |       if (isNew) {
414 |         this.tempProduct = {}
415 |         this.isNew = true
416 |       } else {
417 |         this.tempProduct = { ...item }
418 |         this.isNew = false
419 |       }
420 |       $('#productModal').modal('show')
421 |     },
422 |     updateProduct () {
423 |       const vm = this
424 |       let httpMethod = 'post'
425 |       let api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/admin/product`
426 |       if (!vm.isNew) {
427 |         api = `${api}/${vm.tempProduct.id}`
428 |         httpMethod = 'put'
429 |       }
430 |       vm.$http[httpMethod](api, { data: vm.tempProduct }).then((res) => {
431 |         if (res.data.success) {
432 |           $('#productModal').modal('hide')
433 |           vm.getProducts()
434 |         } else {
435 |           $('#productModal').modal('hide')
436 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
437 |           vm.getProducts()
438 |         }
439 |       })
440 |     },
441 |     openDelModal (item) {
442 |       this.tempProduct = { ...item }
443 |       $('#delProductModal').modal('show')
444 |     },
445 |     deleteProduct () {
446 |       const vm = this
447 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/admin/product/${vm.tempProduct.id}`
448 |       vm.$http.delete(api).then((res) => {
449 |         if (res.data.success) {
450 |           $('#delProductModal').modal('hide')
451 |           vm.getProducts()
452 |         } else {
453 |           $('#delProductModal').modal('hide')
454 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
455 |           vm.getProducts()
456 |         }
457 |       })
458 |     },
459 |     uploadImg () {
460 |       const vm = this
461 |       vm.tempProduct.imageUrl = ''
462 |       vm.status.imgUploading = true
463 |       const img = this.$refs.files.files[0]
464 |       const formData = new FormData()
465 |       formData.append('file-to-upload', img)
466 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/admin/upload`
467 |       vm.$http
468 |         .post(api, formData, {
469 |           headers: {
470 |             'Content-Type': 'multipart/form-data'
471 |           }
472 |         })
473 |         .then((res) => {
474 |           vm.status.imgUploading = false
475 |           if (res.data.success) {
476 |             vm.$set(vm.tempProduct, 'imageUrl', res.data.imageUrl)
477 |           } else {
478 |             vm.$bus.$emit('message:push', res.data.message, 'danger')
479 |           }
480 |         })
481 |     }
482 |   },
483 |   created () {
484 |     this.getProducts()
485 |   },
486 | 
487 |   components: {
488 |     Pagination
489 |   }
490 | }
491 | </script>
492 | 


--------------------------------------------------------------------------------
/src/views/frontend/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <loading :active.sync="isLoading">
  4 |       <h4>載入中 請稍候...</h4>
  5 |     </loading>
  6 |     <MessageAlert></MessageAlert>
  7 | 
  8 |     <header class="navbar lg navbar-expand navbar-light bg-light">
  9 |       <router-link class="h4 text-muted mt-2" to="/">
 10 |         <img src="@/assets/image/logo.png" alt="Logo" class="logo" />
 11 |         拼圖迷
 12 |       </router-link>
 13 | 
 14 |       <div
 15 |         class="collapse navbar-collapse d-flex justify-content-end"
 16 |         id="navbarSupportedContent"
 17 |       >
 18 |         <ul class="navbar-nav">
 19 |           <li class="nav-item">
 20 |             <router-link class="nav-link " to="/">首頁</router-link>
 21 |           </li>
 22 |           <li class="nav-item">
 23 |             <router-link class="nav-link " to="/about">關於我們</router-link>
 24 |           </li>
 25 |           <li class="nav-item">
 26 |             <router-link class="nav-link " to="/products/all"
 27 |               >產品列表</router-link
 28 |             >
 29 |           </li>
 30 |           <li class="nav-item dropdown">
 31 |             <a
 32 |               class="nav-link dropdown-toggle "
 33 |               href="#"
 34 |               id="navbarDropdown"
 35 |               role="button"
 36 |               data-toggle="dropdown"
 37 |               aria-haspopup="true"
 38 |               aria-expanded="false"
 39 |             >
 40 |               用戶選單
 41 |             </a>
 42 |             <div
 43 |               class="dropdown-menu dropdown-menu-right"
 44 |               aria-labelledby="navbarDropdown"
 45 |             >
 46 |               <router-link class="dropdown-item" to="/cart">
 47 |                 <i class="fa fa-shopping-cart mr-2" aria-hidden="true"></i>
 48 |                 購物車頁面
 49 |               </router-link>
 50 |               <router-link class="dropdown-item" to="/coupon">
 51 |                 <i class="fa fa-ticket mr-2" aria-hidden="true"></i>優惠券專區
 52 |               </router-link>
 53 |               <router-link class="dropdown-item" to="/like">
 54 |                 <i class="fa fa-heart mr-2" aria-hidden="true"></i>喜好的項目
 55 |               </router-link>
 56 |               <div class="dropdown-divider"></div>
 57 |               <router-link class="dropdown-item" to="/login">
 58 |                 <i class="mr-2 fa fa-sign-in" aria-hidden="true"></i>管理員登入
 59 |               </router-link>
 60 |             </div>
 61 |           </li>
 62 |         </ul>
 63 |       </div>
 64 |     </header>
 65 | 
 66 |     <header
 67 |       class="navbar sm-header sm navbar-expand-lg navbar-light bg-light"
 68 |     >
 69 |       <router-link class="h4 float-left text-muted mt-2" to="/">
 70 |         <img src="@/assets/image/logo.png" alt="Logo" class="logo" />
 71 |         拼圖迷
 72 |       </router-link>
 73 | 
 74 |       <div class="float-right" id="navbarSupportedContent">
 75 |         <a
 76 |           class="dropdown-toggle text-dark"
 77 |           href="#"
 78 |           id="navbarDropdown"
 79 |           role="button"
 80 |           data-toggle="dropdown"
 81 |           aria-haspopup="true"
 82 |           aria-expanded="false"
 83 |         >
 84 |           用戶選單
 85 |         </a>
 86 |         <div
 87 |           class="dropdown-menu dropdown-menu-right"
 88 |           aria-labelledby="navbarDropdown"
 89 |         >
 90 |           <router-link class="dropdown-item" to="/">
 91 |             <i class="fa fa-home mr-2" aria-hidden="true"></i>首頁
 92 |           </router-link>
 93 |           <router-link class="dropdown-item" to="/about">
 94 |             <i class="fa fa-info-circle mr-2" aria-hidden="true"></i>關於我們
 95 |           </router-link>
 96 |           <router-link class="dropdown-item" to="/products/all">
 97 |             <i class="fa fa-list mr-2" aria-hidden="true"></i>產品列表
 98 |           </router-link>
 99 |           <router-link class="dropdown-item" to="/cart">
100 |             <i class="fa fa-shopping-cart mr-2" aria-hidden="true"></i>購物車
101 |           </router-link>
102 |           <router-link class="dropdown-item" to="/coupon">
103 |             <i class="fa fa-ticket mr-2" aria-hidden="true"></i>優惠券專區
104 |           </router-link>
105 |           <router-link class="dropdown-item" to="/like">
106 |             <i class="fa fa-heart mr-2" aria-hidden="true"></i>喜好項目
107 |           </router-link>
108 |           <div class="dropdown-divider"></div>
109 |           <router-link class="dropdown-item" to="/login">
110 |             <i class="mr-2 fa fa-sign-in" aria-hidden="true"></i>管理員登入
111 |           </router-link>
112 |         </div>
113 |       </div>
114 |     </header>
115 | 
116 |     <router-view
117 |       class="main-content"
118 |       v-if="this.$route.path !== '/'"
119 |       :key="this.$route.fullPath"
120 |     ></router-view>
121 | 
122 |     <div class="main-content" v-else>
123 |       <div class="main-img-lg lg">
124 |         <img
125 |           src="https://images.unsplash.com/photo-1590146757941-486a0c8385ec?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80"
126 |           class="d-block w-100"
127 |         />
128 |         <div class="main-img-lg-caption bg-light text-dark">
129 |           <h2 class="mt-3">歡迎光臨拼圖迷❤️</h2>
130 |           <p class="h4 font-weight-normal">
131 |             市面上進口拼圖網路商店的銷售冠軍🏆
132 |             <br />
133 |             擁有歐洲三大進口拼圖獨家代理權！
134 |             <br />
135 |             銷量第一產品 ➡️ 紐約天際線-2000片
136 |             <br />
137 |             本公司產品承諾正版保證- 皆附保證書📖
138 |           </p>
139 |         </div>
140 |         <button
141 |           @click="$router.push('/product/-NYXBMCKSLI9cZGSfPj4')"
142 |           class="lg btn main-img-lg-btn btn-dark"
143 |         >
144 |           立即搶購
145 |           <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
146 |         </button>
147 |       </div>
148 | 
149 |       <div class="main-img-sm sm">
150 |         <img
151 |           src="https://images.unsplash.com/photo-1590146757941-486a0c8385ec?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1534&q=80"
152 |           class="d-block w-100"
153 |         />
154 |         <div class="main-img-sm-caption text-dark">
155 |           <h4 class="my-3">歡迎光臨拼圖迷❤️</h4>
156 |           <p class="h6 font-weight-normal">
157 |             市面上進口拼圖網路商店的銷售冠軍🏆
158 |             <br />
159 |             擁有歐洲三大進口拼圖獨家代理權！
160 |             <br />
161 |             銷量第一產品 ➡️ 紐約天際線-2000片
162 |             <br />
163 |             本公司產品承諾正版保證- 皆附保證書📖
164 |           </p>
165 |         </div>
166 |         <button
167 |           @click="$router.push('/product/-NYXBMCKSLI9cZGSfPj4')"
168 |           class="btn main-img-sm-btn btn-dark btn-sm"
169 |         >
170 |           立即搶購
171 |           <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
172 |         </button>
173 |       </div>
174 | 
175 |       <div class="container">
176 |         <div class="introduction my-5">
177 |           <h3 class="my-4">⁂ 主要服務項目</h3>
178 |           <div class="row text-dark">
179 |             <div class="col-md-4">
180 |               <i
181 |                 class="display-3 text-dark p-2 fa fa-truck"
182 |                 aria-hidden="true"
183 |               />
184 |               <h2>特快的出貨</h2>
185 |               <p class="lead">
186 |                 當天下訂立即出貨！全店所有商品提供
187 |                 <b class="text-danger"> 十二小時 </b>
188 |                 內到貨服務！快讓拼圖迷用最快速的服務把你寵壞
189 |               </p>
190 |             </div>
191 |             <div class="col-md-4">
192 |               <i class="display-3 fa fa-key p-2 text-dark" aria-hidden="true" />
193 |               <h2>完善的安全</h2>
194 |               <p class="lead">
195 |                 拼圖迷採用全世界最先進的
196 |                 <b class="text-danger">SSL傳輸加密</b>
197 |                 機制，讓您能夠絕對安全安心地享受網上購物的樂趣
198 |               </p>
199 |             </div>
200 |             <div class="col-md-4">
201 |               <i
202 |                 class="display-3 text-dark fa fa-thumbs-o-up p-2"
203 |                 aria-hidden="true"
204 |               />
205 |               <h2>簡單的設計</h2>
206 |               <p class="lead">
207 |                 <b class="text-danger">一目瞭然</b>
208 |                 的排版、分頁，讓您輕鬆知道如何購買、如何結帳，就連第一次瀏覽也不用怕找不到下單方式
209 |               </p>
210 |             </div>
211 |           </div>
212 |         </div>
213 |         <hr />
214 |         <div class="news lg my-5">
215 |           <h3 class="my-4">
216 |             <i class="fa fa-newspaper-o" aria-hidden="true"></i>
217 |             最新消息
218 |           </h3>
219 |           <div class="row mt-5">
220 |             <div class="col-lg-5 align-self-center">
221 |               <img
222 |                 src="@/assets/image/anniversary8.jpg"
223 |                 alt="Happy Anniversary 8"
224 |                 class="w-75"
225 |               />
226 |             </div>
227 |             <div class="col-lg-7">
228 |               <h2 class="text-muted mt-2">
229 |                 拼圖迷八週年慶
230 |                 <span class="text-dark">全館八折優惠！</span>
231 |               </h2>
232 |               <button
233 |                 type="button"
234 |                 class="btn my-4 btn-outline-dark"
235 |                 data-toggle="modal"
236 |                 data-target="#couponModal"
237 |               >
238 |                 週年慶新客戶加碼送！
239 |               </button>
240 |               <p class="lead">
241 |                 轉眼間 2020
242 |                 年了，您的孩子長大了，您也成熟了，而我們，也老了！感謝這一路上多年來所有不管是新客舊客的支持與陪伴！在此宣佈！
243 |                 <b class="font-italic">『拼圖迷』八歲囉！！！</b>
244 |                 就讓我們一同歡慶這個美好的節日！感恩回饋不打烊 - 八週年全館
245 |                 <u class="text-muted">免運費</u>
246 |                 直接送給您！一起買爆拼圖吧😊
247 |               </p>
248 |             </div>
249 |           </div>
250 |         </div>
251 |         <div class="news sm mt-4">
252 |           <h4 class="my-4">
253 |             <i class="fa fa-newspaper-o" aria-hidden="true"></i>
254 |             最新消息
255 |           </h4>
256 |           <div class="mt-5">
257 |             <h3 class="text-muted">
258 |               拼圖迷八週年慶
259 |               <p class="text-dark">全館八折優惠！</p>
260 |             </h3>
261 |             <img
262 |               src="@/assets/image/anniversary8.jpg"
263 |               alt="Happy Anniversary 8"
264 |               class="img-fluid mt-2 mb-4"
265 |             />
266 | 
267 |             <button
268 |               type="button"
269 |               class="btn mb-4 btn-dark"
270 |               data-toggle="modal"
271 |               data-target="#couponModal"
272 |             >
273 |               週年慶新客戶加碼送！
274 |             </button>
275 | 
276 |             <p class="text-lg">
277 |               轉眼間 2020
278 |               年了，您的孩子長大了，您也成熟了，而我們，也老了！感謝這一路上多年來所有不管是新客舊客的支持與陪伴！在此宣佈！
279 |               <b class="font-italic">『拼圖迷』八歲囉！！！</b>
280 |               就讓我們一同歡慶這個美好的節日！感恩回饋不打烊 - 八週年全館
281 |               <u class="text-muted">八折活動不限期</u>
282 |               直接送給您！讓您買到手軟停不下來！今年也讓我們用破盤價寵壞您吧😊
283 |             </p>
284 |           </div>
285 |         </div>
286 |         <hr />
287 |         <div class="randomproducts my-5">
288 |           <h3 class="my-4">⚄ 隨機推薦</h3>
289 |           <div class="row text-dark">
290 |             <div class="col-md p-2" v-for="item in randoms" :key="item.id">
291 |               <div class="card border-0 shadow-sm">
292 |                 <div
293 |                   style="height: 200px;background-size: cover;background-position: center;"
294 |                   :style="{
295 |                     backgroundImage: `url(${item.imageUrl || item.image})`,
296 |                   }"
297 |                 ></div>
298 |                 <div class="card-body">
299 |                   <h5 class="card-title">
300 |                     {{ item.title }}
301 |                     <br />
302 |                     <small>
303 |                       <span class="badge badge-dark p-1">
304 |                         {{ item.category }}
305 |                       </span>
306 |                     </small>
307 |                   </h5>
308 |                   <p class="card-text">{{ item.content }}</p>
309 |                   <div>
310 |                     <div class="h5" v-if="!item.price">
311 |                       {{ item.origin_price }} 元
312 |                     </div>
313 |                     <del class="text-muted" v-if="item.price">
314 |                       原價 {{ item.origin_price }} 元
315 |                     </del>
316 |                     <div class="h5" v-if="item.price">
317 |                       現在只要 {{ item.price }} 元
318 |                     </div>
319 |                   </div>
320 |                 </div>
321 |                 <div class="card-footer d-flex">
322 |                   <button
323 |                     type="button"
324 |                     class="btn btn-outline-dark btn-sm"
325 |                     @click="$router.push(`/product/${item.id}`)"
326 |                   >
327 |                     查看更多
328 |                   </button>
329 |                   <button
330 |                     type="button"
331 |                     class="btn btn-dark btn-sm ml-auto"
332 |                     @click="addCart(item.id)"
333 |                   >
334 |                     加到購物車
335 |                   </button>
336 |                 </div>
337 |               </div>
338 |             </div>
339 |           </div>
340 |           <div class="my-4 text-secondary">
341 |             不喜歡?
342 |             <a
343 |               class="text-dark"
344 |               href="#"
345 |               @click.prevent="randomProducts('隨機推薦已更新!')"
346 |             >
347 |               點我
348 |             </a>
349 |             換一組試試😊
350 |           </div>
351 |         </div>
352 |       </div>
353 |     </div>
354 |     <footer class="navbar navbar-light bg-light text-dark">
355 |       <div class="w-100 my-2">
356 |         聯絡我們:
357 |         <ul class="nav justify-content-center mb-2">
358 |           <li class="nav-item">
359 |             <a class="nav-link p-1 text-dark" href="#">
360 |               <i class="fa fa-lg fa-facebook-official" aria-hidden="true"></i>
361 |             </a>
362 |           </li>
363 |           <li class="nav-item">
364 |             <a class="nav-link p-1 text-dark" href="https://github.com/WangShuan/vue-portfolio-v3">
365 |               <i class="fa fa-lg fa-github" aria-hidden="true"></i>
366 |             </a>
367 |           </li>
368 |           <li class="nav-item">
369 |             <a class="nav-link p-1 text-dark" href="#">
370 |               <i class="fa fa-lg fa-instagram" aria-hidden="true"></i>
371 |             </a>
372 |           </li>
373 |           <li class="nav-item">
374 |             <a class="nav-link p-1 text-dark" href="#">
375 |               <i class="fa fa-lg fa-twitter-square" aria-hidden="true"></i>
376 |             </a>
377 |           </li>
378 |         </ul>
379 |         <div>
380 |           <small class="d-block">
381 |             © Company 2020 Made with
382 |             <a class="text-muted" href="https://bootstrap.hexschool.com/">
383 |               Bootstrap4
384 |             </a>
385 |           </small>
386 |           <i>本網頁僅供學習使用 無任何商業用途</i>
387 |         </div>
388 |       </div>
389 |     </footer>
390 | 
391 |     <div
392 |       class="modal fade"
393 |       id="couponModal"
394 |       tabindex="-1"
395 |       role="dialog"
396 |       aria-labelledby="couponModalTitle"
397 |       aria-hidden="true"
398 |     >
399 |       <div class="modal-dialog  modal-dialog-centered" role="document">
400 |         <div class="modal-content">
401 |           <div class="modal-header bg-dark text-light">
402 |             <h5 class="modal-title" id="couponModalTitle">領取優惠碼</h5>
403 |             <button
404 |               type="button"
405 |               class="close text-light"
406 |               data-dismiss="modal"
407 |               aria-label="Close"
408 |             >
409 |               <span aria-hidden="true">&times;</span>
410 |             </button>
411 |           </div>
412 |           <div class="modal-body">
413 |             <h6 class="mb-0">
414 |               <span>點擊複製</span> ☞
415 |               <input
416 |                 class="h4 text-danger copy"
417 |                 type="text"
418 |                 @focus="copy"
419 |                 value="new88"
420 |               />
421 |               <br />不限金額結帳即享88折優惠
422 |             </h6>
423 |           </div>
424 |         </div>
425 |       </div>
426 |     </div>
427 |   </div>
428 | </template>
429 | 
430 | <script>
431 | import MessageAlert from '@/components/MessageAlert'
432 | 
433 | export default {
434 |   data () {
435 |     return {
436 |       isLoading: false,
437 |       randoms: [],
438 |       cart: [],
439 |       screenWidth: document.documentElement.clientWidth
440 |     }
441 |   },
442 |   components: { MessageAlert },
443 |   methods: {
444 |     copy (e) {
445 |       e.currentTarget.select()
446 |       document.execCommand('Copy')
447 |       this.$bus.$emit('message:push', '複製成功', 'dark')
448 |     },
449 |     randomProducts (msg) {
450 |       const vm = this
451 |       vm.isLoading = true
452 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/products/all`
453 |       vm.$http.get(api).then((res) => {
454 |         vm.isLoading = false
455 |         if (res.data.success) {
456 |           vm.randoms = []
457 |           const products = res.data.products.filter(
458 |             (item) => item.is_enabled === 1
459 |           )
460 |           const arr = products
461 |           let ranNum = 3
462 |           if (vm.screenWidth > 768) {
463 |             ranNum = 4
464 |           }
465 |           for (let i = 0; i < ranNum; i++) {
466 |             const ran = Math.floor(Math.random() * arr.length)
467 |             vm.randoms.push(arr.splice(ran, 1)[0])
468 |           }
469 |           if (msg) {
470 |             vm.$bus.$emit('message:push', msg, 'dark')
471 |           }
472 |         } else {
473 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
474 |         }
475 |         vm.isLoading = false
476 |       })
477 |     },
478 |     addCart (id, num = 1) {
479 |       const vm = this
480 |       let rel = vm.cart.find((item) => item.product_id === id)
481 |       let obj
482 |       if (rel) {
483 |         obj = { product_id: rel.product_id, qty: rel.qty + 1 }
484 |         vm.isLoading = true
485 |         const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
486 |         vm.$http
487 |           .post(api, {
488 |             data: obj
489 |           })
490 |           .then((res) => {
491 |             vm.isLoading = false
492 |             if (res.data.success) {
493 |               vm.delCart(rel.id, true)
494 |               rel = ''
495 |             } else {
496 |               vm.$bus.$emit('message:push', res.data.message, 'danger')
497 |             }
498 |           })
499 |       } else {
500 |         obj = { product_id: id, qty: num }
501 |         vm.isLoading = true
502 |         const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
503 |         vm.$http
504 |           .post(api, {
505 |             data: obj
506 |           })
507 |           .then((res) => {
508 |             vm.isLoading = false
509 |             if (res.data.success) {
510 |               vm.getCart()
511 |               vm.$bus.$emit('message:push', res.data.message, 'dark')
512 |             } else {
513 |               vm.$bus.$emit('message:push', res.data.message, 'danger')
514 |             }
515 |           })
516 |       }
517 |     },
518 |     delCart (id, rep = false) {
519 |       const vm = this
520 |       vm.isLoading = true
521 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart/${id}`
522 |       vm.$http.delete(api).then((res) => {
523 |         if (res.data.success) {
524 |           if (rep === false) {
525 |             vm.$bus.$emit('message:push', res.data.message, 'dark')
526 |           } else {
527 |             vm.$bus.$emit('message:push', '購物車清單已更新', 'dark')
528 |           }
529 |         } else {
530 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
531 |         }
532 |         vm.isLoading = false
533 |         vm.getCart()
534 |       })
535 |     },
536 |     getCart () {
537 |       const vm = this
538 |       vm.isLoading = true
539 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
540 |       vm.$http.get(api).then((res) => {
541 |         if (res.data.success) {
542 |           vm.cart = res.data.data.carts
543 |         } else {
544 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
545 |         }
546 |         vm.isLoading = false
547 |       })
548 |     }
549 |   },
550 |   created () {
551 |     const vm = this
552 |     vm.randomProducts('歡迎光臨拼圖迷～❤️')
553 |     vm.getCart()
554 |   },
555 |   watch: {
556 |     $route: function (to, from) {
557 |       if (to.path === '/' && from.path !== '/') {
558 |         this.getCart()
559 |       }
560 |     }
561 |   }
562 | }
563 | </script>
564 | 


--------------------------------------------------------------------------------
/src/views/backend/TestOrders.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <loading :active.sync="isLoading">
  4 |       <div class="loadingio-spinner-spin-ur5grgaunp">
  5 |         <div class="ldio-dwsbgiuamos">
  6 |           <div>
  7 |             <div></div>
  8 |           </div>
  9 |           <div>
 10 |             <div></div>
 11 |           </div>
 12 |           <div>
 13 |             <div></div>
 14 |           </div>
 15 |           <div>
 16 |             <div></div>
 17 |           </div>
 18 |           <div>
 19 |             <div></div>
 20 |           </div>
 21 |           <div>
 22 |             <div></div>
 23 |           </div>
 24 |           <div>
 25 |             <div></div>
 26 |           </div>
 27 |           <div>
 28 |             <div></div>
 29 |           </div>
 30 |         </div>
 31 |       </div>
 32 |     </loading>
 33 |     <div class="lg mt-5">
 34 |       <div class="float-left">
 35 |         <h4 class="mt-3 font-weight-bold">
 36 |           <i class="fa fa-th" aria-hidden="true"></i>
 37 |           商品列表
 38 |         </h4>
 39 |       </div>
 40 |     </div>
 41 | 
 42 |     <div class="sm">
 43 |       <div class="float-left">
 44 |         <h5 class="mt-3 font-weight-bold">
 45 |           <i class="fa fa-th" aria-hidden="true"></i>
 46 |           商品列表
 47 |         </h5>
 48 |       </div>
 49 |     </div>
 50 | 
 51 |     <Cards
 52 |       :products="products"
 53 |       @getProducts="getProducts"
 54 |       @getOneProduct="getOneProduct"
 55 |       @addCart="addCart"
 56 |     ></Cards>
 57 | 
 58 |     <div
 59 |       id="cart-list-lg"
 60 |       class="col-md-10 py-2 border-top mx-auto lg"
 61 |       v-if="cart.total > 0"
 62 |     >
 63 |       <h4 class="my-3">
 64 |         <i class="fa fa-shopping-cart" aria-hidden="true"></i>
 65 |         購物車清單
 66 |       </h4>
 67 |       <table class="table table-striped table-bordered text-dark mt-4">
 68 |         <thead class="thead">
 69 |           <th>操作</th>
 70 |           <th>品名</th>
 71 |           <th>數量</th>
 72 |           <th>單價</th>
 73 |         </thead>
 74 |         <tbody>
 75 |           <tr v-for="item in cart.carts" :key="item.id">
 76 |             <td class="align-middle">
 77 |               <button
 78 |                 type="button"
 79 |                 class="btn btn-outline-danger btn-sm"
 80 |                 @click="delCart(item.id)"
 81 |               >
 82 |                 <i class="fa fa-trash" aria-hidden="true"></i>
 83 |               </button>
 84 |             </td>
 85 |             <td class="align-middle">
 86 |               {{ item.product.title }}
 87 |               <div class="text-muted" v-if="cart.final_total !== cart.total">
 88 |                 已套用優惠券
 89 |               </div>
 90 |             </td>
 91 |             <td class="align-middle">{{ item.qty }}/{{ item.product.unit }}</td>
 92 |             <td class="text-right">
 93 |               <del class="text-muted" v-if="cart.final_total !== cart.total">
 94 |                 {{ item.total | numFormat | dollarSign }}
 95 |               </del>
 96 |               <template v-else>
 97 |                 {{ item.total | numFormat | dollarSign }}
 98 |               </template>
 99 |               <div class="text-dark" v-if="cart.final_total !== cart.total">
100 |                 折扣後
101 |                 {{ item.final_total | numFormat | dollarSign }}
102 |               </div>
103 |             </td>
104 |           </tr>
105 |         </tbody>
106 |         <tfoot>
107 |           <tr>
108 |             <td colspan="3" class="text-right">總計</td>
109 |             <td class="text-right">
110 |               {{ cart.total | numFormat | dollarSign }}
111 |             </td>
112 |           </tr>
113 |           <tr v-if="cart.final_total !== cart.total">
114 |             <td colspan="3" class="text-right text-muted">折扣價</td>
115 |             <td class="text-right text-muted">
116 |               {{ cart.final_total | numFormat | dollarSign }}
117 |             </td>
118 |           </tr>
119 |         </tfoot>
120 |       </table>
121 |       <div class="input-group">
122 |         <input
123 |             type="text"
124 |             class="form-control"
125 |             placeholder="請輸入優惠碼"
126 |             v-model="couponCode"
127 |         />
128 |         <button class="btn btn-dark w-25" type="button" @click="addCoupon">
129 |           套用優惠碼
130 |         </button>
131 |       </div>
132 |     </div>
133 | 
134 |     <div id="cart-list-sm" class="sm" v-if="cart.total > 0">
135 |       <h5><i class="fa fa-shopping-cart" aria-hidden="true"></i> 購物車清單</h5>
136 |       <table class="table table-striped table-bordered text-dark mt-4">
137 |         <thead class="thead">
138 |           <th width="80">操作</th>
139 |           <th colspan="2">商品內容</th>
140 |         </thead>
141 |         <tbody v-for="item in cart.carts" :key="item.id">
142 |           <tr>
143 |             <td class="align-middle">
144 |               <button
145 |                 type="button"
146 |                 class="btn btn-outline-dark btn-sm"
147 |                 @click="delCart(item.id)"
148 |               >
149 |                 <i class="fa fa-trash" aria-hidden="true"></i>
150 |               </button>
151 |             </td>
152 |             <td class="text-center">
153 |               <div class="float-left">
154 |                 {{ item.product.title }} × {{ item.qty }}
155 |               </div>
156 |               <div class="float-right">
157 |                 <del class="text-muted" v-if="cart.final_total !== cart.total">
158 |                   {{ item.total | numFormat | dollarSign }}
159 |                 </del>
160 |                 <template v-else>
161 |                   {{ item.total | numFormat | dollarSign }}
162 |                 </template>
163 |                 <div class="text-dark" v-if="cart.final_total !== cart.total">
164 |                   折扣後
165 |                   {{ item.final_total | numFormat | dollarSign }}
166 |                 </div>
167 |               </div>
168 |               <br />
169 |               <div
170 |                 class="text-muted text-left"
171 |                 v-if="cart.final_total !== cart.total"
172 |               >
173 |                 已套用優惠券
174 |               </div>
175 |             </td>
176 |           </tr>
177 |         </tbody>
178 |         <tfoot>
179 |           <tr :class="{ 'text-muted': cart.final_total !== cart.total }">
180 |             <td class="text-right">總計</td>
181 |             <td colspan="2" class="text-right">
182 |               {{ cart.total | numFormat | dollarSign }}
183 |             </td>
184 |           </tr>
185 |           <tr v-if="cart.final_total !== cart.total">
186 |             <td class="pl-0 text-right text-dark">應付金額</td>
187 |             <td class="text-right text-dark">
188 |               {{ cart.final_total | numFormat | dollarSign }}
189 |             </td>
190 |           </tr>
191 |         </tfoot>
192 |       </table>
193 |       <h5>
194 |         <i aria-hidden="true" class="fa fa-ticket"></i>
195 |         優惠券
196 |       </h5>
197 |       <div class="input-group input-group-sm p-0">
198 |         <input
199 |           type="text"
200 |           class="form-control text-center"
201 |           placeholder="請輸入優惠碼"
202 |           v-model="couponCode"
203 |         />
204 |       </div>
205 |       <button
206 |         class="btn btn-dark rounded-0 w-100 btn-sm font-weight-bold"
207 |         type="button"
208 |         @click="addCoupon"
209 |       >
210 |         套用優惠碼
211 |       </button>
212 |     </div>
213 |     <hr />
214 |     <div class="py-3" v-if="cart.total !== 0">
215 |       <h4 class="my-3">
216 |         <i class="fa fa-shopping-bag" aria-hidden="true"></i>
217 |         填寫收件人
218 |         <span class="text-danger my-2">* 為必填項目</span>
219 |       </h4>
220 |       <div class="row justify-content-center mx-3">
221 |         <div class="col-md-8 my-2 mx-auto">
222 |           <ValidationObserver ref="form" v-slot="{ invalid }">
223 |             <form class="text-dark text-left" @submit.prevent="addOrder">
224 |               <div class="form-group">
225 |                 <ValidationProvider
226 |                   v-slot="{ failed, errors }"
227 |                   name="email"
228 |                   rules="required|email"
229 |                 >
230 |                   <label for="useremail">電子信箱</label>
231 |                   <input
232 |                     type="text"
233 |                     name="email"
234 |                     class="form-control form-control-sm"
235 |                     id="useremail"
236 |                     v-model="form.user.email"
237 |                     :class="{ 'is-invalid': failed }"
238 |                     placeholder="請輸入收件人email"
239 |                   />
240 |                   <span v-if="failed" class="text-danger">{{ errors[0] }}</span>
241 |                 </ValidationProvider>
242 |               </div>
243 |               <div class="form-row">
244 |                 <div class="form-group col-md-5">
245 |                   <ValidationProvider
246 |                     v-slot="{ failed, errors }"
247 |                     name="name"
248 |                     rules="required"
249 |                   >
250 |                     <label for="username">姓名</label>
251 |                     <input
252 |                       type="text"
253 |                       name="name"
254 |                       id="username"
255 |                       v-model="form.user.name"
256 |                       class="form-control form-control-sm"
257 |                       :class="{ 'is-invalid': failed }"
258 |                       placeholder="請輸入收件人姓名"
259 |                     />
260 |                     <span v-if="failed" class="text-danger">
261 |                       {{ errors[0] }}
262 |                     </span>
263 |                   </ValidationProvider>
264 |                 </div>
265 |                 <div class="form-group col-md-7">
266 |                   <ValidationProvider
267 |                     v-slot="{ failed, errors }"
268 |                     name="sm"
269 |                     rules="required|numeric"
270 |                   >
271 |                     <label for="usertel">電話號碼</label>
272 |                     <input
273 |                       type="text"
274 |                       name="sm"
275 |                       v-model="form.user.tel"
276 |                       id="usertel"
277 |                       class="form-control form-control-sm"
278 |                       :class="{ 'is-invalid': failed }"
279 |                       placeholder="請輸入收件人聯絡電話"
280 |                     />
281 |                     <span v-if="failed" class="text-danger">
282 |                       {{ errors[0] }}
283 |                     </span>
284 |                   </ValidationProvider>
285 |                 </div>
286 |               </div>
287 |               <div class="form-group">
288 |                 <ValidationProvider
289 |                   v-slot="{ failed, errors }"
290 |                   name="address"
291 |                   rules="required|min:3"
292 |                 >
293 |                   <label for="useraddress">收件地址</label>
294 |                   <input
295 |                     type="text"
296 |                     name="address"
297 |                     v-model="form.user.address"
298 |                     id="useraddress"
299 |                     class="form-control form-control-sm"
300 |                     :class="{ 'is-invalid': failed }"
301 |                     placeholder="請輸入收件人地址"
302 |                   />
303 |                   <span v-if="failed" class="text-danger">{{ errors[0] }}</span>
304 |                 </ValidationProvider>
305 |               </div>
306 | 
307 |               <div class="form-group">
308 |                 <label for="message">備註</label>
309 |                 <textarea
310 |                   name="message"
311 |                   id="message"
312 |                   cols="30"
313 |                   rows="5"
314 |                   v-model="form.message"
315 |                   placeholder="商品備註"
316 |                   class="form-control"
317 |                 ></textarea>
318 |               </div>
319 |               <div class="text-right">
320 |                 <button class="btn mt-3 btn-dark" :disabled="invalid">
321 |                   資料送出
322 |                 </button>
323 |               </div>
324 |             </form>
325 |           </ValidationObserver>
326 |         </div>
327 |       </div>
328 |     </div>
329 | 
330 |     <div
331 |       class="modal fade"
332 |       id="productModal"
333 |       tabindex="-1"
334 |       role="dialog"
335 |       aria-labelledby="exampleModalLabel"
336 |       aria-hidden="true"
337 |     >
338 |       <div class="modal-dialog" role="document">
339 |         <div class="modal-content">
340 |           <div class="modal-header bg-dark">
341 |             <h5 class="modal-title text-white" id="exampleModalLabel">
342 |               {{ product.title }}
343 |             </h5>
344 |             <button
345 |               type="button"
346 |               class="close"
347 |               data-dismiss="modal"
348 |               aria-label="Close"
349 |             >
350 |               <span class="text-white" aria-hidden="true">&times;</span>
351 |             </button>
352 |           </div>
353 |           <div class="modal-body">
354 |             <img
355 |               class="img-fluid"
356 |               alt
357 |               :src="product.imageUrl || product.image"
358 |             />
359 |             <blockquote class="blockquote mt-3">
360 |               <p class="mb-2">{{ product.content }}</p>
361 |               <pre class="text-muted small">{{ product.description }}</pre>
362 |             </blockquote>
363 |             <hr />
364 |             <div class="d-flex justify-content-between align-items-baseline">
365 |               <div class="h5" v-if="!product.price">
366 |                 {{ product.origin_price }} 元
367 |               </div>
368 |               <del class="h6 text-muted" v-if="product.price">
369 |                 原價 {{ product.origin_price }} 元
370 |               </del>
371 |               <div class="h5 text-dark" v-if="product.price">
372 |                 現在只要 {{ product.price }} 元
373 |               </div>
374 |             </div>
375 |             <select name class="form-control mt-3" v-model="product.num">
376 |               <option v-for="num in 10" :key="num" :value="num">
377 |                 選購 {{ num }} {{ product.unit }}
378 |               </option>
379 |             </select>
380 |           </div>
381 |           <div class="modal-footer">
382 |             <div class="text-muted text-nowrap mr-3">
383 |               小計
384 |               <strong>{{ product.num * product.price }}</strong> 元
385 |             </div>
386 |             <button
387 |               type="button"
388 |               class="btn btn-dark"
389 |               @click="addCart(product.id, product.num)"
390 |             >
391 |               加入購物車
392 |             </button>
393 |           </div>
394 |         </div>
395 |       </div>
396 |     </div>
397 |   </div>
398 | </template>
399 | 
400 | <script>
401 | import $ from 'jquery'
402 | import Cards from '@/components/Cards'
403 | 
404 | export default {
405 |   data () {
406 |     return {
407 |       products: [],
408 |       isLoading: false,
409 |       product: {},
410 |       status: {
411 |         loadingItem: ''
412 |       },
413 |       cart: [],
414 |       couponCode: '',
415 |       form: {
416 |         user: {
417 |           address: '',
418 |           email: '',
419 |           name: '',
420 |           tel: ''
421 |         },
422 |         message: ''
423 |       }
424 |     }
425 |   },
426 |   methods: {
427 |     getProducts () {
428 |       const vm = this
429 |       vm.isLoading = true
430 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/products/all`
431 |       vm.$http.get(api).then((res) => {
432 |         vm.isLoading = false
433 |         if (res.data.success) {
434 |           vm.products = res.data.products
435 |         } else {
436 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
437 |         }
438 |       })
439 |     },
440 |     getOneProduct (id) {
441 |       const vm = this
442 |       vm.isLoading = true
443 |       vm.status.loadingItem = id
444 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/product/${id}`
445 |       vm.$http.get(api).then((res) => {
446 |         if (res.data.success) {
447 |           vm.product = res.data.product
448 |           vm.product.num = 1
449 |           $('#productModal').modal('show')
450 |           vm.isLoading = false
451 |         } else {
452 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
453 |         }
454 |         vm.status.loadingItem = ''
455 |       })
456 |     },
457 |     addCart (id, num = 1) {
458 |       const vm = this
459 |       const rel = vm.cart.carts.find((item) => item.product_id === id)
460 |       let obj
461 |       if (rel) {
462 |         obj = { product_id: rel.product_id, qty: num + rel.qty }
463 |         vm.isLoading = true
464 |         const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
465 |         vm.$http
466 |           .post(api, {
467 |             data: obj
468 |           })
469 |           .then((res) => {
470 |             vm.isLoading = false
471 |             if (res.data.success) {
472 |               vm.delCart(rel.id, true)
473 |             } else {
474 |               vm.$bus.$emit('message:push', res.data.message, 'danger')
475 |             }
476 |           })
477 |       } else {
478 |         obj = { product_id: id, qty: num }
479 |         vm.isLoading = true
480 |         const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
481 |         vm.$http
482 |           .post(api, {
483 |             data: obj
484 |           })
485 |           .then((res) => {
486 |             vm.isLoading = false
487 |             if (res.data.success) {
488 |               vm.getCart()
489 |               vm.$bus.$emit('message:push', res.data.message, 'dark')
490 |             } else {
491 |               vm.$bus.$emit('message:push', res.data.message, 'danger')
492 |             }
493 |           })
494 |       }
495 |     },
496 |     getCart () {
497 |       const vm = this
498 |       vm.isLoading = true
499 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
500 |       vm.$http.get(api).then((res) => {
501 |         if (res.data.success) {
502 |           vm.cart = res.data.data
503 |         } else {
504 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
505 |         }
506 |         $('#productModal').modal('hide')
507 |         vm.isLoading = false
508 |       })
509 |     },
510 |     delCart (id, rep = false) {
511 |       const vm = this
512 |       vm.isLoading = true
513 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart/${id}`
514 |       vm.$http.delete(api).then((res) => {
515 |         if (res.data.success) {
516 |           if (rep === false) {
517 |             vm.$bus.$emit('message:push', res.data.message, 'dark')
518 |           } else {
519 |             vm.$bus.$emit('message:push', '購物車清單已更新', 'dark')
520 |           }
521 |         } else {
522 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
523 |         }
524 |         vm.isLoading = false
525 |         vm.getCart()
526 |       })
527 |     },
528 |     addCoupon () {
529 |       const vm = this
530 |       vm.isLoading = true
531 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/coupon`
532 |       if (vm.couponCode === '') {
533 |         vm.couponCode = 'false'
534 |       }
535 |       vm.$http.post(api, { data: { code: vm.couponCode } }).then((res) => {
536 |         if (res.data.success) {
537 |           vm.cart.final_total = res.data.final_total
538 |         } else {
539 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
540 |         }
541 |         vm.getCart()
542 |         vm.isLoading = false
543 |         vm.couponCode = ''
544 |       })
545 |     },
546 |     addOrder () {
547 |       const vm = this
548 |       vm.isLoading = true
549 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/order`
550 |       vm.$refs.form.validate().then((success) => {
551 |         if (success) {
552 |           vm.$http.post(api, { data: vm.form }).then((res) => {
553 |             if (res.data.success) {
554 |               $('#modal').modal('hide')
555 |               vm.$router.push(`/test/test_checkout/${res.data.orderId}`)
556 |               vm.$bus.$emit('message:push', res.data.message, 'dark')
557 |             } else {
558 |               vm.$bus.$emit('message:push', res.data.message, 'danger')
559 |             }
560 |           })
561 |         } else {
562 |           vm.$bus.$emit('message:push', '欄位不完整', 'danger')
563 |         }
564 |         vm.getCart()
565 |         vm.isLoading = false
566 |       })
567 |     },
568 |     goCart () {
569 |       $('html,body').animate(
570 |         { scrollTop: $('#cart-list-lg').offset().top },
571 |         800
572 |       )
573 |     }
574 |   },
575 |   created () {
576 |     this.getProducts()
577 |     this.getCart()
578 |   },
579 |   components: {
580 |     Cards
581 |   }
582 | }
583 | </script>
584 | 


--------------------------------------------------------------------------------
/src/views/frontend/Cart.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container">
  3 |     <loading :active.sync="isLoading">
  4 |       <h4>載入中 請稍候...</h4>
  5 |     </loading>
  6 |     <div class="lg row">
  7 |       <div class="col-lg-7 mb-3" :class="{ 'col-lg-8': cart.total > 0 }">
  8 |         <h4 class="my-4 text-dark">
  9 |           <i class="fa fa-shopping-cart" aria-hidden="true"></i>
 10 |           購物車清單
 11 |         </h4>
 12 |         <div v-if="cart.total > 0">
 13 |           <table class="table table-striped table-bordered text-dark">
 14 |             <thead class="thead">
 15 |               <th>操作</th>
 16 |               <th>商品連結</th>
 17 |               <th>數量</th>
 18 |               <th>單價</th>
 19 |             </thead>
 20 |             <tbody>
 21 |               <tr v-for="item in cart.carts" :key="item.id">
 22 |                 <td class="align-middle">
 23 |                   <button
 24 |                     type="button"
 25 |                     class="btn btn-outline-danger btn-sm"
 26 |                     @click="delCart(item.id)"
 27 |                   >
 28 |                     <i class="fa fa-trash" aria-hidden="true"></i>
 29 |                   </button>
 30 |                 </td>
 31 |                 <td class="align-middle">
 32 |                   <u>
 33 |                     <router-link
 34 |                       class="text-muted"
 35 |                       :to="`/product/${item.product.id}`"
 36 |                     >
 37 |                       {{ item.product.title }}
 38 |                     </router-link>
 39 |                   </u>
 40 |                   <div class="text-muted" v-if="finalTotal !== total">
 41 |                     已套用優惠券
 42 |                   </div>
 43 |                 </td>
 44 |                 <td class="align-middle">
 45 |                   <div
 46 |                     class="btn-group"
 47 |                     role="group"
 48 |                     aria-label="Basic example"
 49 |                   >
 50 |                     <button
 51 |                       type="button"
 52 |                       class="btn btn-outline-secondary"
 53 |                       @click.prevent="lessQty(item.id)"
 54 |                     >
 55 |                       ﹣
 56 |                     </button>
 57 |                     <button class="btn btn-outline-secondary" disabled>
 58 |                       {{ item.qty }}
 59 |                     </button>
 60 |                     <button
 61 |                       @click.prevent="addQty(item.id)"
 62 |                       type="button"
 63 |                       class="btn btn-outline-secondary"
 64 |                     >
 65 |                       ﹢
 66 |                     </button>
 67 |                   </div>
 68 |                 </td>
 69 |                 <td class="align-middle text-right">
 70 |                   <del class="text-muted" v-if="finalTotal !== total">
 71 |                     {{ item.product.price | numFormat | dollarSign }}
 72 |                     /
 73 |                     {{ item.product.unit }}
 74 |                   </del>
 75 |                   <template v-else>
 76 |                     {{ item.product.price | numFormat | dollarSign }}
 77 |                     /
 78 |                     {{ item.product.unit }}
 79 |                   </template>
 80 |                   <div class="text-dark" v-if="finalTotal !== total">
 81 |                     折扣後
 82 |                     {{
 83 |                       ((item.product.price * cart.carts[0].coupon.percent) /
 84 |                         100)
 85 |                         | numFormat
 86 |                         | dollarSign
 87 |                     }}
 88 |                   </div>
 89 |                 </td>
 90 |               </tr>
 91 |             </tbody>
 92 |           </table>
 93 |           <div class="input-group input-group-sm w-50">
 94 |             <input
 95 |               type="text"
 96 |               class="form-control"
 97 |               :placeholder="hint"
 98 |               v-model="couponCode"
 99 |             />
100 |             <div class="input-group-append">
101 |               <button
102 |                 class="btn btn-secondary font-weight-bold"
103 |                 type="button"
104 |                 @click="addCoupon"
105 |               >
106 |                 套用優惠碼
107 |               </button>
108 |             </div>
109 |           </div>
110 |         </div>
111 |         <div v-if="cart.total === 0">
112 |           <p class="lead mt-5">
113 |             您的購物車沒有任何商品，
114 |             <router-link to="/products/all" class="text-muted">
115 |               回商品列表
116 |             </router-link>
117 |             選購。
118 |           </p>
119 |         </div>
120 |       </div>
121 |       <div
122 |         class="col-lg-4 col-md-6 mt-md-5 mt-lg-0 mx-auto"
123 |         v-if="cart.total > 0"
124 |       >
125 |         <h4 class="my-4">
126 |           <i class="fa fa-pencil" aria-hidden="true"></i>
127 |           訂單摘要
128 |         </h4>
129 |         <div class="border p-3">
130 |           <h6>
131 |             <div class="float-left">小計：</div>
132 |             <div class="float-right">NT$ {{ total }}</div>
133 |           </h6>
134 |           <h6 class="py-4">
135 |             <div class="float-left">運費：</div>
136 |             <del class="float-right text-muted">NT$ 200</del>
137 |             <span class="float-right mr-2 text-danger">免運活動</span>
138 |           </h6>
139 |           <h4
140 |             class="mt-5 border-top py-3"
141 |             :class="{ 'h5 text-secondary': finalTotal !== total }"
142 |           >
143 |             <div class="float-left">總計</div>
144 |             <div class="float-right">{{ total | numFormat | dollarSign }}</div>
145 |           </h4>
146 |           <h4 v-if="finalTotal !== total" class="py-3 text-dark">
147 |             <div class="float-left">最終折扣價</div>
148 |             <div class="float-right">
149 |               {{ finalTotal | numFormat | dollarSign }}
150 |             </div>
151 |           </h4>
152 |           <button
153 |             class="btn w-100 mt-2 btn-outline-danger font-weight-bold"
154 |             @click="goCheckout"
155 |           >
156 |             確認結帳
157 |           </button>
158 |         </div>
159 |       </div>
160 |       <div class="col-lg-5 col-md-8 mx-auto" v-if="cart.total === 0">
161 |         <h4 class="my-4 lg">
162 |           <i class="fa fa-star" aria-hidden="true"></i>
163 |           為您推薦
164 |         </h4>
165 |         <ul class="list-unstyled my-4">
166 |           <li
167 |             @click="$router.push(`/product/${item.id}`)"
168 |             class="media p-2 border mb-1"
169 |             v-for="item in randoms"
170 |             :key="item.id"
171 |           >
172 |             <img
173 |               :alt="item.title"
174 |               :src="item.imageUrl"
175 |               class="align-self-center media-img"
176 |             />
177 |             <div class="media-body ml-3 text-left align-self-center">
178 |               <h6 class="mt-2 mb-1">{{ item.title }}</h6>
179 |               {{ item.content }}
180 |               <div class="border-top pt-2 mt-2">
181 |                 <template v-if="item.price > 0">
182 |                   <del class="float-left text-muted">
183 |                     <small>原價 {{ item.origin_price }} 元</small>
184 |                   </del>
185 |                   <h4 class="ml-2 mb-0 float-right">
186 |                     <b class="text-dark p-1">{{ item.price }}元</b>
187 |                   </h4>
188 |                 </template>
189 |                 <template v-else>
190 |                   <small class="float-left">售價</small>
191 |                   <h4 class="ml-2 mb-0 float-right">
192 |                     <b class="text-dark p-1">{{ item.origin_price }}元</b>
193 |                   </h4>
194 |                 </template>
195 |               </div>
196 |             </div>
197 |           </li>
198 |         </ul>
199 |       </div>
200 |     </div>
201 |     <div class="sm" v-if="cart.total > 0">
202 |       <h5 class="my-4">
203 |         <i class="fa fa-shopping-cart" aria-hidden="true"></i>
204 |         購物車清單
205 |       </h5>
206 |       <table class="table table-striped table-bordered text-dark mt-4">
207 |         <thead class="thead">
208 |           <th width="80">操作</th>
209 |           <th colspan="2">購買清單</th>
210 |         </thead>
211 |         <tbody v-for="item in cart.carts" :key="item.id">
212 |           <tr>
213 |             <td class="align-middle">
214 |               <button
215 |                 type="button"
216 |                 class="btn btn-outline-danger btn-sm"
217 |                 @click="delCart(item.id)"
218 |               >
219 |                 <i class="fa fa-trash" aria-hidden="true"></i>
220 |               </button>
221 |             </td>
222 |             <td class="text-center">
223 |               <div class="float-left">
224 |                 {{ item.product.title }} × {{ item.qty }}
225 |               </div>
226 |               <div class="float-right">
227 |                 <del class="text-muted" v-if="cart.final_total !== cart.total">
228 |                   {{ item.total | numFormat | dollarSign }}
229 |                 </del>
230 |                 <template v-else>
231 |                   {{ item.total | numFormat | dollarSign }}
232 |                 </template>
233 |                 <div class="text-dark" v-if="cart.final_total !== cart.total">
234 |                   折扣後
235 |                   {{ item.final_total | numFormat | dollarSign }}
236 |                 </div>
237 |               </div>
238 |               <br />
239 |               <div class="text-muted" v-if="cart.final_total !== cart.total">
240 |                 已套用優惠券
241 |               </div>
242 |             </td>
243 |           </tr>
244 |         </tbody>
245 |         <tfoot>
246 |           <tr>
247 |             <td class="text-right">總計</td>
248 |             <td colspan="2" class="text-right">
249 |               {{ cart.total | numFormat | dollarSign }}
250 |             </td>
251 |           </tr>
252 |           <tr v-if="cart.final_total !== cart.total">
253 |             <td class="pl-0 text-right">應付金額</td>
254 |             <td class="text-right">
255 |               {{ cart.final_total | numFormat | dollarSign }}
256 |             </td>
257 |           </tr>
258 |         </tfoot>
259 |       </table>
260 | 
261 |       <h5>
262 |         <i aria-hidden="true" class="fa fa-ticket"></i>
263 |         優惠券
264 |       </h5>
265 |       <div class="input-group input-group-sm p-0">
266 |         <input
267 |           type="text"
268 |           class="form-control text-center"
269 |           :placeholder="hint"
270 |           v-model="couponCode"
271 |         /><button
272 |           class="btn border border-dark rounded-0 btn-sm font-weight-bold"
273 |           type="button"
274 |           @click="addCoupon"
275 |         >
276 |           套用優惠碼
277 |         </button>
278 |       </div>
279 |       <button
280 |           class="btn btn-dark w-100 btn-sm my-4 font-weight-bold"
281 |           @click="goCheckout"
282 |         >
283 |           立即結帳
284 |         </button>
285 |       <br />
286 |     </div>
287 |     <div class="sm" v-if="cart.total === 0">
288 |       <h5 class="my-4">
289 |         <i class="fa fa-shopping-cart" aria-hidden="true"></i>
290 |         購物車清單
291 |       </h5>
292 |       <p class="lead">
293 |         您的購物車目前沒有任何商品，
294 |         <br />請
295 |         <router-link to="/products/all" class="text-muted mr-1">
296 |           回商品列表
297 |         </router-link>
298 |         選購。
299 |       </p>
300 |       <hr />
301 |       <h5 class="my-4 sm">
302 |         <i class="fa fa-star" aria-hidden="true"></i>
303 |         為您推薦
304 |       </h5>
305 |       <ul class="list-unstyled my-4">
306 |         <li
307 |           @click="$router.push(`/product/${item.id}`)"
308 |           class="media p-2 border mb-1"
309 |           v-for="item in randoms"
310 |           :key="item.id"
311 |         >
312 |           <img
313 |             :alt="item.title"
314 |             :src="item.imageUrl"
315 |             class="align-self-center media-img"
316 |           />
317 |           <div class="media-body ml-1 text-left align-self-center">
318 |             <h6 class="mt-2 mb-1">{{ item.title }}</h6>
319 |             {{ item.content }}
320 |             <div class="border-top pt-2 mt-2">
321 |               <template v-if="item.price > 0">
322 |                 <del class="float-left text-muted">
323 |                   <small>原價 {{ item.origin_price }} 元</small>
324 |                 </del>
325 |                 <h4 class="ml-2 mb-0 float-right">
326 |                   <b class="text-dark p-1">{{ item.price }}元</b>
327 |                 </h4>
328 |               </template>
329 |               <template v-else>
330 |                 <small class="float-left">售價</small>
331 |                 <h4 class="ml-2 mb-0 float-right">
332 |                   <b class="text-dark p-1">{{ item.origin_price }}元</b>
333 |                 </h4>
334 |               </template>
335 |             </div>
336 |           </div>
337 |         </li>
338 |       </ul>
339 |       <div class="row mini text-dark">
340 |         <div class="col-md p-2" v-for="item in randoms" :key="item.id">
341 |           <div class="card border-0 shadow-sm">
342 |             <div
343 |               style="
344 |               height: 200px;
345 |               background-size: cover;
346 |               background-position: center;
347 |             "
348 |               :style="{
349 |                 backgroundImage: `url(${item.imageUrl || item.image})`,
350 |               }"
351 |             ></div>
352 |             <div class="card-body">
353 |               <h5 class="card-title">
354 |                 {{ item.title }}
355 |                 <br />
356 |                 <small>
357 |                   <span class="badge badge-dark p-1">{{ item.category }}</span>
358 |                 </small>
359 |               </h5>
360 |               <p class="card-text">{{ item.content }}</p>
361 |               <div>
362 |                 <div class="h5" v-if="!item.price">
363 |                   {{ item.origin_price }} 元
364 |                 </div>
365 |                 <del class="text-muted" v-if="item.price">
366 |                   原價 {{ item.origin_price }} 元
367 |                 </del>
368 | 
369 |                 <div class="h5 text-dark" v-if="item.price">
370 |                   現在只要 {{ item.price }} 元
371 |                 </div>
372 |               </div>
373 |             </div>
374 |             <div class="card-footer d-flex">
375 |               <button
376 |                 type="button"
377 |                 class="btn border border-dark btn-sm"
378 |                 @click="$router.push(`/product/${item.id}`)"
379 |               >
380 |                 查看更多
381 |               </button>
382 |               <button
383 |                 type="button"
384 |                 class="btn btn-dark btn-sm ml-auto"
385 |                 @click="addCart(item.id)"
386 |               >
387 |                 加到購物車
388 |               </button>
389 |             </div>
390 |           </div>
391 |         </div>
392 |       </div>
393 |     </div>
394 | 
395 |     <div
396 |       class="modal fade"
397 |       id="modal"
398 |       tabindex="-1"
399 |       role="dialog"
400 |       aria-labelledby="exampleModalLabel"
401 |       aria-hidden="true"
402 |     >
403 |       <div class="modal-dialog" role="document">
404 |         <div class="modal-content border-0">
405 |           <div class="modal-header bg-dark text-white">
406 |             <h5 class="modal-title" id="exampleModalLabel">
407 |               <span>填寫收件資料</span>
408 |             </h5>
409 |             <button
410 |               type="button"
411 |               class="close"
412 |               data-dismiss="modal"
413 |               aria-label="Close"
414 |             >
415 |               <span class="text-light" aria-hidden="true">&times;</span>
416 |             </button>
417 |           </div>
418 |           <ValidationObserver ref="form" v-slot="{ invalid }">
419 |             <form class="text-dark text-left" @submit.prevent="addOrder">
420 |               <div class="modal-body">
421 |                 <div class="row justify-content-center mx-3">
422 |                   <span class="text-danger my-2">* 為必填項目</span>
423 |                   <div class="col-md-12 my-2">
424 |                     <div class="form-group">
425 |                       <ValidationProvider
426 |                         v-slot="{ failed, errors }"
427 |                         name="email"
428 |                         rules="required|email"
429 |                       >
430 |                         <label for="useremail">
431 |                           電子信箱
432 |                           <i class="text-danger">*</i>
433 |                         </label>
434 |                         <input
435 |                           type="text"
436 |                           name="email"
437 |                           class="form-control form-control-sm"
438 |                           id="useremail"
439 |                           v-model="form.user.email"
440 |                           :class="{ 'is-invalid': failed }"
441 |                           placeholder="請輸入收件人電子郵件"
442 |                         />
443 |                         <span v-if="failed" class="text-danger">
444 |                           {{ errors[0] }}
445 |                         </span>
446 |                       </ValidationProvider>
447 |                     </div>
448 |                     <div class="form-row">
449 |                       <div class="form-group col-md-5">
450 |                         <ValidationProvider
451 |                           v-slot="{ failed, errors }"
452 |                           name="name"
453 |                           rules="required"
454 |                         >
455 |                           <label for="username">
456 |                             姓名
457 |                             <i class="text-danger">*</i>
458 |                           </label>
459 |                           <input
460 |                             type="text"
461 |                             name="name"
462 |                             id="username"
463 |                             v-model="form.user.name"
464 |                             class="form-control form-control-sm"
465 |                             :class="{ 'is-invalid': failed }"
466 |                             placeholder="請輸入收件人姓名"
467 |                           />
468 |                           <span v-if="failed" class="text-danger">
469 |                             {{ errors[0] }}
470 |                           </span>
471 |                         </ValidationProvider>
472 |                       </div>
473 |                       <div class="form-group col-md-7">
474 |                         <ValidationProvider
475 |                           v-slot="{ failed, errors }"
476 |                           name="mobile"
477 |                           rules="required|numeric"
478 |                         >
479 |                           <label for="usertel">
480 |                             電話號碼
481 |                             <i class="text-danger">*</i>
482 |                           </label>
483 |                           <input
484 |                             type="text"
485 |                             name="mobile"
486 |                             v-model="form.user.tel"
487 |                             id="usertel"
488 |                             class="form-control form-control-sm"
489 |                             :class="{ 'is-invalid': failed }"
490 |                             placeholder="請輸入收件人聯絡電話"
491 |                           />
492 |                           <span v-if="failed" class="text-danger">
493 |                             {{ errors[0] }}
494 |                           </span>
495 |                         </ValidationProvider>
496 |                       </div>
497 |                     </div>
498 |                     <div class="form-group">
499 |                       <ValidationProvider
500 |                         v-slot="{ failed, errors }"
501 |                         name="address"
502 |                         rules="required|min:3"
503 |                       >
504 |                         <label for="useraddress">
505 |                           收件地址
506 |                           <i class="text-danger">*</i>
507 |                         </label>
508 |                         <input
509 |                           type="text"
510 |                           name="address"
511 |                           v-model="form.user.address"
512 |                           id="useraddress"
513 |                           class="form-control form-control-sm"
514 |                           :class="{ 'is-invalid': failed }"
515 |                           placeholder="請輸入收件人地址"
516 |                         />
517 |                         <span v-if="failed" class="text-danger">
518 |                           {{ errors[0] }}
519 |                         </span>
520 |                       </ValidationProvider>
521 |                     </div>
522 | 
523 |                     <div class="form-group">
524 |                       <label for="message">備註</label>
525 |                       <textarea
526 |                         name="message"
527 |                         id="message"
528 |                         cols="30"
529 |                         rows="4"
530 |                         v-model="form.message"
531 |                         placeholder="商品備註"
532 |                         class="form-control form-control-sm"
533 |                       ></textarea>
534 |                     </div>
535 |                     <div class="text-right"></div>
536 |                   </div>
537 |                 </div>
538 |               </div>
539 |               <div class="modal-footer">
540 |                 <button
541 |                   type="button"
542 |                   class="btn btn-outline-secondary"
543 |                   data-dismiss="modal"
544 |                 >
545 |                   取消
546 |                 </button>
547 |                 <button class="btn btn-dark" :disabled="invalid">
548 |                   資料送出
549 |                 </button>
550 |               </div>
551 |             </form>
552 |           </ValidationObserver>
553 |         </div>
554 |       </div>
555 |     </div>
556 |   </div>
557 | </template>
558 | <script>
559 | import $ from 'jquery'
560 | export default {
561 |   data () {
562 |     return {
563 |       isLoading: false,
564 |       cart: [],
565 |       couponCode: '',
566 |       hint: '請輸入優惠碼',
567 |       randoms: [],
568 |       tempCart: [],
569 |       orderId: '',
570 |       form: {
571 |         user: {
572 |           address: '',
573 |           email: '',
574 |           name: '',
575 |           tel: ''
576 |         },
577 |         message: ''
578 |       }
579 |     }
580 |   },
581 |   methods: {
582 |     getCart (openModal = false) {
583 |       const vm = this
584 |       vm.isLoading = true
585 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
586 |       vm.$http.get(api).then((res) => {
587 |         if (res.data.success) {
588 |           vm.cart = res.data.data
589 |           if (vm.cart.total === 0) {
590 |             vm.getProducts()
591 |           } else if (
592 |             vm.cart.final_total === vm.cart.total &&
593 |             vm.cart.total > 0
594 |           ) {
595 |             vm.hint = '請輸入優惠碼'
596 |           } else if (
597 |             vm.cart.final_total !== vm.cart.total &&
598 |             vm.cart.total > 0
599 |           ) {
600 |             vm.hint = '當前折扣碼：' + vm.cart.carts[0].coupon.code
601 |           }
602 |         } else {
603 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
604 |         }
605 |         vm.isLoading = false
606 |         if (openModal === true) {
607 |           $('#modal').modal('show')
608 |         }
609 |       })
610 |     },
611 |     delCart (id, rep = false) {
612 |       const vm = this
613 |       vm.isLoading = true
614 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart/${id}`
615 |       vm.$http.delete(api).then((res) => {
616 |         if (res.data.success) {
617 |           if (rep === false) {
618 |             vm.$bus.$emit('message:push', res.data.message, 'dark')
619 |           }
620 |         } else {
621 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
622 |         }
623 |         vm.isLoading = false
624 |         vm.getCart()
625 |       })
626 |     },
627 |     addCoupon (changeLoading = true) {
628 |       const vm = this
629 |       if (vm.couponCode === '') {
630 |         vm.$bus.$emit('message:push', '請輸入優惠碼', 'danger')
631 |         return
632 |       }
633 |       if (changeLoading === false) {
634 |         vm.isLoading = true
635 |         const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/coupon`
636 |         vm.$http.post(api, { data: { code: vm.couponCode } }).then((res) => {
637 |           if (res.data.success) {
638 |             vm.cart.final_total = res.data.final_total
639 |             vm.$bus.$emit('message:push', '已套用優惠券', 'dark')
640 |             if (changeLoading === true) {
641 |               vm.isLoading = false
642 |             }
643 |           } else {
644 |             vm.$bus.$emit('message:push', res.data.message, 'danger')
645 |           }
646 |           vm.getCart(true)
647 |         })
648 |       } else {
649 |         vm.isLoading = true
650 |         const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/coupon`
651 |         vm.$http.post(api, { data: { code: vm.couponCode } }).then((res) => {
652 |           if (res.data.success) {
653 |             vm.cart.final_total = res.data.final_total
654 |             vm.$bus.$emit('message:push', '已套用優惠券', 'dark')
655 |             if (changeLoading === true) {
656 |               vm.isLoading = false
657 |             }
658 |           } else {
659 |             vm.$bus.$emit('message:push', res.data.message, 'danger')
660 |           }
661 |           vm.getCart()
662 |         })
663 |       }
664 |     },
665 |     addQty (id) {
666 |       const vm = this
667 |       vm.cart.carts.forEach((item) => {
668 |         if (item.id === id) {
669 |           item.qty = item.qty + 1
670 |         }
671 |       })
672 |     },
673 |     lessQty (id) {
674 |       const vm = this
675 |       vm.cart.carts.forEach(function (item) {
676 |         if (item.id === id) {
677 |           if (item.qty === 1) {
678 |             vm.delCart(id)
679 |           } else {
680 |             item.qty = item.qty - 1
681 |           }
682 |         }
683 |       })
684 |     },
685 |     goCheckout () {
686 |       const vm = this
687 |       if (JSON.stringify(vm.cart) === JSON.stringify(vm.tempCart)) {
688 |         $('#modal').modal('show')
689 |       } else {
690 |         vm.isLoading = true
691 |         vm.tempCart.carts = vm.cart.carts
692 |         const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
693 |         vm.$http.get(api).then((res) => {
694 |           if (res.data.success) {
695 |             vm.cart = res.data.data
696 |             let times = vm.cart.carts.length
697 |             vm.cart.carts.forEach((item) => {
698 |               times--
699 |               let code = ''
700 |               if (vm.cart.carts[0].coupon) {
701 |                 code = vm.cart.carts[0].coupon.code
702 |               }
703 |               const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart/${item.id}`
704 |               vm.$http.delete(api).then()
705 |               if (times === 0) {
706 |                 const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
707 |                 let times = vm.tempCart.carts.length
708 |                 vm.tempCart.carts.forEach((item) => {
709 |                   const obj = { product_id: item.product_id, qty: item.qty }
710 |                   vm.$http.post(api, { data: obj }).then((res) => {
711 |                     if (res.data.success) {
712 |                       times--
713 |                       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
714 |                       vm.$http.get(api).then((res) => {
715 |                         if (res.data.success) {
716 |                           vm.cart = res.data.data
717 |                           vm.tempCart = vm.cart
718 |                           if (code !== '') {
719 |                             vm.couponCode = code
720 |                             if (times === 0) {
721 |                               vm.addCoupon(false)
722 |                               vm.isLoading = false
723 |                             }
724 |                           } else {
725 |                             vm.getCart(true)
726 |                           }
727 |                         }
728 |                       })
729 |                     }
730 |                   })
731 |                 })
732 |                 vm.$bus.$emit('message:push', '購物車清單已更新', 'dark')
733 |               }
734 |             })
735 |           } else {
736 |             vm.$bus.$emit('message:push', res.data.message, 'danger')
737 |           }
738 |         })
739 |       }
740 |     },
741 |     getProducts () {
742 |       const vm = this
743 |       vm.isLoading = true
744 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/products/all`
745 |       vm.$http.get(api).then((res) => {
746 |         vm.isLoading = false
747 |         if (res.data.success) {
748 |           vm.randoms = []
749 |           const products = res.data.products.filter(
750 |             (item) => item.is_enabled === 1
751 |           )
752 |           const arr = products
753 |           const ranNum = 4
754 |           for (let i = 0; i < ranNum; i++) {
755 |             const ran = Math.floor(Math.random() * arr.length)
756 |             vm.randoms.push(arr.splice(ran, 1)[0])
757 |           }
758 |         } else {
759 |           vm.$bus.$emit('message:push', res.data.message, 'danger')
760 |         }
761 |       })
762 |     },
763 |     addOrder () {
764 |       const vm = this
765 |       vm.isLoading = true
766 |       const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/order`
767 |       vm.$refs.form.validate().then((success) => {
768 |         if (success) {
769 |           vm.$http.post(api, { data: vm.form }).then((res) => {
770 |             if (res.data.success) {
771 |               $('#modal').modal('hide')
772 |               vm.$router.push(`/checkout/${res.data.orderId}`)
773 |               vm.$bus.$emit('message:push', res.data.message, 'dark')
774 |             } else {
775 |               vm.$bus.$emit('message:push', res.data.message, 'danger')
776 |             }
777 |           })
778 |         } else {
779 |           vm.$bus.$emit('message:push', '欄位不完整', 'danger')
780 |         }
781 |         vm.isLoading = false
782 |       })
783 |     }
784 |   },
785 |   computed: {
786 |     total () {
787 |       const vm = this
788 |       let total = 0
789 |       vm.cart.carts.forEach((item) => {
790 |         total += item.qty * item.product.price
791 |       })
792 |       return total
793 |     },
794 |     finalTotal () {
795 |       const vm = this
796 |       let finalTotal = 0
797 |       if (vm.cart.carts[0].coupon) {
798 |         vm.cart.carts.forEach((item) => {
799 |           finalTotal +=
800 |             (item.qty * item.product.price * vm.cart.carts[0].coupon.percent) /
801 |             100
802 |         })
803 |       } else {
804 |         vm.cart.carts.forEach((item) => {
805 |           finalTotal += item.qty * item.product.price
806 |         })
807 |       }
808 |       return finalTotal
809 |     }
810 |   },
811 |   created () {
812 |     const vm = this
813 |     vm.isLoading = true
814 |     const api = `${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_MYPATH}/cart`
815 |     vm.$http.get(api).then((res) => {
816 |       if (res.data.success) {
817 |         vm.tempCart = res.data.data
818 |       }
819 |     })
820 |     vm.getCart()
821 |   }
822 | }
823 | </script>
824 | 
825 | <style scoped>
826 | .media {
827 |   border-radius: 5px;
828 | }
829 | 
830 | .media:hover {
831 |   background-color: #f2fff8;
832 |   cursor: pointer;
833 | }
834 | 
835 | .media-img {
836 |   width: 140px;
837 |   height: 100px;
838 |   object-fit: cover;
839 | }
840 | 
841 | .mini {
842 |   display: none;
843 | }
844 | 
845 | @media screen and (max-width: 375px) {
846 |   .list-unstyled {
847 |     display: none;
848 |   }
849 |   .mini {
850 |     display: block;
851 |   }
852 | }
853 | </style>
854 | 


--------------------------------------------------------------------------------