├── .browserslistrc
├── public
    ├── favicon.ico
    ├── background.jpeg
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── store
    │   └── index.js
    ├── main.js
    ├── components
    │   ├── LayoutSider.vue
    │   ├── EditableCell.vue
    │   ├── EditableCellImg.vue
    │   ├── EditableCellNumber.vue
    │   ├── CommentItem.vue
    │   ├── EditableCellSelect.vue
    │   ├── ProductDetailCarousel.vue
    │   ├── CarouselTwo.vue
    │   ├── CommodityItem.vue
    │   ├── RecommendedProducts.vue
    │   ├── CartItem.vue
    │   ├── OrderItem.vue
    │   ├── AdminProductItem.vue
    │   ├── AdminOrderItem.vue
    │   └── LayoutHeader.vue
    ├── user
    │   └── index.js
    ├── views
    │   ├── MainIndex.vue
    │   ├── ProduceDetailIntroduction.vue
    │   ├── MainView.vue
    │   ├── AdminIndex.vue
    │   ├── ForgetPassword.vue
    │   ├── ProduceDetailComment.vue
    │   ├── AdminProductType.vue
    │   ├── Cart.vue
    │   ├── ConfirmOrder.vue
    │   ├── Login.vue
    │   ├── Personal.vue
    │   ├── Search.vue
    │   ├── ProductType.vue
    │   ├── ProductDetail.vue
    │   ├── AdminCarousel.vue
    │   ├── Registration.vue
    │   ├── AdminOrder.vue
    │   ├── AdminProductNew.vue
    │   ├── Order.vue
    │   └── AdminProduct.vue
    ├── App.vue
    ├── api
    │   └── index.js
    ├── http
    │   └── index.js
    └── router
    │   └── index.js
├── babel.config.js
├── .gitignore
├── .editorconfig
├── vue.config.js
├── package.json
├── README.md
└── LICENSE


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/sports-mall-client/master/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/sports-mall-client/master/src/assets/logo.png


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


--------------------------------------------------------------------------------
/public/background.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/sports-mall-client/master/public/background.jpeg


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 |     now_path: ''
 9 |   },
10 |   mutations: {},
11 |   actions: {},
12 |   modules: {}
13 | })
14 | 


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


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*.vue]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.js]
12 | charset = utf-8
13 | indent_style = space
14 | indent_size = 2
15 | end_of_line = lf
16 | insert_final_newline = true
17 | trim_trailing_whitespace = true
18 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | // vue.config.js
 2 | module.exports = {
 3 |     css: {
 4 |         loaderOptions: {
 5 |             less: {
 6 |                 modifyVars: {
 7 |                     'primary-color': '#1890ff',
 8 |                     'link-color': '#1890ff',
 9 |                     'border-radius-base': '2px',
10 |                 },
11 |                 javascriptEnabled: true
12 |             }
13 |         }
14 |     }
15 | };
16 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import User from "./user";
 6 | import Antd from 'ant-design-vue'
 7 | import 'ant-design-vue/dist/antd.less'
 8 | import "./http"
 9 | 
10 | Vue.config.productionTip = false;
11 | Vue.use(Antd);
12 | Vue.use(User);
13 | 
14 | new Vue({
15 |   router,
16 |   store,
17 |   render: h => h(App)
18 | }).$mount('#app');
19 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>体育用品商城</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>您必须开启 JavaScript 才可以正常浏览本站</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/components/LayoutSider.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a-menu mode="vertical">
 3 |     <a-menu-item v-for="item in data" :key="item.id" @click="handleTypeBtnClick(item.id)">
 4 |       {{item.name}}
 5 |     </a-menu-item>
 6 |   </a-menu>
 7 | </template>
 8 | 
 9 | <script>
10 |   export default {
11 |     props: {
12 |       data: Array
13 |     },
14 |     name: "LayoutSider",
15 |     methods: {
16 |       handleTypeBtnClick(id) {
17 |         this.$router.push("/product_type/" + id).catch(err => {
18 |         });
19 |       }
20 |     }
21 |   }
22 | </script>
23 | 
24 | <style scoped>
25 | 
26 | </style>
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sports-mall-client",
 3 |   "version": "1.0.1-RELEASE",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "@itning/axios-helper": "^1.1.0",
11 |     "ant-design-vue": "^1.6.4",
12 |     "core-js": "^3.6.5",
13 |     "js-base64": "^2.5.2",
14 |     "moment": "^2.27.0",
15 |     "vue": "^2.6.11",
16 |     "vue-router": "^3.3.4",
17 |     "vuex": "^3.4.0"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "^4.4.4",
21 |     "@vue/cli-plugin-router": "^4.4.4",
22 |     "@vue/cli-plugin-vuex": "^4.4.4",
23 |     "@vue/cli-service": "^4.4.4",
24 |     "less": "^3.11.3",
25 |     "less-loader": "^5.0.0",
26 |     "vue-template-compiler": "^2.6.11"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/user/index.js:
--------------------------------------------------------------------------------
 1 | import {Base64} from 'js-base64';
 2 | 
 3 | export const LOCAL_STORAGE_KEY = 'authorization_token';
 4 | let User = {};
 5 | 
 6 | export function analyze(token) {
 7 |   try {
 8 |     return JSON.parse(JSON.parse(
 9 |       Base64.decode(token.split('.')[1])
10 |     ).loginUser);
11 |   } catch (e) {
12 |     return {};
13 |   }
14 | }
15 | 
16 | User.loginUser = function () {
17 |   if (window.localStorage.getItem(LOCAL_STORAGE_KEY) === null) {
18 |     return {};
19 |   }
20 |   try {
21 |     return JSON.parse(JSON.parse(
22 |       Base64.decode(
23 |         window.localStorage.getItem(LOCAL_STORAGE_KEY)
24 |           .split('.')[1]
25 |       )
26 |     ).loginUser);
27 |   } catch (e) {
28 |     window.localStorage.removeItem(LOCAL_STORAGE_KEY);
29 |     return {};
30 |   }
31 | };
32 | 
33 | User.install = function (Vue, options) {
34 |   Vue.prototype.$user = User;
35 | };
36 | export default User;
37 | 


--------------------------------------------------------------------------------
/src/components/EditableCell.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div v-if="editable">
 4 |       <a-input :value="value" @change="handleChange" @pressEnter="check" style="width: 90%"/>
 5 |       <a-icon style="margin-left: 12px" type="check" @click="check"/>
 6 |     </div>
 7 |     <div v-else>
 8 |       {{ value || ' ' }}
 9 |       <a-icon type="edit" @click="edit"/>
10 |     </div>
11 |   </div>
12 | </template>
13 | <script>
14 |   export default {
15 |     props: {
16 |       text: String,
17 |     },
18 |     name: "EditableCell",
19 |     data() {
20 |       return {
21 |         value: this.text,
22 |         editable: false,
23 |       };
24 |     },
25 |     methods: {
26 |       handleChange(e) {
27 |         this.value = e.target.value;
28 |       },
29 |       check() {
30 |         this.editable = false;
31 |         this.$emit('change', this.value);
32 |       },
33 |       edit() {
34 |         this.editable = true;
35 |       },
36 |     },
37 |   };
38 | </script>
39 | 


--------------------------------------------------------------------------------
/src/views/MainIndex.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a-layout>
 3 |     <a-layout-header style="background-color: #f0f2f5">
 4 |       <LayoutHeader/>
 5 |     </a-layout-header>
 6 |     <a-layout-content style="margin: 0 50px">
 7 |       <a-back-top/>
 8 |       <router-view name="subContent"/>
 9 |     </a-layout-content>
10 |     <a-layout-footer style="text-align: center">
11 |       <a-button type="link" @click="handleAdminBtnClick">管理员登录</a-button>
12 |       <div>© 2020-现在 基于Web的体育用品销售系统的设计与实现 哈尔滨信息工程学院 毕业项目</div>
13 |     </a-layout-footer>
14 |   </a-layout>
15 | </template>
16 | 
17 | <script>
18 |   import LayoutHeader from "../components/LayoutHeader";
19 | 
20 |   export default {
21 |     name: "MainIndex",
22 |     components: {LayoutHeader},
23 |     data: () => ({collapsed: false}),
24 |     methods: {
25 |       handleAdminBtnClick() {
26 |         this.$router.push("/admin").catch(error => {
27 |         });
28 |       }
29 |     }
30 |   }
31 | </script>
32 | 
33 | <style scoped>
34 | 
35 | </style>
36 | 


--------------------------------------------------------------------------------
/src/components/EditableCellImg.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div v-if="editable">
 4 |       <a-input :value="value" @change="handleChange" @pressEnter="check" style="width: 90%"/>
 5 |       <a-icon style="margin-left: 12px" type="check" @click="check"/>
 6 |     </div>
 7 |     <div v-else>
 8 |       <img style="max-width: 100%;" :src="text" alt="">
 9 |       <a-icon type="edit" @click="edit"/>
10 |     </div>
11 |   </div>
12 | </template>
13 | <script>
14 |   export default {
15 |     props: {
16 |       text: String,
17 |     },
18 |     name: "EditableCellImg",
19 |     data() {
20 |       return {
21 |         value: this.text,
22 |         editable: false,
23 |       };
24 |     },
25 |     methods: {
26 |       handleChange(e) {
27 |         this.value = e.target.value;
28 |       },
29 |       check() {
30 |         this.editable = false;
31 |         this.$emit('change', this.value);
32 |       },
33 |       edit() {
34 |         this.editable = true;
35 |       },
36 |     },
37 |   };
38 | </script>
39 | 


--------------------------------------------------------------------------------
/src/components/EditableCellNumber.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div v-if="editable">
 4 |       <a-input-number v-model="value" :step="step" @pressEnter="check" @change="handleChange" style="width: 90%"/>
 5 |       <a-icon style="margin-left: 12px" type="check" @click="check"/>
 6 |     </div>
 7 |     <div v-else>
 8 |       {{ value || ' ' }}
 9 |       <a-icon type="edit" @click="edit"/>
10 |     </div>
11 |   </div>
12 | </template>
13 | <script>
14 |   export default {
15 |     props: {
16 |       step: Number,
17 |       text: String,
18 |     },
19 |     name: "EditableCellNumber",
20 |     data() {
21 |       return {
22 |         value: this.text,
23 |         editable: false,
24 |       };
25 |     },
26 |     methods: {
27 |       handleChange(e) {
28 |         this.value = e;
29 |       },
30 |       check() {
31 |         this.editable = false;
32 |         this.$emit('change', this.value);
33 |       },
34 |       edit() {
35 |         this.editable = true;
36 |       },
37 |     },
38 |   };
39 | </script>
40 | 


--------------------------------------------------------------------------------
/src/components/CommentItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="item-comment">
 3 |     <a-row type="flex" justify="space-around" align="middle">
 4 |       <a-col :span="19" style="padding:12px">
 5 |         {{content}}
 6 |       </a-col>
 7 |       <a-col :span="5" class="item-buy">
 8 |         <div>{{time}}</div>
 9 |         <div>买家：{{username}}</div>
10 |       </a-col>
11 |     </a-row>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 |   export default {
17 |     props: {
18 |       username: String,
19 |       content: String,
20 |       time: String
21 |     },
22 |     name: "CommentItem"
23 |   }
24 | </script>
25 | 
26 | <style scoped>
27 |   .item-comment {
28 |     border: 2px solid #1890ff;
29 |     min-height: 100px;
30 |     margin-top: 12px
31 |   }
32 | 
33 |   .item-buy {
34 |     display: flex;
35 |     flex-direction: column;
36 |     justify-content: center;
37 |     color: white;
38 |     background-color: #1890ff;
39 |     min-height: 100px;
40 |     padding: 12px;
41 |     line-height: 25px;
42 |   }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/components/EditableCellSelect.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div v-if="editable">
 4 |       <a-select :defaultValue="value" style="width: 80%" @change="handleChange">
 5 |         <a-select-option v-for="(v,k) in values" :key="k" :value="v.value">{{v.name}}</a-select-option>
 6 |       </a-select>
 7 |       <a-icon style="margin-left: 12px" type="check" @click="check"/>
 8 |     </div>
 9 |     <div v-else>
10 |       {{ s || ' ' }}
11 |       <a-icon type="edit" @click="edit"/>
12 |     </div>
13 |   </div>
14 | </template>
15 | <script>
16 |   export default {
17 |     props: {
18 |       s: String,
19 |       text: String,
20 |       values: Array
21 |     },
22 |     name: "EditableCellSelect",
23 |     data() {
24 |       return {
25 |         value: this.text,
26 |         editable: false,
27 |       };
28 |     },
29 |     methods: {
30 |       handleChange(e) {
31 |         this.value = e;
32 |       },
33 |       check() {
34 |         this.editable = false;
35 |         this.$emit('change', this.value);
36 |       },
37 |       edit() {
38 |         this.editable = true;
39 |       },
40 |     },
41 |   };
42 | </script>
43 | 


--------------------------------------------------------------------------------
/src/components/ProductDetailCarousel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a-carousel arrows dotsClass="slick-dots slick-thumb">
 3 |     <a slot="customPaging" slot-scope="props">
 4 |       <img :src="getImgUrl(props.i)"/>
 5 |     </a>
 6 |     <div v-for="item in imgs">
 7 |       <img :src="item"/>
 8 |     </div>
 9 |   </a-carousel>
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     props: {
15 |       imgs: Array
16 |     },
17 |     name: "ProductDetailCarousel",
18 |     data() {
19 |       return {
20 |       };
21 |     },
22 |     methods: {
23 |       getImgUrl(i) {
24 |         return this.imgs[i];
25 |       },
26 |     },
27 |   }
28 | </script>
29 | 
30 | <style scoped>
31 |   .ant-carousel >>> .slick-dots {
32 |     height: auto;
33 |   }
34 | 
35 |   .ant-carousel >>> .slick-slide img {
36 |     border: 5px solid #fff;
37 |     display: block;
38 |     margin: auto;
39 |     max-width: 80%;
40 |   }
41 | 
42 |   .ant-carousel >>> .slick-thumb {
43 |     bottom: -45px;
44 |   }
45 | 
46 |   .ant-carousel >>> .slick-thumb li {
47 |     width: 60px;
48 |     height: 45px;
49 |   }
50 | 
51 |   .ant-carousel >>> .slick-thumb li img {
52 |     width: 100%;
53 |     height: 100%;
54 |     filter: grayscale(100%);
55 |   }
56 | 
57 |   .ant-carousel >>> .slick-thumb li.slick-active img {
58 |     filter: grayscale(0%);
59 |   }
60 | </style>
61 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div style="height: 100%">
 3 |     <a-config-provider :locale="locale">
 4 |       <router-view/>
 5 |     </a-config-provider>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
11 | 
12 |   export default {
13 |     name: 'App',
14 |     data: () => ({locale: zh_CN}),
15 |     methods: {}
16 |   }
17 | </script>
18 | 
19 | <style>
20 |   /*阴影效果*/
21 |   .box-shadow {
22 |     box-shadow: 5px 5px 8px 2px #E4E4E4;
23 |   }
24 | 
25 |   /*阴影效果：鼠标移入*/
26 |   .box-shadow:hover {
27 |     box-shadow: 0 1px 8px 2px #E4E4E4;
28 |   }
29 | 
30 |   /*圆角效果*/
31 |   .box-radius {
32 |     border-radius: 15px;
33 |   }
34 |   @keyframes hue {
35 |     from {
36 |       filter: hue-rotate(0);
37 |     }
38 | 
39 |     to {
40 |       filter: hue-rotate(360deg);
41 |     }
42 |   }
43 | 
44 |   .rainbow-text {
45 |     margin-left: 8px;
46 |     display: inline-block;
47 |     position: relative;
48 |     font-size: 2em;
49 |     color: transparent;
50 |     animation: hue 2s linear infinite;
51 |     background-image: linear-gradient(to right bottom, rgb(255, 0, 0), rgb(255, 128, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 128), rgb(0, 255, 255), rgb(0, 128, 255), rgb(0, 0, 255), rgb(128, 0, 255), rgb(255, 0, 255), rgb(255, 0, 128));
52 |     -webkit-background-clip: text;
53 |   }
54 | </style>
55 | 


--------------------------------------------------------------------------------
/src/views/ProduceDetailIntroduction.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div style="margin: 0 auto;width: 100%;min-height: 220px">
 3 |     <a-spin :spinning="loading">
 4 |       <div v-html="detail"></div>
 5 |     </a-spin>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   import {Get} from "@itning/axios-helper";
11 |   import {API} from "../api";
12 | 
13 |   export default {
14 |     name: "ProduceDetailIntroduction",
15 |     data() {
16 |       return {
17 |         productId: null,
18 |         detail: "",
19 |         loading: true
20 |       }
21 |     },
22 |     methods: {
23 |       initProduceDetailIntroduction() {
24 |         this.loading = true;
25 |         Get(API.commodity.commodityDetail + this.productId)
26 |           .withSuccessCode(200)
27 |           .withErrorStartMsg("加载详情失败：")
28 |           .do(response => {
29 |             if (response.data.data.detail === null || response.data.data.detail === '') {
30 |               this.detail = "<h1>暂无详情</h1>";
31 |             } else {
32 |               this.detail = response.data.data.detail;
33 |             }
34 |           })
35 |           .doAfter(() => {
36 |             this.loading = false;
37 |           })
38 |       }
39 |     },
40 |     created() {
41 |       this.productId = this.$route.params.id;
42 |       this.initProduceDetailIntroduction();
43 |     }
44 |   }
45 | </script>
46 | 
47 | <style scoped>
48 | 
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/views/MainView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <a-layout class="box-shadow" style="padding: 24px 0; background: #fff">
 4 |       <a-layout-sider collapsedWidth="0" style="background: #fff" v-if="showSider">
 5 |         <LayoutSider :data="commodityTypeData"/>
 6 |       </a-layout-sider>
 7 |       <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
 8 |         <CarouselTwo/>
 9 |       </a-layout-content>
10 |     </a-layout>
11 |     <RecommendedProducts/>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 |   import CarouselTwo from "../components/CarouselTwo";
17 |   import LayoutSider from "../components/LayoutSider";
18 |   import RecommendedProducts from "../components/RecommendedProducts";
19 |   import {Get} from "@itning/axios-helper";
20 |   import {API} from "../api";
21 | 
22 |   export default {
23 |     name: "MainView",
24 |     components: {RecommendedProducts, CarouselTwo, LayoutSider},
25 |     data: () => ({
26 |       commodityTypeData: [],
27 |       showSider: true
28 |     }),
29 |     methods: {
30 |       initAllCommodityType() {
31 |         Get(API.commodityType.all)
32 |           .withSuccessCode(200)
33 |           .withErrorStartMsg("加载分类失败：")
34 |           .do(response => {
35 |             if (response.data.data.length === 0) {
36 |               this.showSider = false;
37 |             } else {
38 |               this.showSider = true;
39 |               this.commodityTypeData = response.data.data;
40 |             }
41 |           })
42 |       }
43 |     },
44 |     created() {
45 |       this.initAllCommodityType();
46 |     }
47 |   }
48 | </script>
49 | 
50 | <style scoped>
51 | 
52 | </style>
53 | 


--------------------------------------------------------------------------------
/src/api/index.js:
--------------------------------------------------------------------------------
 1 | export const SERVER_HOST = "http://localhost:8888";
 2 | export const API = {
 3 |   user: {
 4 |     login: `${SERVER_HOST}/login`,
 5 |     modify: `${SERVER_HOST}/user`,
 6 |     reg: `${SERVER_HOST}/reg`,
 7 |     pwd: `${SERVER_HOST}/pwd`
 8 |   },
 9 |   commodityType: {
10 |     all: `${SERVER_HOST}/commodity_types`,
11 |     modify: `${SERVER_HOST}/commodity_type`,
12 |     del: `${SERVER_HOST}/commodity_type/`,
13 |     add: `${SERVER_HOST}/commodity_type`
14 |   },
15 |   commodity: {
16 |     type: `${SERVER_HOST}/commodity/type`,
17 |     recommend: `${SERVER_HOST}/commodity/recommends`,
18 |     one: `${SERVER_HOST}/commodity/one/`,
19 |     commodityDetail: `${SERVER_HOST}/commodityDetail/`,
20 |     search: `${SERVER_HOST}/commodity/search/`,
21 |     admin_all: `${SERVER_HOST}/commodity/admin`,
22 |     admin_modify: `${SERVER_HOST}/commodity/admin`,
23 |     admin_modify_detail: `${SERVER_HOST}/commodityDetail`,
24 |     admin_add: `${SERVER_HOST}/commodity/admin`
25 |   },
26 |   comment: {
27 |     all: `${SERVER_HOST}/comment/`,
28 |     add: `${SERVER_HOST}/comment`
29 |   },
30 |   cart: {
31 |     add: `${SERVER_HOST}/cart`,
32 |     all: `${SERVER_HOST}/carts`,
33 |     del: `${SERVER_HOST}/cart/`
34 |   },
35 |   order: {
36 |     all: `${SERVER_HOST}/orders`,
37 |     del: `${SERVER_HOST}/order/`,
38 |     pay: `${SERVER_HOST}/order/pay`,
39 |     hip: `${SERVER_HOST}/order/hip`,
40 |     receipt: `${SERVER_HOST}/order/receipt`,
41 |     add: `${SERVER_HOST}/order`,
42 |     admin_all: `${SERVER_HOST}/orders/admin`,
43 |     admin_modify_price: `${SERVER_HOST}/order/price`
44 |   },
45 |   carousel: {
46 |     all: `${SERVER_HOST}/carousels`,
47 |     add: `${SERVER_HOST}/carousel`,
48 |     del: `${SERVER_HOST}/carousel/`,
49 |     modify: `${SERVER_HOST}/carousel`
50 |   }
51 | };
52 | 


--------------------------------------------------------------------------------
/src/components/CarouselTwo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <a-row>
 4 |       <a-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18">
 5 |         <a-carousel effect="fade" autoplay>
 6 |           <div v-for="item in horizontalData" :key="item.id">
 7 |             <a :href="item.link"><img :src="item.url" alt="" class="carousel_img"></a>
 8 |           </div>
 9 |         </a-carousel>
10 |       </a-col>
11 |       <a-col :xs="0" :sm="6" :md="6" :lg="6" :xl="6">
12 |         <a-carousel effect="fade" dotPosition="right" autoplay>
13 |           <div v-for="item in verticalData" :key="item.id">
14 |             <a :href="item.link"><img :src="item.url" alt="" class="carousel_vertical_img"></a>
15 |           </div>
16 |         </a-carousel>
17 |       </a-col>
18 |     </a-row>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 |   import {Get} from "@itning/axios-helper";
24 |   import {API} from "../api";
25 | 
26 |   export default {
27 |     name: "CarouselTwo",
28 |     data: () => ({
29 |       horizontalData: [],
30 |       verticalData: []
31 |     }),
32 |     methods: {
33 |       initByType(type = 1) {
34 |         Get(`${API.carousel.all}?type=${type}`)
35 |           .withSuccessCode(200)
36 |           .withErrorStartMsg("加载轮播图失败：")
37 |           .do(response => {
38 |             if (type === 1) {
39 |               this.horizontalData = response.data.data;
40 |             } else {
41 |               this.verticalData = response.data.data;
42 |             }
43 |           })
44 |       }
45 |     },
46 |     created() {
47 |       this.initByType(1);
48 |       this.initByType(2);
49 |     }
50 |   }
51 | </script>
52 | 
53 | <style scoped>
54 |   /*走马灯图片样式*/
55 |   .carousel_img {
56 |     width: 100%;
57 |     height: 400px;
58 |   }
59 | 
60 |   /*垂直走马灯图片样式*/
61 |   .carousel_vertical_img {
62 |     width: 100%;
63 |     height: 400px;
64 |   }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/src/components/CommodityItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <router-link :to="'/product_detail/'+id">
 4 |       <div class="item-box">
 5 |         <div class="item-img">
 6 |           <img :src="img" alt="">
 7 |         </div>
 8 |         <p class="item-title">{{title}}</p>
 9 |         <a-row type="flex" justify="space-between">
10 |           <a-col :span="12" class="item-price">￥<span>{{price}}</span></a-col>
11 |           <a-col :span="12" class="item-sales">销量：{{sales}}</a-col>
12 |         </a-row>
13 |       </div>
14 |     </router-link>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 |   export default {
20 |     props: {
21 |       // ID
22 |       id: String,
23 |       // 图片
24 |       img: String,
25 |       // 价格
26 |       price: Number,
27 |       // 销量
28 |       sales: Number,
29 |       // 标题
30 |       title: String
31 |     },
32 |     name: "CommodityItem"
33 |   }
34 | </script>
35 | 
36 | <style scoped>
37 |   .item-box {
38 |     padding: 20px 20px 0 20px;
39 |     width: 238px;
40 |     height: 334px;
41 |     border: 1px solid transparent;
42 |     overflow: hidden;
43 |   }
44 | 
45 |   .item-box:hover {
46 |     border: 1px solid orange;
47 | 
48 |   }
49 | 
50 |   .item-img {
51 |     width: 197px;
52 |     height: 197px;
53 |     overflow: hidden;
54 |   }
55 | 
56 |   .item-img img {
57 |     display: block;
58 |     width: 100%;
59 |     height: 100%;
60 |   }
61 | 
62 |   .item-title {
63 |     margin-top: 7px;
64 |     line-height: 22px;
65 |     height: 44px;
66 |     font-size: 14px;
67 |     color: #666;
68 |     font-weight: normal;
69 |     transition: color 0.3s;
70 |     overflow: hidden;
71 |   }
72 | 
73 |   .item-sales {
74 |     line-height: 32px;
75 |     text-align: end;
76 |     font-size: 0.9em;
77 |     color: #9ca0aa;
78 |   }
79 | 
80 |   .item-price {
81 |     text-align: start;
82 |     color: #f40;
83 |     line-height: 32px;
84 |   }
85 | 
86 |   .item-price span {
87 |     text-align: start;
88 |     font-size: 1.6em;
89 |     color: #f40;
90 |     line-height: 32px;
91 |   }
92 | </style>
93 | 


--------------------------------------------------------------------------------
/src/components/RecommendedProducts.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="box-shadow box-style">
 3 |     <p class="mail-title">
 4 |       <a-icon type="caret-right"/>
 5 |       推荐商品
 6 |     </p>
 7 |     <a-empty v-if="loading.empty"/>
 8 |     <a-spin :spinning="loading.all">
 9 |       <div class="commodity-items">
10 |         <CommodityItem v-for="item in data" :key="item.id" :id="item.id" :img="item.imgMain" :sales="item.sales"
11 |                        :price="item.price"
12 |                        :title="item.name"/>
13 |         <i></i><i></i><i></i><i></i><i></i>
14 |       </div>
15 |     </a-spin>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 |   import CommodityItem from "./CommodityItem";
21 |   import {Get} from "@itning/axios-helper";
22 |   import {API} from "../api";
23 | 
24 |   export default {
25 |     name: "RecommendedProducts",
26 |     components: {CommodityItem},
27 |     data: () => ({
28 |       loading: {all: true, empty: false},
29 |       data: []
30 |     }),
31 |     methods: {
32 |       initRecommendedData() {
33 |         Get(API.commodity.recommend)
34 |           .withSuccessCode(200)
35 |           .withErrorStartMsg("推荐商品加载失败：")
36 |           .do(response => {
37 |             this.data = response.data.data;
38 |             if (this.data.length === 0) {
39 |               this.loading.empty = true;
40 |             }
41 |           })
42 |           .doAfter(() => {
43 |             this.loading.all = false;
44 |           })
45 |       }
46 |     },
47 |     created() {
48 |       this.initRecommendedData();
49 |     }
50 |   }
51 | </script>
52 | 
53 | <style scoped>
54 |   .box-style {
55 |     background-color: #fff;
56 |     margin: 12px 0;
57 |     padding-bottom: 12px;
58 |     min-height: 250px;
59 |   }
60 | 
61 |   .mail-title {
62 |     color: orange;
63 |     padding-top: 12px;
64 |     margin-left: 12px;
65 |     font-size: 1.5em;
66 |   }
67 | 
68 |   .commodity-items {
69 |     display: flex;
70 |     flex-direction: row;
71 |     flex-wrap: wrap;
72 |     justify-content: space-between;
73 |     margin: 0 12px;
74 |   }
75 | 
76 |   .commodity-items > i {
77 |     width: 238px;
78 |     margin-right: 10px;
79 |   }
80 | </style>
81 | 


--------------------------------------------------------------------------------
/src/views/AdminIndex.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a-layout style="height: 100%;background-color: white">
 3 |     <a-layout-sider :trigger="null" collapsible style="background-color: #fff">
 4 |       <div class="rainbow-text" style="min-height: 64px;line-height: 64px">
 5 |         体育用品商城
 6 |       </div>
 7 |       <a-menu theme="light" mode="inline" :defaultSelectedKeys="['1']">
 8 |         <a-menu-item key="1" @click="routerTo('/admin/product')">
 9 |           <a-icon type="bulb"/>
10 |           <span>商品管理</span>
11 |         </a-menu-item>
12 |         <a-menu-item key="2" @click="routerTo('/admin/order')">
13 |           <a-icon type="smile"/>
14 |           <span>订单管理</span>
15 |         </a-menu-item>
16 |         <a-menu-item key="3" @click="routerTo('/admin/productType')">
17 |           <a-icon type="pushpin"/>
18 |           <span>分类管理</span>
19 |         </a-menu-item>
20 |         <a-menu-item key="4" @click="routerTo('/admin/carousel')">
21 |           <a-icon type="barcode"/>
22 |           <span>轮播管理</span>
23 |         </a-menu-item>
24 |       </a-menu>
25 |     </a-layout-sider>
26 |     <a-layout style="background-color: white">
27 |       <a-layout-header style="background: #f9fffd; padding: 0">
28 |         <div>
29 |           <span style="margin-left: 24px">管理员端</span>
30 |           <a-button style="margin-left: 3px" type="link" @click="handleLogoutBtnClick">注销登录</a-button>
31 |         </div>
32 |       </a-layout-header>
33 |       <a-layout-content
34 |         :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
35 |       >
36 |         <router-view name="subContent"/>
37 |       </a-layout-content>
38 |     </a-layout>
39 |   </a-layout>
40 | </template>
41 | 
42 | <script>
43 |   import {LOCAL_STORAGE_KEY} from "../user";
44 | 
45 |   export default {
46 |     name: "AdminIndex",
47 |     data() {
48 |       return {
49 |         collapsed: false,
50 |       };
51 |     },
52 |     methods: {
53 |       routerTo(where) {
54 |         this.$router.push(where).catch(error => {
55 |         })
56 |       },
57 |       handleLogoutBtnClick() {
58 |         localStorage.removeItem(LOCAL_STORAGE_KEY);
59 |         this.$router.push("/login").catch(err => {
60 |         });
61 |       }
62 |     }
63 |   }
64 | </script>
65 | 
66 | <style scoped>
67 | 
68 | </style>
69 | 


--------------------------------------------------------------------------------
/src/http/index.js:
--------------------------------------------------------------------------------
 1 | import {AxiosHelperConfig} from '@itning/axios-helper'
 2 | import Vue from 'vue'
 3 | import {LOCAL_STORAGE_KEY} from "../user";
 4 | 
 5 | AxiosHelperConfig.errorMsgImpl = {
 6 |   showErrorToast(title, data) {
 7 |     let msg;
 8 |     if (typeof data === "string") {
 9 |       msg = data;
10 |     } else {
11 |       msg = data.msg;
12 |     }
13 |     Vue.prototype.$notification.error({
14 |       message: title,
15 |       description: msg,
16 |       duration: 4.5,
17 |       onClose: () => {
18 |         AxiosHelperConfig.onceMsgFinish();
19 |       }
20 |     });
21 |   }
22 | };
23 | 
24 | AxiosHelperConfig.axiosInstanceBuilder
25 |   .timeOut(1000 * 12)
26 |   .requestInterceptor({
27 |     onFulfilled: request => {
28 |       let token = window.localStorage.getItem(LOCAL_STORAGE_KEY);
29 |       if (token !== undefined) {
30 |         request.headers = {
31 |           "Authorization": token,
32 |           "Accept": "application/json"
33 |         };
34 |       } else {
35 |         request.headers = {"Accept": "application/json"};
36 |       }
37 |       return request;
38 |     },
39 |     onRejected: error => {
40 |       return Promise.reject(error);
41 |     }
42 |   })
43 |   .responseInterceptor({
44 |     onFulfilled: response => {
45 |       return Promise.resolve(response);
46 |     },
47 |     onRejected: error => {
48 |       if (error.response === undefined) {
49 |         return Promise.reject(error);
50 |       }
51 |       if (error.response.status) {
52 |         switch (error.response.status) {
53 |           case 401:
54 |             setTimeout(() => {
55 |               window.location.href = "/login";
56 |             }, 2000);
57 |             break;
58 |           case 403:
59 |             setTimeout(() => {
60 |               window.location.href = "/login";
61 |             }, 2000);
62 |             console.warn('权限不足');
63 |             break;
64 |           case 404:
65 |             console.warn('请求URL不存在');
66 |             break;
67 |           case 500:
68 |             console.warn('服务器错误');
69 |             break;
70 |           case 503:
71 |             console.warn('服务器错误');
72 |             break;
73 |           default:
74 |             console.warn(error);
75 |         }
76 |         return Promise.reject(error);
77 |       }
78 |     }
79 |   })
80 |   .build();
81 | 


--------------------------------------------------------------------------------
/src/views/ForgetPassword.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <a-row type="flex" justify="space-around" style="background-color: #f0f2f5">
 4 |       <a-col :span="4" style="line-height: 50px">体育用品商城->找回密码</a-col>
 5 |       <a-col :span="4" style="line-height: 50px">已有账号？
 6 |         <router-link to="/login">立即登录</router-link>
 7 |       </a-col>
 8 |     </a-row>
 9 |     <div class="forget-box">
10 |       <a-steps :current="forgetStatusIndex" style="margin-bottom: 24px;width: 315px;">
11 |         <a-step title="填写信息"/>
12 |         <a-step title="找回密码"/>
13 |       </a-steps>
14 |       <a-form :form="form" @submit="handleSubmit">
15 |         <a-form-item v-bind="formItemLayout" label="邮箱">
16 |           <a-input
17 |             v-decorator="[
18 |           'email',
19 |           {
20 |             rules: [
21 |               {
22 |                 type: 'email',
23 |                 message: '有输入正确的邮箱地址!',
24 |               },
25 |               {
26 |                 required: true,
27 |                 message: '请输入邮箱!',
28 |               },
29 |             ],
30 |           },
31 |         ]"
32 |           />
33 |         </a-form-item>
34 |         <a-form-item v-bind="tailFormItemLayout">
35 |           <a-button type="primary" html-type="submit">立即找回</a-button>
36 |           <a-button html-type="button" @click="handleReturnClick" style="margin-left: 8px">返回</a-button>
37 |         </a-form-item>
38 |       </a-form>
39 |     </div>
40 |   </div>
41 | </template>
42 | 
43 | <script>
44 |   // MEMO: This view not developed and ready to remove this feature.
45 |   export default {
46 |     name: "ForgetPassword",
47 |     data() {
48 |       return {
49 |         forgetStatusIndex: 0,
50 |         formItemLayout: {
51 |           labelCol: {
52 |             xs: {span: 24},
53 |             sm: {span: 8},
54 |           },
55 |           wrapperCol: {
56 |             xs: {span: 24},
57 |             sm: {span: 16},
58 |           },
59 |         },
60 |         tailFormItemLayout: {
61 |           wrapperCol: {
62 |             xs: {
63 |               span: 24,
64 |               offset: 0,
65 |             },
66 |             sm: {
67 |               span: 16,
68 |               offset: 8,
69 |             },
70 |           },
71 |         },
72 |       }
73 |     },
74 |     methods: {
75 |       handleSubmit(e) {
76 |         e.preventDefault();
77 |         this.form.validateFieldsAndScroll((err, values) => {
78 |           if (!err) {
79 |             console.log('Received values of form: ', values);
80 |           }
81 |         });
82 |       },
83 |       handleReturnClick() {
84 |         this.$router.back();
85 |       }
86 |     },
87 |     beforeCreate() {
88 |       this.form = this.$form.createForm(this, {name: 'forget_pwd'});
89 |     },
90 |   }
91 | </script>
92 | 
93 | <style scoped>
94 |   .forget-box {
95 |     max-width: 300px;
96 |     margin: 24px auto;
97 |   }
98 | </style>
99 | 


--------------------------------------------------------------------------------
/src/views/ProduceDetailComment.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <p>商品评价数：{{data.length}}</p>
 4 |     <a-empty v-if="loading.empty"/>
 5 |     <div v-if="!loading.empty">
 6 |       <div>
 7 |         <CommentItem v-for="item in data" :key="item.id" :username="item.username" :content="item.content"
 8 |                      :time="item.time"/>
 9 |       </div>
10 |       <div class="comment-pagination">
11 |         <a-pagination showSizeChanger
12 |                       @showSizeChange="onShowSizeChange"
13 |                       @change="onPageChange"
14 |                       :total="pagination.totalElements"
15 |         />
16 |       </div>
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 |   import CommentItem from "../components/CommentItem";
23 |   import {Get} from "@itning/axios-helper";
24 |   import {API} from "../api";
25 |   import moment from "moment";
26 |   import 'moment/locale/zh-cn';
27 | 
28 |   moment.locale('zh-cn');
29 | 
30 |   export default {
31 |     name: "ProduceDetailComment",
32 |     components: {CommentItem},
33 |     data() {
34 |       return {
35 |         productId: null,
36 |         pageSize: 20,
37 |         current: 4,
38 |         data: [],
39 |         pagination: {
40 |           // 数据总数
41 |           totalElements: 0,
42 |           // 页码
43 |           page: 1,
44 |           // 每页数量
45 |           size: 10
46 |         },
47 |         loading: {
48 |           empty: false
49 |         }
50 |       }
51 |     },
52 |     methods: {
53 |       onShowSizeChange(current, pageSize) {
54 |         this.pagination.page = current;
55 |         this.pagination.size = pageSize;
56 |         this.initProduceDetailComment();
57 |       },
58 |       onPageChange(page, pageSize) {
59 |         this.pagination.page = page;
60 |         this.pagination.size = pageSize;
61 |         this.initProduceDetailComment();
62 |       },
63 |       initProduceDetailComment() {
64 |         Get(`${API.comment.all}${this.productId}?page=${this.pagination.page - 1}&size=${this.pagination.size}`)
65 |           .withSuccessCode(200)
66 |           .withErrorStartMsg("加载评论失败：")
67 |           .do(response => {
68 |             this.pagination.totalElements = response.data.data.totalElements;
69 |             if (response.data.data.content.length === 0) {
70 |               this.loading.empty = true;
71 |             } else {
72 |               this.loading.empty = false;
73 |               this.data = response.data.data.content.map(item => {
74 |                 item.time = moment(item.gmtModified).format("YYYY年MM月DD日 HH:mm:ss");
75 |                 return item;
76 |               });
77 |             }
78 |           })
79 |       }
80 |     },
81 |     created() {
82 |       this.productId = this.$route.params.id;
83 |       this.initProduceDetailComment();
84 |     }
85 |   }
86 | </script>
87 | 
88 | <style scoped>
89 |   .comment-pagination {
90 |     padding-top: 24px;
91 |     display: flex;
92 |     justify-content: flex-end;
93 |   }
94 | </style>
95 | 


--------------------------------------------------------------------------------
/src/components/CartItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="item-box">
  3 |     <div class="item-info">
  4 |       <span>加入日期：{{time}}</span>
  5 |       <a-popconfirm
  6 |         title="确定删除该商品吗？"
  7 |         @confirm="handleDelCartBtn"
  8 |         okText="确定"
  9 |         cancelText="取消"
 10 |       >
 11 |         <span class="del-order"><a-icon type="delete"/></span>
 12 |       </a-popconfirm>
 13 |     </div>
 14 |     <a-row class="item-content" type="flex" justify="space-around" align="middle">
 15 |       <a-col :span="2">
 16 |         <img class="item-img"
 17 |              :src="img"
 18 |              alt="">
 19 |       </a-col>
 20 |       <a-col :span="5" class="item-title">{{title}}</a-col>
 21 |       <a-col :span="3">单价：￥{{price}}</a-col>
 22 |       <a-col :span="5">数量：
 23 |         <a-input-number size="small" :min="1" :max="100000" :defaultValue="count" @change="onCountChange"/>
 24 |       </a-col>
 25 |       <a-col :span="4">金额：￥{{totalPrice}}</a-col>
 26 |       <a-col :span="3">
 27 |         <a-popconfirm
 28 |           title="确定下订单吗（会删除购物车物品）？"
 29 |           @confirm="handleBuyBtnClick"
 30 |           okText="确定"
 31 |           cancelText="取消"
 32 |         >
 33 |           <a-button type="link">立即购买</a-button>
 34 |         </a-popconfirm>
 35 |       </a-col>
 36 |     </a-row>
 37 |   </div>
 38 | </template>
 39 | 
 40 | <script>
 41 |   import {Delete} from "@itning/axios-helper";
 42 |   import {API} from "../api";
 43 | 
 44 |   export default {
 45 |     props: {
 46 |       id: String,
 47 |       img: String,
 48 |       title: String,
 49 |       price: Number,
 50 |       count: Number,
 51 |       time: String
 52 |     },
 53 |     name: "CartItem",
 54 |     data() {
 55 |       return {
 56 |         // 应向服务器发送该数量
 57 |         syncCount: this.count
 58 |       }
 59 |     },
 60 |     computed: {
 61 |       totalPrice: function () {
 62 |         return (this.syncCount * this.price).toFixed(2);
 63 |       }
 64 |     },
 65 |     methods: {
 66 |       handleBuyBtnClick() {
 67 |         Delete(API.cart.del + this.id)
 68 |           .withSuccessCode(204)
 69 |           .withErrorStartMsg("购物车删除失败：")
 70 |           .do(response => {
 71 |             this.$router.push(`/confirm_order/${this.id}/${this.syncCount}`).catch(error => {
 72 |             })
 73 |           })
 74 |       },
 75 |       onCountChange(value) {
 76 |         this.syncCount = value;
 77 |         this.$emit("countChange", {id: this.id, value: value});
 78 |       },
 79 |       handleDelCartBtn() {
 80 |         this.$emit("delCart", this.id);
 81 |       }
 82 |     }
 83 |   }
 84 | </script>
 85 | 
 86 | <style scoped>
 87 |   .item-box {
 88 |     border: 2px solid #f1f1f1;
 89 |     margin-bottom: 12px;
 90 |   }
 91 | 
 92 |   .item-img {
 93 |     max-width: 100%;
 94 |   }
 95 | 
 96 |   .item-content {
 97 |     margin: 12px 3px;
 98 |   }
 99 | 
100 |   .item-title {
101 |     font-size: 0.9em;
102 |   }
103 | 
104 |   .item-info {
105 |     background-color: #f1f1f1;
106 |     padding: 6px;
107 |     margin-bottom: 12px;
108 |   }
109 | 
110 |   .del-order {
111 |     float: right;
112 |     cursor: pointer;
113 |   }
114 | 
115 |   .del-order:hover {
116 |     color: #1890ff;
117 |   }
118 | </style>
119 | 


--------------------------------------------------------------------------------
/src/components/OrderItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="item-box">
  3 |     <div class="item-info">
  4 |       <span>创建日期：{{createdTime}}</span>
  5 |       <span>订单号：{{id}}</span>
  6 |       <span>订单状态：{{statusCN}}</span>
  7 |       <a-popconfirm
  8 |         title="确定删除该订单吗？"
  9 |         @confirm="handleDelOrderBtn"
 10 |         okText="确定"
 11 |         cancelText="取消"
 12 |       >
 13 |         <span class="del-order"><a-icon type="delete"/></span>
 14 |       </a-popconfirm>
 15 |     </div>
 16 |     <a-row class="item-content" type="flex" justify="space-around" align="middle">
 17 |       <a-col :span="2">
 18 |         <img class="item-img"
 19 |              :src="img"
 20 |              alt="">
 21 |       </a-col>
 22 |       <a-col :span="8" class="item-title">{{title}}</a-col>
 23 |       <a-col :span="4">数量：{{count}}</a-col>
 24 |       <a-col :span="4">总价：￥{{sumPrice}}</a-col>
 25 |       <a-col :span="4">
 26 |         <a-popconfirm
 27 |           title="确认操作？"
 28 |           @confirm="handleBtnClick"
 29 |           okText="确认"
 30 |           cancelText="取消"
 31 |         >
 32 |           <a :disabled="status===5||status===2">{{btnText}}</a>
 33 |         </a-popconfirm>
 34 |       </a-col>
 35 |     </a-row>
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script>
 40 | 
 41 |   export default {
 42 |     props: {
 43 |       img: String,
 44 |       createdTime: String,
 45 |       id: String,
 46 |       status: Number,
 47 |       title: String,
 48 |       count: Number,
 49 |       price: Number,
 50 |       sumPrice: Number
 51 |     },
 52 |     name: "OrderItem",
 53 |     computed: {
 54 |       statusCN: function () {
 55 |         switch (this.status) {
 56 |           case 1: {
 57 |             return "已下单";
 58 |           }
 59 |           case 2: {
 60 |             return "待发货";
 61 |           }
 62 |           case 3: {
 63 |             return "待收货";
 64 |           }
 65 |           case 4: {
 66 |             return "待评价";
 67 |           }
 68 |           case 5: {
 69 |             return "订单已完成";
 70 |           }
 71 |         }
 72 |       },
 73 |       btnText: function () {
 74 |         switch (this.status) {
 75 |           case 1: {
 76 |             return "立即付款";
 77 |           }
 78 |           case 2: {
 79 |             return "等待发货";
 80 |           }
 81 |           case 3: {
 82 |             return "确认收货";
 83 |           }
 84 |           case 4: {
 85 |             return "评价商品";
 86 |           }
 87 |           case 5: {
 88 |             return "订单已完成";
 89 |           }
 90 |         }
 91 |       }
 92 |     },
 93 |     methods: {
 94 |       handleDelOrderBtn() {
 95 |         console.log("del: " + this.id);
 96 |         this.$emit("delOrder", this.id);
 97 |       },
 98 |       handleBtnClick() {
 99 |         this.$emit("ok", {id: this.id, status: this.status});
100 |       }
101 |     }
102 |   }
103 | </script>
104 | 
105 | <style scoped>
106 |   .item-box {
107 |     margin-top: 12px;
108 |     border: 2px solid #f1f1f1;
109 |   }
110 | 
111 |   .item-content {
112 |     margin: 12px 3px;
113 |   }
114 | 
115 |   .item-title {
116 |     font-size: 0.9em;
117 |   }
118 | 
119 |   .item-info {
120 |     background-color: #f1f1f1;
121 |     padding: 6px;
122 |     margin-bottom: 12px;
123 |   }
124 | 
125 |   .item-info span {
126 |     color: black;
127 |     margin-right: 12px;
128 |   }
129 | 
130 |   .item-img {
131 |     max-width: 100%;
132 |   }
133 | 
134 |   .del-order {
135 |     float: right;
136 |     cursor: pointer;
137 |   }
138 | 
139 |   .del-order:hover {
140 |     color: #1890ff;
141 |   }
142 | </style>
143 | 


--------------------------------------------------------------------------------
/src/components/AdminProductItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="item-box">
  3 |     <div class="item-info">
  4 |       <span>修改日期：{{time}}</span>
  5 |       <label style="margin-left: 12px">推荐商品：
  6 |         <input type="checkbox" :checked="recommended" @change="handleChange($event.target.checked,'recommended')">
  7 |       </label>
  8 |       <a-popconfirm
  9 |         title="确定下架该商品吗？"
 10 |         @confirm="handleDelBtn"
 11 |         okText="确定"
 12 |         cancelText="取消"
 13 |       >
 14 |         <span class="del-order"><a-icon type="delete"/></span>
 15 |       </a-popconfirm>
 16 |     </div>
 17 |     <a-row class="item-content" type="flex" justify="space-around" align="middle">
 18 |       <a-col :span="2">
 19 |         <EditableCellImg :text="img" @change="handleChange($event,'imgMain')"/>
 20 |       </a-col>
 21 |       <a-col :span="5" class="item-title">
 22 |         <EditableCell :text="title" @change="handleChange($event,'name')"/>
 23 |       </a-col>
 24 |       <a-col :span="4">单价：￥
 25 |         <EditableCellNumber :step="0.01" :text="String(price)" @change="handleChange($event,'price')"/>
 26 |       </a-col>
 27 |       <a-col :span="3">库存：
 28 |         <EditableCellNumber :step="1" :text="String(stock)" @change="handleChange($event,'stock')"/>
 29 |       </a-col>
 30 |       <a-col :span="3">分类：
 31 |         <EditableCellSelect :text="type.id" :s="type.name" :values="productTyped"
 32 |                             @change="handleChange($event,'commodityType')"/>
 33 |       </a-col>
 34 |       <a-col :span="3">
 35 |         <a-button type="link" @click="handleModify">修改商品</a-button>
 36 |       </a-col>
 37 |     </a-row>
 38 |   </div>
 39 | </template>
 40 | 
 41 | <script>
 42 |   import EditableCell from "./EditableCell";
 43 |   import EditableCellNumber from "./EditableCellNumber";
 44 |   import EditableCellSelect from "./EditableCellSelect";
 45 |   import EditableCellImg from "./EditableCellImg";
 46 | 
 47 |   export default {
 48 |     components: {EditableCellImg, EditableCellSelect, EditableCellNumber, EditableCell},
 49 |     props: {
 50 |       id: String,
 51 |       img: String,
 52 |       title: String,
 53 |       price: Number,
 54 |       stock: Number,
 55 |       time: String,
 56 |       type: Object,
 57 |       recommended: Boolean,
 58 |       productType: Array
 59 |     },
 60 |     name: "AdminProductItem",
 61 |     computed: {
 62 |       productTyped: function () {
 63 |         return this.productType.map(item => {
 64 |           item.value = item.id;
 65 |           return item;
 66 |         })
 67 |       }
 68 |     },
 69 |     data() {
 70 |       return {}
 71 |     },
 72 |     methods: {
 73 |       handleDelBtn() {
 74 |         this.$emit('del', this.id);
 75 |       },
 76 |       handleChange(value, index) {
 77 |         this.$emit('change', {id: this.id, key: index, value: value});
 78 |       },
 79 |       handleModify() {
 80 |         this.$emit("btnClick", this.id)
 81 |       }
 82 |     }
 83 |   }
 84 | </script>
 85 | 
 86 | <style scoped>
 87 |   .item-box {
 88 |     border: 2px solid #f1f1f1;
 89 |     margin-bottom: 12px;
 90 |   }
 91 | 
 92 |   .item-img {
 93 |     max-width: 100%;
 94 |   }
 95 | 
 96 |   .item-content {
 97 |     margin: 12px 3px;
 98 |   }
 99 | 
100 |   .item-title {
101 |     font-size: 0.9em;
102 |   }
103 | 
104 |   .item-info {
105 |     background-color: #f1f1f1;
106 |     padding: 6px;
107 |     margin-bottom: 12px;
108 |   }
109 | 
110 |   .del-order {
111 |     float: right;
112 |     cursor: pointer;
113 |   }
114 | 
115 |   .del-order:hover {
116 |     color: #1890ff;
117 |   }
118 | </style>
119 | 


--------------------------------------------------------------------------------
/src/views/AdminProductType.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <a-table bordered :dataSource="dataSource" :columns="columns" :pagination="false" :rowKey="'id'" :scroll="{x:true}">
  4 |       <template slot="name" slot-scope="text, record">
  5 |         <EditableCell :text="text" @change="onCellChange(record.id, 'name', $event)"/>
  6 |       </template>
  7 |       <template slot="operation" slot-scope="text, record">
  8 |         <a-popconfirm
  9 |           v-if="dataSource.length"
 10 |           title="确定删除？"
 11 |           @confirm="() => onDelete(record.id)"
 12 |         >
 13 |           <a href="javascript:;">删除</a>
 14 |         </a-popconfirm>
 15 |       </template>
 16 |     </a-table>
 17 |     <a-button style="margin: 12px 0" @click="visible=!visible">添加</a-button>
 18 |     <a-modal
 19 |       title="新增分类"
 20 |       :visible="visible"
 21 |       @ok="handleAdd"
 22 |       :confirmLoading="confirmLoading"
 23 |       @cancel="visible=false"
 24 |     >
 25 |       <a-input placeholder="在此输入..." v-model="newType"/>
 26 |     </a-modal>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 |   import {Delete, Get, Patch, Post} from "@itning/axios-helper";
 32 |   import {API} from "../api";
 33 |   import EditableCell from "../components/EditableCell";
 34 | 
 35 |   export default {
 36 |     name: "AdminProductType",
 37 |     components: {EditableCell},
 38 |     data() {
 39 |       return {
 40 |         newType: '',
 41 |         visible: false,
 42 |         confirmLoading: false,
 43 |         dataSource: [],
 44 |         count: 2,
 45 |         columns: [
 46 |           {
 47 |             title: '名称',
 48 |             dataIndex: 'name',
 49 |             width: '50%',
 50 |             scopedSlots: {customRender: 'name'},
 51 |           },
 52 |           {
 53 |             title: '操作',
 54 |             dataIndex: 'operation',
 55 |             scopedSlots: {customRender: 'operation'},
 56 |           },
 57 |         ],
 58 |       };
 59 |     },
 60 |     methods: {
 61 |       initProductType() {
 62 |         Get(API.commodityType.all)
 63 |           .withSuccessCode(200)
 64 |           .withErrorStartMsg("加载分类失败：")
 65 |           .do(response => {
 66 |             this.dataSource = response.data.data;
 67 |           })
 68 |       },
 69 |       onCellChange(key, dataIndex, value) {
 70 |         Patch(API.commodityType.modify)
 71 |           .withSuccessCode(204)
 72 |           .withErrorStartMsg("修改失败：")
 73 |           .withJson({id: key, name: value})
 74 |           .do(response => {
 75 |             this.$message.success("修改成功");
 76 |           })
 77 |           .doAfter(() => {
 78 |             this.initProductType();
 79 |           })
 80 |       },
 81 |       onDelete(key) {
 82 |         Delete(API.commodityType.del + key)
 83 |           .withSuccessCode(204)
 84 |           .withErrorStartMsg("删除失败：")
 85 |           .do(response => {
 86 |             this.$message.success("删除成功");
 87 |           })
 88 |           .doAfter(() => {
 89 |             this.initProductType();
 90 |           })
 91 |       },
 92 |       handleAdd() {
 93 |         if (this.newType.trim() === '') {
 94 |           this.$message.error("请输入类别内容");
 95 |           return;
 96 |         }
 97 |         this.confirmLoading = true;
 98 |         Post(API.commodityType.add)
 99 |           .withURLSearchParams({name: this.newType})
100 |           .withSuccessCode(201)
101 |           .withErrorStartMsg("新增失败：")
102 |           .do(response => {
103 |             this.visible = false;
104 |             this.$message.success("新增成功");
105 |           })
106 |           .doAfter(() => {
107 |             this.confirmLoading = false;
108 |             this.initProductType();
109 |           })
110 |       },
111 |     },
112 |     created() {
113 |       this.initProductType();
114 |     }
115 |   }
116 | </script>
117 | 
118 | <style scoped>
119 |   .ant-table td {
120 |     white-space: nowrap;
121 |   }
122 | </style>
123 | 


--------------------------------------------------------------------------------
/src/components/AdminOrderItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="item-box">
  3 |     <div class="item-info">
  4 |       <span>创建日期：{{createdTime}}</span>
  5 |       <span>订单号：{{id}}</span>
  6 |       <span>订单状态：{{statusCN}}</span>
  7 |       <a-popconfirm
  8 |         title="确定删除该订单吗？"
  9 |         @confirm="handleDelOrderBtn"
 10 |         okText="确定"
 11 |         cancelText="取消"
 12 |       >
 13 |         <span class="del-order"><a-icon type="delete"/></span>
 14 |       </a-popconfirm>
 15 |     </div>
 16 |     <a-row class="item-content" type="flex" justify="space-around" align="middle">
 17 |       <a-col :span="2">
 18 |         <img class="item-img"
 19 |              :src="img"
 20 |              alt="">
 21 |       </a-col>
 22 |       <a-col :span="8" class="item-title">{{title}}</a-col>
 23 |       <a-col :span="3">数量：{{count}}</a-col>
 24 |       <a-col :span="4">总价：￥
 25 |         <EditableCellNumber v-if="status===1" :text="String(sumPrice)" :step="0.01" @change="handlePriceChange"/>
 26 |         <span v-else>{{sumPrice}}</span>
 27 |       </a-col>
 28 |       <a-col :span="4">
 29 |         <a-popconfirm
 30 |           title="确认操作？"
 31 |           @confirm="handleBtnClick"
 32 |           okText="确认"
 33 |           cancelText="取消"
 34 |         >
 35 |           <a :disabled="status!==2">{{btnText}}</a>
 36 |         </a-popconfirm>
 37 |       </a-col>
 38 |     </a-row>
 39 |   </div>
 40 | </template>
 41 | 
 42 | <script>
 43 | 
 44 |   import EditableCellNumber from "./EditableCellNumber";
 45 | 
 46 |   export default {
 47 |     components: {EditableCellNumber},
 48 |     props: {
 49 |       img: String,
 50 |       createdTime: String,
 51 |       id: String,
 52 |       status: Number,
 53 |       title: String,
 54 |       count: Number,
 55 |       price: Number,
 56 |       sumPrice: Number
 57 |     },
 58 |     name: "AdminOrderItem",
 59 |     computed: {
 60 |       statusCN: function () {
 61 |         switch (this.status) {
 62 |           case 1: {
 63 |             return "已下单";
 64 |           }
 65 |           case 2: {
 66 |             return "待发货";
 67 |           }
 68 |           case 3: {
 69 |             return "待收货";
 70 |           }
 71 |           case 4: {
 72 |             return "待评价";
 73 |           }
 74 |           case 5: {
 75 |             return "订单已完成";
 76 |           }
 77 |         }
 78 |       },
 79 |       btnText: function () {
 80 |         switch (this.status) {
 81 |           case 1: {
 82 |             return "等待付款";
 83 |           }
 84 |           case 2: {
 85 |             return "立即发货";
 86 |           }
 87 |           case 3: {
 88 |             return "等待确认收货";
 89 |           }
 90 |           case 4: {
 91 |             return "等待评价商品";
 92 |           }
 93 |           case 5: {
 94 |             return "订单已完成";
 95 |           }
 96 |         }
 97 |       }
 98 |     },
 99 |     methods: {
100 |       handleDelOrderBtn() {
101 |         console.log("del: " + this.id);
102 |         this.$emit("delOrder", this.id);
103 |       },
104 |       handleBtnClick() {
105 |         this.$emit("ok", {id: this.id, status: this.status});
106 |       },
107 |       handlePriceChange(value) {
108 |         this.$emit("changePrice", {id: this.id, newPrice: value});
109 |       }
110 |     }
111 |   }
112 | </script>
113 | 
114 | <style scoped>
115 |   .item-box {
116 |     margin-top: 12px;
117 |     border: 2px solid #f1f1f1;
118 |   }
119 | 
120 |   .item-content {
121 |     margin: 12px 3px;
122 |   }
123 | 
124 |   .item-title {
125 |     font-size: 0.9em;
126 |   }
127 | 
128 |   .item-info {
129 |     background-color: #f1f1f1;
130 |     padding: 6px;
131 |     margin-bottom: 12px;
132 |   }
133 | 
134 |   .item-info span {
135 |     color: black;
136 |     margin-right: 12px;
137 |   }
138 | 
139 |   .item-img {
140 |     max-width: 100%;
141 |   }
142 | 
143 |   .del-order {
144 |     float: right;
145 |     cursor: pointer;
146 |   }
147 | 
148 |   .del-order:hover {
149 |     color: #1890ff;
150 |   }
151 | </style>
152 | 


--------------------------------------------------------------------------------
/src/views/Cart.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cart-box box-shadow box-radius">
  3 |     <div class="cart-info">
  4 |       <span>购物车 商品数量：{{data.length}}</span>
  5 |     </div>
  6 |     <a-empty v-if="loading.empty"/>
  7 |     <div v-if="!loading.empty">
  8 |       <CartItem v-for="item in data" :key="item.id" :id="item.commodity.id" :img="item.commodity.imgMain"
  9 |                 :title="item.commodity.name"
 10 |                 :price="item.commodity.price"
 11 |                 :count="item.countNum" :time="item.time" @countChange="handleCountChange"
 12 |                 @delCart="handleDelCart"/>
 13 |       <div class="cart-pagination">
 14 |         <a-pagination showSizeChanger
 15 |                       @showSizeChange="onShowSizeChange"
 16 |                       @change="onPageChange"
 17 |                       :total="pagination.totalElements"
 18 | 
 19 |         />
 20 |       </div>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 |   import CartItem from "../components/CartItem";
 27 |   import {Delete, Get, Post} from "@itning/axios-helper";
 28 |   import {API} from "../api";
 29 |   import moment from "moment";
 30 | 
 31 |   export default {
 32 |     name: "Cart",
 33 |     components: {CartItem},
 34 |     data: () => ({
 35 |         pageSize: 20,
 36 |         current: 4,
 37 |         pagination: {
 38 |           // 数据总数
 39 |           totalElements: 0,
 40 |           // 页码
 41 |           page: 1,
 42 |           // 每页数量
 43 |           size: 10
 44 |         },
 45 |         data: [],
 46 |         loading: {empty: false}
 47 |       }
 48 |     ),
 49 |     methods: {
 50 |       onShowSizeChange(current, pageSize) {
 51 |         this.pagination.page = current;
 52 |         this.pagination.size = pageSize;
 53 |         this.initProduceDetailComment();
 54 |       },
 55 |       onPageChange(page, pageSize) {
 56 |         this.pagination.page = page;
 57 |         this.pagination.size = pageSize;
 58 |         this.initProduceDetailComment();
 59 |       },
 60 |       handleCountChange(value) {
 61 |         Post(API.cart.add)
 62 |           .withURLSearchParams({commodityId: value.id, num: value.value, cumulative: false})
 63 |           .withSuccessCode(201)
 64 |           .withErrorStartMsg("操作失败：")
 65 |           .do(response => {
 66 |           })
 67 |       },
 68 |       handleDelCart(id) {
 69 |         console.log(id);
 70 |         Delete(API.cart.del + id)
 71 |           .withSuccessCode(204)
 72 |           .withErrorStartMsg("购物车删除失败：")
 73 |           .do(response => {
 74 |             this.$message.success("删除成功");
 75 |           })
 76 |           .doAfter(() => {
 77 |             this.initCartData();
 78 |           })
 79 |       },
 80 |       initCartData() {
 81 |         Get(`${API.cart.all}?page=${this.pagination.page - 1}&size=${this.pagination.size}`)
 82 |           .withSuccessCode(200)
 83 |           .withErrorStartMsg("加载购物车数据失败：")
 84 |           .do(response => {
 85 |             this.pagination.totalElements = response.data.data.totalElements;
 86 |             if (response.data.data.content.length === 0) {
 87 |               this.loading.empty = true;
 88 |               this.data = [];
 89 |             } else {
 90 |               this.loading.empty = false;
 91 |               this.data = response.data.data.content.map(item => {
 92 |                 item.time = moment(item.gmtCreate).format("YYYY年MM月DD日 HH:mm:ss");
 93 |                 return item;
 94 |               });
 95 |             }
 96 |           })
 97 |       }
 98 |     },
 99 |     created() {
100 |       this.initCartData();
101 |     }
102 |   }
103 | </script>
104 | 
105 | <style scoped>
106 |   .cart-box {
107 |     background-color: #fff;
108 |     padding: 12px;
109 |     margin-bottom: 12px;
110 |   }
111 | 
112 |   .cart-pagination {
113 |     padding-top: 3px;
114 |     display: flex;
115 |     justify-content: flex-end;
116 |   }
117 | 
118 |   .cart-info {
119 |     height: 40px;
120 |     line-height: 30px;
121 |   }
122 | </style>
123 | 


--------------------------------------------------------------------------------
/src/components/LayoutHeader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <a-row type="flex" justify="space-between">
  4 |       <a-col :xs="0" :sm="8" :md="8" :lg="8" :xl="8">
  5 |         <router-link to="/">
  6 |           <div class="rainbow-text">体育用品商城</div>
  7 |         </router-link>
  8 |       </a-col>
  9 |       <a-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
 10 |         <a-input-search placeholder="搜索商品" @search="searchProduct" enterButton style="vertical-align: middle;"/>
 11 |       </a-col>
 12 |       <a-col :xs="0" :sm="8" :md="8" :lg="8" :xl="8">
 13 |         <a-row type="flex" justify="end">
 14 |           <a-col :xs="0" :sm="8" :md="7" :lg="5" :xl="4">
 15 |             <a-config-provider :autoInsertSpaceInButton="false">
 16 |               <a-button type="link" @click="handleOrderBtnClick">我的订单</a-button>
 17 |             </a-config-provider>
 18 |           </a-col>
 19 |           <a-col :xs="0" :sm="10" :md="9" :lg="6" :xl="5">
 20 |             <a-config-provider :autoInsertSpaceInButton="false">
 21 |               <a-button type="link" @click="handleCartBtnClick">
 22 |                 <a-icon type="shopping-cart"/>
 23 |                 购物车
 24 |               </a-button>
 25 |             </a-config-provider>
 26 |           </a-col>
 27 |           <a-col :xs="0" :sm="6" :md="7" :lg="5" :xl="5" v-if="$user.loginUser().username">
 28 |             <a-dropdown class="user-btn">
 29 |               <a class="ant-dropdown-link">
 30 |                 {{$user.loginUser().username}}
 31 |                 <a-icon type="down"/>
 32 |               </a>
 33 |               <a-menu slot="overlay">
 34 |                 <a-menu-item>
 35 |                   <a @click="handlePersonalBtnClick">个人中心</a>
 36 |                 </a-menu-item>
 37 |                 <a-menu-item>
 38 |                   <a @click="handleLogoutBtnClick">注销登录</a>
 39 |                 </a-menu-item>
 40 |               </a-menu>
 41 |             </a-dropdown>
 42 |           </a-col>
 43 |           <a-col :xs="0" :sm="5" :md="4" :lg="3" :xl="3" v-if="!$user.loginUser().username">
 44 |             <a-config-provider :autoInsertSpaceInButton="false">
 45 |               <a-button type="link" @click="handleLoginBtnClick">登录</a-button>
 46 |             </a-config-provider>
 47 |           </a-col>
 48 |           <a-col :xs="0" :sm="1" :md="2" :lg="4" :xl="4" v-if="!$user.loginUser().username">
 49 |             <a-config-provider :autoInsertSpaceInButton="false">
 50 |               <a-button type="link" @click="handleRegBtnClick">注册</a-button>
 51 |             </a-config-provider>
 52 |           </a-col>
 53 |         </a-row>
 54 |       </a-col>
 55 |     </a-row>
 56 |   </div>
 57 | </template>
 58 | 
 59 | <script>
 60 |   import {LOCAL_STORAGE_KEY} from "../user";
 61 | 
 62 |   export default {
 63 |     name: "LayoutHeader",
 64 |     methods: {
 65 |       handlePersonalBtnClick() {
 66 |         this.$router.push("/personal").catch(err => {
 67 |         });
 68 |       },
 69 |       handleLogoutBtnClick() {
 70 |         localStorage.removeItem(LOCAL_STORAGE_KEY);
 71 |         this.$router.push("/login").catch(err => {
 72 |         });
 73 |       },
 74 |       handleLoginBtnClick() {
 75 |         this.$router.push("/login").catch(err => {
 76 |         });
 77 |       },
 78 |       handleRegBtnClick() {
 79 |         this.$router.push("/reg").catch(err => {
 80 |         });
 81 |       },
 82 |       handleOrderBtnClick() {
 83 |         this.$router.push("/order").catch(err => {
 84 |         });
 85 |       },
 86 |       handleCartBtnClick() {
 87 |         this.$router.push("/cart").catch(err => {
 88 |         });
 89 |       },
 90 |       searchProduct(value) {
 91 |         if (!value || value.trim() === "" || value.trim().startsWith("\\")) {
 92 |           this.$router.push("/").catch(err => {
 93 |           });
 94 |           return;
 95 |         }
 96 |         this.$router.push("/search/" + value).catch(err => {
 97 |         });
 98 |       }
 99 |     }
100 |   }
101 | </script>
102 | 
103 | <style scoped>
104 | 
105 | </style>
106 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 体育用品商城-客户端
  2 | 
  3 | [![GitHub stars](https://img.shields.io/github/stars/itning/sports-mall-client.svg?style=social&label=Stars)](https://github.com/itning/sports-mall-client/stargazers)
  4 | [![GitHub forks](https://img.shields.io/github/forks/itning/sports-mall-client.svg?style=social&label=Fork)](https://github.com/itning/sports-mall-client/network/members)
  5 | [![GitHub watchers](https://img.shields.io/github/watchers/itning/sports-mall-client.svg?style=social&label=Watch)](https://github.com/itning/sports-mall-client/watchers)
  6 | [![GitHub followers](https://img.shields.io/github/followers/itning.svg?style=social&label=Follow)](https://github.com/itning?tab=followers)
  7 | 
  8 | [![GitHub issues](https://img.shields.io/github/issues/itning/sports-mall-client.svg)](https://github.com/itning/sports-mall-client/issues)
  9 | [![GitHub license](https://img.shields.io/github/license/itning/sports-mall-client.svg)](https://github.com/itning/sports-mall-client/blob/master/LICENSE)
 10 | [![GitHub last commit](https://img.shields.io/github/last-commit/itning/sports-mall-client.svg)](https://github.com/itning/sports-mall-client/commits)
 11 | [![GitHub release](https://img.shields.io/github/release/itning/sports-mall-client.svg)](https://github.com/itning/sports-mall-client/releases)
 12 | [![GitHub repo size in bytes](https://img.shields.io/github/repo-size/itning/sports-mall-client.svg)](https://github.com/itning/sports-mall-client)
 13 | [![HitCount](http://hits.dwyl.com/itning/sports-mall-client.svg)](http://hits.dwyl.com/itning/sports-mall-client)
 14 | [![language](https://img.shields.io/badge/language-Vue-green.svg)](https://github.com/itning/sports-mall-client)
 15 | 
 16 | ## 架构：
 17 | - MySQL 8
 18 | - Java 8
 19 | - Spring Boot 2
 20 | - Vue.JS
 21 | 
 22 | ## 功能
 23 | 
 24 | - 垂直/水平轮播图展示管理
 25 | - 商品分类展示管理
 26 | - 商品搜索
 27 | - 推荐商品管理展示
 28 | - 订单管理
 29 | - 购物车管理
 30 | - 登录注册
 31 | - 商品评论展示
 32 | - 商品详情信息展示
 33 | - 商品介绍跑马灯
 34 | 
 35 | ## 部署
 36 | 
 37 | 1. 使用git克隆项目（[Git是什么，如何使用？](https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/)）
 38 | 
 39 |    ```bash
 40 |    # 克隆后端文件到本地磁盘
 41 |    git clone https://github.com/itning/sports-mall-server
 42 |    # 克隆前端文件到本地磁盘
 43 |    git clone https://github.com/itning/sports-mall-client
 44 |    ```
 45 | 
 46 | 2. 打开前端文件夹
 47 | 
 48 |    安装之前确保你有[node.js](https://nodejs.org/zh-cn/)和[yarn](https://classic.yarnpkg.com/zh-Hans/docs/install/#windows-stable)
 49 | 
 50 |    ```bash
 51 |    # 如果已经在前端文件夹内了，则不需要这个命令
 52 |    cd sports-mall-client
 53 |    # 安装依赖
 54 |    yarn install
 55 |    ```
 56 | 
 57 | 3. 后端建议使用[idea](https://www.jetbrains.com/idea/)打开本项目，不建议使用Eclipse或MyEclipse
 58 | 
 59 |    确保你有[maven](https://maven.apache.org/download.cgi)，并执行编译命令
 60 | 
 61 |    ```bash
 62 |    mvn clean compile
 63 |    ```
 64 | 
 65 |    不出意外会出现`BUILD SUCCESS`
 66 | 
 67 | 4. 数据库密码在哪改？
 68 | 
 69 |    [在这](https://github.com/itning/sports-mall-server/blob/master/src/main/resources/application.properties#L22)
 70 | 
 71 | 5. 前端接口域名在哪改？
 72 | 
 73 |    [在这](https://github.com/itning/sports-mall-client/blob/master/src/api/index.js#L1)
 74 | 
 75 | 6. 登录管理员账户？
 76 | 
 77 |    ```sql
 78 |    # 先插入管理员账户数据 用户名：admin 密码：admin
 79 |    INSERT INTO `mail_user` VALUES ('admin', NULL, 'admin@admin.co', '2020-02-13 11:31:24.451000', '2020-02-13 11:31:24.451000', 'admin', '17588755691', '1');
 80 |    ```
 81 | 
 82 | 7. 运行项目：
 83 | 
 84 |    后端[main方法](https://github.com/itning/sports-mall-server/blob/master/src/main/java/com/sport/sportsmallserver/SportsMailServerApplication.java#L9)直接运行
 85 | 
 86 |    前端执行以下命令进行开发运行
 87 | 
 88 |    ```bash
 89 |    yarn serve
 90 |    ```
 91 | 
 92 | 8. 数据库SQL文件？
 93 | 
 94 |    JPA自动建库建表不需要SQL文件。
 95 | 
 96 | ## 项目预览
 97 | 
 98 | ![a](https://raw.githubusercontent.com/itning/sports-mall-server/master/pic/1.png)
 99 | 
100 | ![b](https://raw.githubusercontent.com/itning/sports-mall-server/master/pic/2.png)
101 | 
102 | ![c](https://raw.githubusercontent.com/itning/sports-mall-server/master/pic/3.png)
103 | 
104 | ![d](https://raw.githubusercontent.com/itning/sports-mall-server/master/pic/4.png)
105 | 
106 | ![e](https://raw.githubusercontent.com/itning/sports-mall-server/master/pic/5.png)
107 | 
108 | ![f](https://raw.githubusercontent.com/itning/sports-mall-server/master/pic/6.png)
109 | 


--------------------------------------------------------------------------------
/src/views/ConfirmOrder.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="confirm-box box-shadow box-radius">
  3 |     <p class="confirm-title">确认订单：</p>
  4 |     <a-row type="flex" justify="space-around" align="middle">
  5 |       <a-col :span="2">
  6 |         <img class="confirm-img"
  7 |              :src="productData.imgMain"
  8 |              alt="">
  9 |       </a-col>
 10 |       <a-col :span="10">
 11 |         {{productData.name}}
 12 |       </a-col>
 13 |       <a-col :span="5">
 14 |         <p>数量：
 15 |           <a-input-number size="small" :min="1" :max="100000" :defaultValue="Number(produceCount)"
 16 |                           @change="onCountChange"/>
 17 |         </p>
 18 |       </a-col>
 19 |       <a-col :span="5"><p>单价：￥{{productData.price}}</p></a-col>
 20 |     </a-row>
 21 |     <div class="confirm-address-box">
 22 |       <p>收货地址：
 23 |         <a-config-provider :autoInsertSpaceInButton="false">
 24 |           <a-button type="link" @click="handleModifyAddress">{{addressReadOnly?'修改':'保存'}}</a-button>
 25 |         </a-config-provider>
 26 |       </p>
 27 |       <a-textarea placeholder="在此填写收货地址" autoSize :read-only="addressReadOnly" ref="addressTextarea" v-model="address"/>
 28 |     </div>
 29 |     <div class="confirm-btn">
 30 |       <a-button type="primary" @click="handleOrder" :loading="loading.order">立即下单</a-button>
 31 |     </div>
 32 |   </div>
 33 | </template>
 34 | 
 35 | <script>
 36 |   import {Get, Patch, Post} from "@itning/axios-helper";
 37 |   import {API} from "../api";
 38 | 
 39 |   export default {
 40 |     name: "ConfirmOrder",
 41 |     data() {
 42 |       return {
 43 |         // 商品ID
 44 |         productId: null,
 45 |         // 商品购买数量
 46 |         produceCount: null,
 47 |         // 收货地址框只读
 48 |         addressReadOnly: true,
 49 |         // 商品数据
 50 |         productData: {},
 51 |         // 收货地址
 52 |         address: '',
 53 |         loading: {
 54 |           order: false
 55 |         }
 56 |       }
 57 |     },
 58 |     methods: {
 59 |       onCountChange(value) {
 60 |         console.log('changed', value);
 61 |         this.produceCount = value;
 62 |       },
 63 |       handleModifyAddress() {
 64 |         this.addressReadOnly = !this.addressReadOnly;
 65 |         if (this.addressReadOnly) {
 66 |           Patch(API.user.modify)
 67 |             .withSuccessCode(204)
 68 |             .withErrorStartMsg("修改地址失败：")
 69 |             .withJson({address: this.address})
 70 |             .do(response => {
 71 |               this.$message.success('保存成功');
 72 |             })
 73 |         } else {
 74 |           this.$refs.addressTextarea.focus();
 75 |         }
 76 |       },
 77 |       initProductDetail() {
 78 |         Get(API.commodity.one + this.productId)
 79 |           .withSuccessCode(200)
 80 |           .withErrorStartMsg("商品加载失败；")
 81 |           .do(response => {
 82 |             this.productData = response.data.data;
 83 |           })
 84 |           .withErrorHandle(errorResponse => {
 85 |             this.$router.back();
 86 |           })
 87 |       },
 88 |       handleOrder() {
 89 |         Post(API.order.add)
 90 |           .withSuccessCode(201)
 91 |           .withErrorStartMsg("下单失败：")
 92 |           .withURLSearchParams({commodityId: this.productId, count: this.produceCount, address: this.address})
 93 |           .do(response => {
 94 |             this.$message.success("下单成功");
 95 |             this.$router.replace("/order").catch(error => {
 96 |             });
 97 |           })
 98 |       }
 99 |     },
100 |     created() {
101 |       this.productId = this.$route.params.id;
102 |       this.produceCount = this.$route.params.count;
103 |       this.initProductDetail();
104 |       this.address = this.$user.loginUser().address;
105 |     }
106 |   }
107 | </script>
108 | 
109 | <style scoped>
110 |   .confirm-box {
111 |     background-color: #fff;
112 |     padding: 24px;
113 |     margin-bottom: 12px;
114 |   }
115 | 
116 |   .confirm-btn {
117 |     display: flex;
118 |     flex-direction: row-reverse;
119 |   }
120 | 
121 |   .confirm-title {
122 |     margin: 24px 6px;
123 |   }
124 | 
125 |   .confirm-img {
126 |     width: 80px;
127 |     height: 80px;
128 |   }
129 | 
130 |   .confirm-address-box {
131 |     margin: 24px 6px;
132 |   }
133 | 
134 |   .confirm-address-box p {
135 |     margin-bottom: 12px;
136 |   }
137 | </style>
138 | 


--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div style="position:relative;">
  3 |     <div style="height: 50px">
  4 |       <a-row type="flex" justify="space-around">
  5 |         <a-col :span="4" style="line-height: 50px">体育用品商城</a-col>
  6 |         <a-col :span="4"></a-col>
  7 |       </a-row>
  8 |     </div>
  9 |     <div v-bind:style="{'background-image':backgroudImage}" class="login-box">
 10 |       <a-form
 11 |         :form="form"
 12 |         class="login-form"
 13 |         @submit="handleSubmit"
 14 |       >
 15 |         <a-form-item>
 16 |           <a-input
 17 |             v-decorator="[
 18 |           'username',
 19 |           { rules: [{ required: true, message: '请输入用户名' }] },
 20 |         ]"
 21 |             placeholder="用户名"
 22 |           >
 23 |             <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
 24 |           </a-input>
 25 |         </a-form-item>
 26 |         <a-form-item>
 27 |           <a-input
 28 |             v-decorator="[
 29 |           'password',
 30 |           { rules: [{ required: true, message: '请输入密码!' }] },
 31 |         ]"
 32 |             type="password"
 33 |             placeholder="密码"
 34 |           >
 35 |             <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
 36 |           </a-input>
 37 |         </a-form-item>
 38 |         <a-form-item>
 39 |           <!--<router-link to="/forget_pwd" class="login-form-forgot">忘记密码</router-link>-->
 40 |           <a-button :loading="loading.login" type="primary" html-type="submit" class="login-form-button">登录</a-button>
 41 |           <router-link to="/reg">立即注册！</router-link>
 42 |           <router-link to="/" style="float: right">返回主页</router-link>
 43 |         </a-form-item>
 44 |       </a-form>
 45 |     </div>
 46 |   </div>
 47 | </template>
 48 | 
 49 | <script>
 50 |   import {Post} from "@itning/axios-helper";
 51 |   import {API} from "../api";
 52 |   import {analyze, LOCAL_STORAGE_KEY} from "../user";
 53 | 
 54 |   export default {
 55 |     name: "Login",
 56 |     data: () => ({
 57 |       backgroudImage: "url('./background.jpeg')",
 58 |       loading: {
 59 |         login: false
 60 |       }
 61 |     }),
 62 |     methods: {
 63 |       handleSubmit(e) {
 64 |         e.preventDefault();
 65 |         this.form.validateFields((err, values) => {
 66 |           if (!err) {
 67 |             this.loading.login = true;
 68 |             Post(API.user.login)
 69 |               .withSuccessCode(200)
 70 |               .withURLSearchParams(values)
 71 |               .withErrorStartMsg("登陆失败：")
 72 |               .withOnceMsg()
 73 |               .do(response => {
 74 |                 console.log(response.data.data);
 75 |                 const roleId = analyze(response.data.data).role.id;
 76 |                 if (roleId === '1') {
 77 |                   window.localStorage.setItem(LOCAL_STORAGE_KEY, response.data.data);
 78 |                   window.location.href = window.location.protocol + '//' + window.location.host + "/admin";
 79 |                 } else {
 80 |                   window.localStorage.setItem(LOCAL_STORAGE_KEY, response.data.data);
 81 |                   let location = this.$store.state.now_path;
 82 |                   if (location === "" || location.startsWith('/admin')) {
 83 |                     location = window.location.protocol + '//' + window.location.host;
 84 |                   }
 85 |                   window.location.href = location;
 86 |                 }
 87 |               })
 88 |               .doAfter(() => {
 89 |                 this.loading.login = false;
 90 |               })
 91 |           }
 92 |         });
 93 |       },
 94 |     },
 95 |     beforeCreate() {
 96 |       this.form = this.$form.createForm(this, {name: 'normal_login'});
 97 |     }
 98 |   }
 99 | </script>
100 | 
101 | <style scoped>
102 |   .login-box {
103 |     background-size: cover;
104 |     background-repeat: no-repeat;
105 |     background-position: center center;
106 |     width: 100%;
107 |     height: 600px;
108 |   }
109 | 
110 |   .login-form {
111 |     opacity: 0.9;
112 |     position: absolute;
113 |     bottom: 185px;
114 |     right: 80px;
115 |     padding: 24px;
116 |     min-width: 320px;
117 |     background-color: #f0f0f0;
118 |   }
119 | 
120 |   .login-form-forgot {
121 |     float: right;
122 |   }
123 | 
124 |   .login-form-button {
125 |     width: 100%;
126 |   }
127 | </style>
128 | 


--------------------------------------------------------------------------------
/src/views/Personal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="personal-box box-shadow box-radius">
  3 |     <div class="personal-item">
  4 |       <p>
  5 |         <a-icon type="right"/>
  6 |         更改密码：
  7 |       </p>
  8 |       <a-input-password style="margin-bottom: 6px;" placeholder="在此输入旧密码.." v-model="userData.oldPwd"/>
  9 |       <a-input-password style="margin-bottom: 6px;" placeholder="在此输入新密码.." v-model="userData.newPwd"/>
 10 |       <a-input-password placeholder="再输入一次新密码.." v-model="userData.confimPwd"/>
 11 |       <a-button type="primary" class="personal-btn" @click="handleBtnClick('password')">保存</a-button>
 12 |     </div>
 13 |     <div class="personal-item">
 14 |       <p>
 15 |         <a-icon type="right"/>
 16 |         更改邮箱：
 17 |       </p>
 18 |       <a-input placeholder="在此输入..." v-model="userData.email"/>
 19 |       <a-button type="primary" class="personal-btn" @click="handleBtnClick('email')">保存</a-button>
 20 |     </div>
 21 |     <div class="personal-item">
 22 |       <p>
 23 |         <a-icon type="right"/>
 24 |         更改手机号：
 25 |       </p>
 26 |       <a-input placeholder="在此输入..." v-model="userData.tel"/>
 27 |       <a-button type="primary" class="personal-btn" @click="handleBtnClick('phone')">保存</a-button>
 28 |     </div>
 29 |     <div class="personal-item">
 30 |       <p>
 31 |         <a-icon type="right"/>
 32 |         更改收货地址：
 33 |       </p>
 34 |       <a-textarea v-model="userData.address"/>
 35 |       <a-button type="primary" class="personal-btn" @click="handleBtnClick('address')">保存</a-button>
 36 |     </div>
 37 |   </div>
 38 | </template>
 39 | 
 40 | <script>
 41 |   import {Patch, Post} from "@itning/axios-helper";
 42 |   import {API} from "../api";
 43 | 
 44 |   export default {
 45 |     name: "Personal",
 46 |     data: () => ({
 47 |       userData: {}
 48 |     }),
 49 |     methods: {
 50 |       handleBtnClick(key) {
 51 |         switch (key) {
 52 |           case 'password': {
 53 |             if (this.userData.newPwd !== this.userData.confimPwd) {
 54 |               this.$message.error("密码不一致");
 55 |             } else {
 56 |               if (this.userData.newPwd.trim() === "") {
 57 |                 this.$message.error("不能为空");
 58 |               } else {
 59 |                 Post(API.user.pwd)
 60 |                   .withSuccessCode(200)
 61 |                   .withErrorStartMsg("密码修改失败：")
 62 |                   .withURLSearchParams({oldPwd: this.userData.oldPwd, newPwd: this.userData.newPwd})
 63 |                   .do(response => {
 64 |                     this.userData.oldPwd = '';
 65 |                     this.userData.newPwd = '';
 66 |                     this.userData.confimPwd = '';
 67 |                     this.$message.success("密码修改成功");
 68 |                   })
 69 |               }
 70 |             }
 71 |             break;
 72 |           }
 73 |           case 'email': {
 74 |             if (this.userData.email.trim() === "") {
 75 |               this.$message.error("不能为空");
 76 |               return;
 77 |             }
 78 |             this.changeUserInfo({email: this.userData.email}, "更改邮箱失败：");
 79 |             break;
 80 |           }
 81 |           case 'phone': {
 82 |             if (this.userData.tel.trim() === "") {
 83 |               this.$message.error("不能为空");
 84 |               return;
 85 |             }
 86 |             this.changeUserInfo({tel: this.userData.tel}, "更改电话失败：");
 87 |             break;
 88 |           }
 89 |           case 'address': {
 90 |             if (this.userData.address.trim() === "") {
 91 |               this.$message.error("不能为空");
 92 |               return;
 93 |             }
 94 |             this.changeUserInfo({address: this.userData.address}, "更改收货地址失败：");
 95 |             break;
 96 |           }
 97 |         }
 98 |       },
 99 |       changeUserInfo(obj, errorMsg) {
100 |         Patch(API.user.modify)
101 |           .withSuccessCode(204)
102 |           .withErrorStartMsg(errorMsg)
103 |           .withJson(obj)
104 |           .do(response => {
105 |             this.$message.success('保存成功');
106 |           })
107 |       }
108 |     },
109 |     created() {
110 |       this.userData = this.$user.loginUser();
111 |     }
112 |   }
113 | </script>
114 | 
115 | <style scoped>
116 |   .personal-box {
117 |     background-color: #fff;
118 |     padding: 12px;
119 |     margin-bottom: 12px;
120 |   }
121 | 
122 |   .personal-btn {
123 |     margin: 12px 0;
124 |   }
125 | 
126 |   .personal-item {
127 |     margin: 12px;
128 |   }
129 | </style>
130 | 


--------------------------------------------------------------------------------
/src/views/Search.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="search-box">
  3 |     <p class="search-info">搜索 ”{{keyword}}“ 共有{{data.length}}件</p>
  4 |     <a-empty v-if="loading.empty"/>
  5 |     <div v-if="!loading.empty">
  6 |       <div style="height: 40px;padding-left: 12px">
  7 |         <a-radio-group defaultValue="gmtModified" buttonStyle="solid" @change="handleSortRadioChange">
  8 |           <a-radio-button value="gmtModified">综合排序</a-radio-button>
  9 |           <a-radio-button value="sales,desc">销量排序</a-radio-button>
 10 |           <a-radio-button value="price,desc">价格从高到低排序</a-radio-button>
 11 |           <a-radio-button value="price">价格从低到高排序</a-radio-button>
 12 |         </a-radio-group>
 13 |       </div>
 14 |       <div class="commodity-items">
 15 |         <CommodityItem v-for="item in data" :key="item.id" :id="item.id" :img="item.imgMain" :sales="item.sales"
 16 |                        :price="item.price"
 17 |                        :title="item.name"/>
 18 |         <i></i><i></i><i></i><i></i><i></i>
 19 |       </div>
 20 |       <div class="search-pagination">
 21 |         <a-pagination showSizeChanger
 22 |                       @showSizeChange="onShowSizeChange"
 23 |                       @change="onPageChange"
 24 |                       :total="pagination.totalElements"
 25 | 
 26 |         />
 27 |       </div>
 28 |     </div>
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script>
 33 |   import CommodityItem from "../components/CommodityItem";
 34 |   import {Get} from "@itning/axios-helper";
 35 |   import {API} from "../api";
 36 |   import moment from "moment";
 37 | 
 38 |   export default {
 39 |     name: "Search",
 40 |     components: {CommodityItem},
 41 |     data() {
 42 |       return {
 43 |         keyword: null,
 44 |         pagination: {
 45 |           // 数据总数
 46 |           totalElements: 0,
 47 |           // 页码
 48 |           page: 1,
 49 |           // 每页数量
 50 |           size: 10,
 51 |           // 排序
 52 |           sort: 'gmtModified'
 53 |         },
 54 |         loading: {
 55 |           empty: false
 56 |         },
 57 |         data: []
 58 |       }
 59 |     },
 60 |     watch: {
 61 |       keyword: function () {
 62 |         this.initProduceData();
 63 |       }
 64 |     },
 65 |     methods: {
 66 |       handleSortRadioChange(e) {
 67 |         this.pagination.sort = e.target.value;
 68 |         this.initProduceData();
 69 |       },
 70 |       onShowSizeChange(current, pageSize) {
 71 |         this.pagination.page = current;
 72 |         this.pagination.size = pageSize;
 73 |         this.initProduceData();
 74 |       },
 75 |       onPageChange(page, pageSize) {
 76 |         this.pagination.page = page;
 77 |         this.pagination.size = pageSize;
 78 |         this.initProduceData();
 79 |       },
 80 |       initProduceData() {
 81 |         Get(`${API.commodity.search}${this.keyword}?page=${this.pagination.page - 1}&size=${this.pagination.size}&sort=${this.pagination.sort}`)
 82 |           .withSuccessCode(200)
 83 |           .withErrorStartMsg("搜索失败：")
 84 |           .do(response => {
 85 |             this.pagination.totalElements = response.data.data.totalElements;
 86 |             if (response.data.data.content.length === 0) {
 87 |               this.loading.empty = true;
 88 |               this.data = [];
 89 |             } else {
 90 |               this.loading.empty = false;
 91 |               this.data = response.data.data.content.map(item => {
 92 |                 item.time = moment(item.gmtModified).format("YYYY年MM月DD日 HH:mm:ss");
 93 |                 return item;
 94 |               });
 95 |             }
 96 |           })
 97 |       }
 98 |     },
 99 |     created() {
100 |       this.keyword = this.$route.params.keyword;
101 |     },
102 |     beforeRouteUpdate(to, from, next) {
103 |       this.keyword = to.params.keyword;
104 |       next();
105 |     }
106 |   }
107 | </script>
108 | 
109 | <style scoped>
110 |   .search-box {
111 |     background-color: #fff;
112 |     min-height: 200px;
113 |   }
114 | 
115 |   .search-info {
116 |     padding: 12px;
117 |     color: #9ca0aa;
118 |     font-size: 1em;
119 |     height: 12px;
120 |     line-height: 12px;
121 |   }
122 | 
123 |   .search-pagination {
124 |     padding-bottom: 24px;
125 |     display: flex;
126 |     justify-content: flex-end;
127 |   }
128 | 
129 |   .commodity-items {
130 |     display: flex;
131 |     flex-direction: row;
132 |     flex-wrap: wrap;
133 |     justify-content: space-between;
134 |     margin: 0 12px;
135 |   }
136 | 
137 |   .commodity-items > i {
138 |     width: 238px;
139 |     margin-right: 10px;
140 |   }
141 | </style>
142 | 


--------------------------------------------------------------------------------
/src/views/ProductType.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="product-type-box">
  3 |     <a-spin :spinning="loading.all">
  4 |       <p class="product-type-info">{{typeName}}分类商品 共计：{{data.length}}</p>
  5 |       <a-empty v-if="showEmpty">
  6 |         <span slot="description">该分类下没有商品</span>
  7 |         <a-button type="primary" @click="handleReturnPageBtnClick">返回</a-button>
  8 |       </a-empty>
  9 |       <div v-if="data.length!==0">
 10 |         <div style="height: 40px;padding-left: 12px">
 11 |           <a-radio-group defaultValue="gmtModified" buttonStyle="solid" @change="handleSortRadioChange">
 12 |             <a-radio-button value="gmtModified">综合排序</a-radio-button>
 13 |             <a-radio-button value="sales,desc">销量排序</a-radio-button>
 14 |             <a-radio-button value="price,desc">价格从高到低排序</a-radio-button>
 15 |             <a-radio-button value="price">价格从低到高排序</a-radio-button>
 16 |           </a-radio-group>
 17 |         </div>
 18 |         <a-spin :spinning="loading.item">
 19 |           <div class="commodity-items">
 20 |             <CommodityItem v-for="item in data" :key="item.id" :id="item.id" :img="item.imgMain" :sales="item.sales"
 21 |                            :price="item.price"
 22 |                            :title="item.name"/>
 23 |             <i></i><i></i><i></i><i></i><i></i>
 24 |           </div>
 25 |         </a-spin>
 26 |         <div class="product-type-pagination">
 27 |           <a-pagination showSizeChanger
 28 |                         @showSizeChange="onShowSizeChange"
 29 |                         @change="onPageChange"
 30 |                         :total="pagination.totalElements"
 31 | 
 32 |           />
 33 |         </div>
 34 |       </div>
 35 |     </a-spin>
 36 |   </div>
 37 | </template>
 38 | 
 39 | <script>
 40 |   import CommodityItem from "../components/CommodityItem";
 41 |   import {Get} from "@itning/axios-helper";
 42 |   import {API} from "../api";
 43 | 
 44 |   export default {
 45 |     name: "ProductType",
 46 |     components: {CommodityItem},
 47 |     data() {
 48 |       return {
 49 |         // 商品分类ID
 50 |         id: null,
 51 |         pagination: {
 52 |           // 数据总数
 53 |           totalElements: 0,
 54 |           // 页码
 55 |           page: 1,
 56 |           // 每页数量
 57 |           size: 10,
 58 |           // 排序
 59 |           sort: 'gmtModified'
 60 |         },
 61 |         // 商品数据
 62 |         data: [],
 63 |         // 商品分类名
 64 |         typeName: '',
 65 |         // 显示空状态
 66 |         showEmpty: false,
 67 |         // 加载进度
 68 |         loading: {all: true, item: true}
 69 |       }
 70 |     },
 71 |     methods: {
 72 |       handleReturnPageBtnClick() {
 73 |         this.$router.back();
 74 |       },
 75 |       handleSortRadioChange(e) {
 76 |         this.pagination.sort = e.target.value;
 77 |         this.initAllCommodityByType();
 78 |       },
 79 |       onShowSizeChange(current, pageSize) {
 80 |         this.pagination.page = current;
 81 |         this.pagination.size = pageSize;
 82 |         this.initAllCommodityByType();
 83 |       },
 84 |       onPageChange(page, pageSize) {
 85 |         this.pagination.page = page;
 86 |         this.pagination.size = pageSize;
 87 |         this.initAllCommodityByType();
 88 |       },
 89 |       initAllCommodityByType() {
 90 |         this.loading.item = true;
 91 |         Get(`${API.commodity.type}?typeId=${this.id}&page=${this.pagination.page - 1}&size=${this.pagination.size}&sort=${this.pagination.sort}`)
 92 |           .withSuccessCode(200)
 93 |           .withErrorStartMsg("获取分类商品失败：")
 94 |           .do(response => {
 95 |             this.data = response.data.data.content;
 96 |             this.pagination.totalElements = response.data.data.totalElements;
 97 |             if (this.data.length !== 0) {
 98 |               this.typeName = this.data[0].commodityType.name;
 99 |             } else {
100 |               this.showEmpty = true;
101 |             }
102 |           })
103 |           .doAfter(() => {
104 |             this.loading.all = false;
105 |             this.loading.item = false;
106 |           })
107 |       }
108 |     },
109 |     created() {
110 |       this.id = this.$route.params.id;
111 |       this.initAllCommodityByType();
112 |     },
113 |     beforeRouteUpdate(to, from, next) {
114 |       this.id = to.params.id;
115 |       next();
116 |     }
117 |   }
118 | </script>
119 | 
120 | <style scoped>
121 |   .product-type-box {
122 |     min-height: 250px;
123 |     background-color: #fff;
124 |   }
125 | 
126 |   .product-type-info {
127 |     padding: 12px;
128 |     color: #9ca0aa;
129 |     font-size: 1em;
130 |     height: 12px;
131 |     line-height: 12px;
132 |   }
133 | 
134 |   .product-type-pagination {
135 |     padding-bottom: 24px;
136 |     display: flex;
137 |     justify-content: flex-end;
138 |   }
139 | 
140 |   .commodity-items {
141 |     display: flex;
142 |     flex-direction: row;
143 |     flex-wrap: wrap;
144 |     justify-content: space-between;
145 |     margin: 0 12px;
146 |   }
147 | 
148 |   .commodity-items > i {
149 |     width: 238px;
150 |     margin-right: 10px;
151 |   }
152 | </style>
153 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import VueRouter from 'vue-router'
  3 | import Vuex from '../store'
  4 | import MainIndex from "../views/MainIndex";
  5 | import MainView from "../views/MainView";
  6 | import User, {LOCAL_STORAGE_KEY} from "../user";
  7 | import AdminIndex from "../views/AdminIndex";
  8 | 
  9 | Vue.use(VueRouter);
 10 | 
 11 | const routes = [
 12 |   {
 13 |     path: '/',
 14 |     component: MainIndex,
 15 |     children: [
 16 |       {
 17 |         path: '',
 18 |         components: {
 19 |           subContent: MainView
 20 |         }
 21 |       },
 22 |       {
 23 |         path: 'search/:keyword',
 24 |         components: {
 25 |           subContent: () => import(/* webpackChunkName: "Search" */ '../views/Search.vue')
 26 |         }
 27 |       },
 28 |       {
 29 |         path: 'product_type/:id',
 30 |         components: {
 31 |           subContent: () => import(/* webpackChunkName: "ProductType" */ '../views/ProductType.vue')
 32 |         }
 33 |       },
 34 |       {
 35 |         path: 'order',
 36 |         components: {
 37 |           subContent: () => import(/* webpackChunkName: "Order" */ '../views/Order.vue')
 38 |         }
 39 |       },
 40 |       {
 41 |         path: 'cart',
 42 |         components: {
 43 |           subContent: () => import(/* webpackChunkName: "Cart" */ '../views/Cart.vue')
 44 |         }
 45 |       },
 46 |       {
 47 |         path: 'product_detail/:id',
 48 |         components: {
 49 |           subContent: () => import(/* webpackChunkName: "ProductDetail" */ '../views/ProductDetail.vue')
 50 |         },
 51 |         children: [
 52 |           {
 53 |             path: '',
 54 |             components: {
 55 |               product: () => import(/* webpackChunkName: "ProduceDetailIntroduction" */ '../views/ProduceDetailIntroduction.vue')
 56 |             }
 57 |           },
 58 |           {
 59 |             path: 'comment',
 60 |             components: {
 61 |               product: () => import(/* webpackChunkName: "ProduceDetailComment" */ '../views/ProduceDetailComment.vue')
 62 |             }
 63 |           }
 64 |         ]
 65 |       },
 66 |       {
 67 |         path: 'confirm_order/:id/:count',
 68 |         components: {
 69 |           subContent: () => import(/* webpackChunkName: "ConfirmOrder" */ '../views/ConfirmOrder.vue')
 70 |         }
 71 |       },
 72 |       {
 73 |         path: 'personal',
 74 |         components: {
 75 |           subContent: () => import(/* webpackChunkName: "Personal" */ '../views/Personal.vue')
 76 |         }
 77 |       }
 78 |     ]
 79 |   },
 80 |   {
 81 |     path: '/admin',
 82 |     component: AdminIndex,
 83 |     children: [
 84 |       {
 85 |         path: '',
 86 |         redirect: 'product'
 87 |       },
 88 |       {
 89 |         path: 'productType',
 90 |         components: {
 91 |           subContent: () => import(/* webpackChunkName: "AdminProductType" */ '../views/AdminProductType.vue')
 92 |         }
 93 |       },
 94 |       {
 95 |         path: 'carousel',
 96 |         components: {
 97 |           subContent: () => import(/* webpackChunkName: "AdminCarousel" */ '../views/AdminCarousel.vue')
 98 |         }
 99 |       },
100 |       {
101 |         path: 'order',
102 |         components: {
103 |           subContent: () => import(/* webpackChunkName: "AdminOrder" */ '../views/AdminOrder.vue')
104 |         }
105 |       },
106 |       {
107 |         path: 'product',
108 |         components: {
109 |           subContent: () => import(/* webpackChunkName: "AdminProduct" */ '../views/AdminProduct.vue')
110 |         }
111 |       },
112 |       {
113 |         path: 'product_new',
114 |         components: {
115 |           subContent: () => import(/* webpackChunkName: "AdminProductNew" */ '../views/AdminProductNew.vue')
116 |         }
117 |       }
118 |     ],
119 |   },
120 |   {
121 |     path: '/login',
122 |     name: 'Login',
123 |     component: () => import(/* webpackChunkName: "Login" */ '../views/Login.vue')
124 |   },
125 |   {
126 |     path: '/reg',
127 |     name: 'Registration',
128 |     component: () => import(/* webpackChunkName: "Registration" */ '../views/Registration.vue')
129 |   },
130 |   {
131 |     path: '/forget_pwd',
132 |     name: 'ForgetPassword',
133 |     component: () => import(/* webpackChunkName: "ForgetPassword" */ '../views/ForgetPassword.vue')
134 |   },
135 |   {
136 |     path: '*',
137 |     redirect: '/'
138 |   }
139 | ];
140 | 
141 | const router = new VueRouter({
142 |   mode: 'history',
143 |   base: process.env.BASE_URL,
144 |   routes
145 | });
146 | 
147 | router.beforeEach((to, from, next) => {
148 |   if (to.path === "/login" ||
149 |     to.path === "/reg" ||
150 |     to.path === "/" ||
151 |     to.path === '/forget_pwd') {
152 |     next();
153 |     return;
154 |   }
155 |   if (to.path.startsWith("/admin")) {
156 |     if (!localStorage.getItem(LOCAL_STORAGE_KEY)) {
157 |       next("/login");
158 |     } else {
159 |       if (User.loginUser().role.id === '1') {
160 |         next();
161 |       } else {
162 |         next('/login');
163 |       }
164 |     }
165 |     return;
166 |   }
167 |   next();
168 | });
169 | 
170 | router.afterEach((to, from) => {
171 |   if (to.path === "/login" ||
172 |     to.path === "/reg" ||
173 |     to.path === "/forget_pwd") {
174 |     return;
175 |   }
176 |   Vuex.state.now_path = to.path;
177 | });
178 | 
179 | export default router
180 | 


--------------------------------------------------------------------------------
/src/views/ProductDetail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="product-box box-shadow box-radius">
  3 |     <a-row type="flex" justify="space-around" align="top" style="margin-top: 12px">
  4 |       <a-col :span="10">
  5 |         <ProductDetailCarousel :imgs="imgs"/>
  6 |       </a-col>
  7 |       <a-col :span="14" class="product-info">
  8 |         <div class="product-title">{{productData.name}}</div>
  9 |         <div class="product-price">价格：￥<span>{{productData.price}}</span></div>
 10 |         <div>数量：
 11 |           <a-input-number size="small" :min="1" :max="100000" :defaultValue="productCount" @change="onCountChange"/>
 12 |           <span>&nbsp;件</span>
 13 |         </div>
 14 |         <div>
 15 |           <span>库存：<span style="color: red">{{productData.stock}}</span></span>
 16 |         </div>
 17 |         <div>
 18 |           <span>销量：<span style="color: red">{{productData.sales}}</span></span>
 19 |         </div>
 20 |         <div>
 21 |           <a-button type="primary" @click="handleBuyBtnClick">立即购买</a-button>
 22 |           <a-button @click="handleAddToCartBtnClick">加入购物车</a-button>
 23 |         </div>
 24 |       </a-col>
 25 |     </a-row>
 26 |     <div style="margin-top: 80px;padding-left: 24px">
 27 |       <a-radio-group defaultValue="a" @change="onProductRadioChange">
 28 |         <a-radio-button value="a">商品详情</a-radio-button>
 29 |         <a-radio-button value="b">累计评价</a-radio-button>
 30 |       </a-radio-group>
 31 |     </div>
 32 |     <div style="margin: 24px">
 33 |       <router-view name="product"/>
 34 |     </div>
 35 |   </div>
 36 | </template>
 37 | 
 38 | <script>
 39 |   import ProductDetailCarousel from "../components/ProductDetailCarousel";
 40 |   import {Get, Post} from "@itning/axios-helper";
 41 |   import {API} from "../api";
 42 | 
 43 |   export default {
 44 |     name: "ProductDetail",
 45 |     components: {ProductDetailCarousel},
 46 |     data() {
 47 |       return {
 48 |         productId: null,
 49 |         productCount: 1,
 50 |         imgs: [],
 51 |         productData: {}
 52 |       }
 53 |     },
 54 |     methods: {
 55 |       onCountChange(value) {
 56 |         console.log('changed', value);
 57 |         this.productCount = value;
 58 |       },
 59 |       onProductRadioChange(e) {
 60 |         if (e.target.value === "a") {
 61 |           this.$router.push("/product_detail/" + this.productId).catch(err => {
 62 |           });
 63 |         } else {
 64 |           this.$router.push("/product_detail/" + this.productId + "/comment").catch(err => {
 65 |           });
 66 |         }
 67 |         window.scrollTo(0, 0);
 68 |       },
 69 |       handleBuyBtnClick() {
 70 |         this.$router.push(`/confirm_order/${this.productId}/${this.productCount}`).catch(err => {
 71 |         });
 72 |       },
 73 |       initProductDetail() {
 74 |         Get(API.commodity.one + this.productId)
 75 |           .withSuccessCode(200)
 76 |           .withErrorStartMsg("商品加载失败；")
 77 |           .do(response => {
 78 |             this.productData = response.data.data;
 79 |             this.imgs = this.productData.imgSecond.split(";");
 80 |           })
 81 |           .doAfter(() => {
 82 | 
 83 |           })
 84 |           .withErrorHandle(errorResponse => {
 85 |             this.$router.back();
 86 |           })
 87 |       },
 88 |       handleAddToCartBtnClick() {
 89 |         Post(API.cart.add)
 90 |           .withURLSearchParams({commodityId: this.productId, num: this.productCount})
 91 |           .withSuccessCode(201)
 92 |           .withErrorStartMsg("加入失败：")
 93 |           .do(response => {
 94 |             const key = `open${Date.now()}`;
 95 |             this.$notification.open({
 96 |               message: '加入成功',
 97 |               description:
 98 |                 `购物车有${response.data.data.countNum}件该商品`,
 99 |               btn: h => {
100 |                 return h(
101 |                   'a-button',
102 |                   {
103 |                     props: {
104 |                       type: 'primary',
105 |                       size: 'small',
106 |                     },
107 |                     on: {
108 |                       click: () => {
109 |                         this.$notification.close(key);
110 |                         this.$router.push("/cart").catch(err => {
111 |                         });
112 |                       },
113 |                     },
114 |                   },
115 |                   '打开购物车',
116 |                 );
117 |               },
118 |               key,
119 |               onClose: close,
120 |             });
121 |           })
122 |       }
123 |     },
124 |     created() {
125 |       this.productId = this.$route.params.id;
126 |       this.initProductDetail();
127 |     },
128 |     beforeRouteUpdate(to, from, next) {
129 |       this.productId = to.params.id;
130 |       next();
131 |     }
132 |   }
133 | </script>
134 | 
135 | <style scoped>
136 |   .product-box {
137 |     padding: 12px;
138 |     margin-bottom: 12px;
139 |     background-color: #fff;
140 |     min-height: 550px;
141 |   }
142 | 
143 |   .product-title {
144 |     font-size: 1.5em;
145 |     color: black;
146 |     font-weight: bold;
147 |   }
148 | 
149 |   .product-price {
150 |     color: red;
151 |   }
152 | 
153 |   .product-price span {
154 |     font-size: 2.5em;
155 |   }
156 | 
157 |   .product-info {
158 | 
159 |   }
160 | 
161 |   .product-info div {
162 |     margin-bottom: 24px;
163 |     max-width: 80%;
164 |   }
165 | 
166 |   .product-info button {
167 |     margin-right: 12px;
168 |     margin-top: 12px;
169 |   }
170 | </style>
171 | 


--------------------------------------------------------------------------------
/src/views/AdminCarousel.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <a-table bordered :dataSource="dataSource" :columns="columns" :pagination="false" :rowKey="'id'" :scroll="{x:true}">
  4 |       <template slot="url" slot-scope="text, record">
  5 |         <EditableCell :text="text" @change="onCellChange(record.id, 'url', $event)"/>
  6 |       </template>
  7 |       <template slot="link" slot-scope="text, record">
  8 |         <EditableCell :text="text" @change="onCellChange(record.id, 'link', $event)"/>
  9 |       </template>
 10 |       <template slot="type" slot-scope="text, record">
 11 |         <EditableCellSelect :values="[{value:'1',name:'水平'},{value:'2',name:'垂直'}]" :text="String(text)"
 12 |                             :s="record.typeCN"
 13 |                             @change="onCellChange(record.id, 'type', $event)"/>
 14 |       </template>
 15 |       <template slot="operation" slot-scope="text, record">
 16 |         <a-popconfirm
 17 |           v-if="dataSource.length"
 18 |           title="确定删除？"
 19 |           @confirm="() => onDelete(record.id)"
 20 |         >
 21 |           <a href="javascript:;">删除</a>
 22 |         </a-popconfirm>
 23 |       </template>
 24 |     </a-table>
 25 |     <a-button style="margin: 12px 0" @click="visible=!visible">添加</a-button>
 26 |     <a-modal
 27 |       title="新增走马灯"
 28 |       :visible="visible"
 29 |       @ok="handleAdd"
 30 |       :confirmLoading="confirmLoading"
 31 |       @cancel="visible=false"
 32 |     >
 33 |       <a-input placeholder="图片地址" v-model="newImg" style="margin-bottom: 12px"/>
 34 |       <a-input placeholder="对应链接" v-model="newLink" style="margin-bottom: 12px"/>
 35 |       <a-select defaultValue="1" v-model="newType">
 36 |         <a-select-option value="1">水平</a-select-option>
 37 |         <a-select-option value="2">竖直</a-select-option>
 38 |       </a-select>
 39 |     </a-modal>
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script>
 44 |   import {Delete, Get, Patch, Post} from "@itning/axios-helper";
 45 |   import {API} from "../api";
 46 |   import EditableCell from "../components/EditableCell";
 47 |   import EditableCellSelect from "../components/EditableCellSelect";
 48 | 
 49 |   export default {
 50 |     name: "AdminCarousel",
 51 |     components: {EditableCellSelect, EditableCell},
 52 |     data() {
 53 |       return {
 54 |         newType: '1',
 55 |         newImg: '',
 56 |         newLink: '',
 57 |         visible: false,
 58 |         confirmLoading: false,
 59 |         dataSource: [],
 60 |         count: 2,
 61 |         columns: [
 62 |           {
 63 |             title: '图片地址',
 64 |             dataIndex: 'url',
 65 |             scopedSlots: {customRender: 'url'},
 66 |           },
 67 |           {
 68 |             title: '对应链接',
 69 |             dataIndex: 'link',
 70 |             scopedSlots: {customRender: 'link'},
 71 |           },
 72 |           {
 73 |             title: '分类',
 74 |             dataIndex: 'type',
 75 |             scopedSlots: {customRender: 'type'},
 76 |           },
 77 |           {
 78 |             title: '操作',
 79 |             dataIndex: 'operation',
 80 |             scopedSlots: {customRender: 'operation'},
 81 |           },
 82 |         ],
 83 |       };
 84 |     },
 85 |     methods: {
 86 |       initAllCarousel() {
 87 |         Get(API.carousel.all)
 88 |           .withSuccessCode(200)
 89 |           .withErrorStartMsg("获取轮播图数据失败：")
 90 |           .do(response => {
 91 |             this.dataSource = response.data.data.map(item => {
 92 |               switch (item.type) {
 93 |                 case 1: {
 94 |                   item.typeCN = "水平";
 95 |                   break;
 96 |                 }
 97 |                 case 2: {
 98 |                   item.typeCN = "竖直";
 99 |                   break;
100 |                 }
101 |               }
102 |               return item;
103 |             });
104 |           })
105 |       },
106 |       onCellChange(key, dataIndex, value) {
107 |         console.log(key, dataIndex, value);
108 |         let modifyObj = {id: key};
109 |         modifyObj[dataIndex] = value;
110 |         Patch(API.carousel.modify)
111 |           .withSuccessCode(204)
112 |           .withErrorStartMsg("修改失败：")
113 |           .withJson(modifyObj)
114 |           .do(response => {
115 |             this.$message.success("修改成功");
116 |           })
117 |           .doAfter(() => {
118 |             this.initAllCarousel();
119 |           })
120 |       },
121 |       onDelete(key) {
122 |         Delete(API.carousel.del + key)
123 |           .withSuccessCode(204)
124 |           .withErrorStartMsg("删除失败：")
125 |           .do(response => {
126 |             this.$message.success("删除成功");
127 |           })
128 |           .doAfter(() => {
129 |             this.initAllCarousel();
130 |           })
131 |       },
132 |       handleAdd() {
133 |         Post(API.carousel.add)
134 |           .withSuccessCode(201)
135 |           .withErrorStartMsg("添加失败：")
136 |           .withURLSearchParams({url: this.newImg, link: this.newLink, type: this.newType})
137 |           .do(response => {
138 |             this.$message.success("添加成功");
139 |             this.newImg = '';
140 |             this.newLink = '';
141 |             this.newType = '1';
142 |           })
143 |           .doAfter(() => {
144 |             this.visible = false;
145 |             this.initAllCarousel();
146 |           })
147 |       },
148 |     },
149 |     created() {
150 |       this.initAllCarousel();
151 |     }
152 |   }
153 | </script>
154 | 
155 | <style scoped>
156 |   .ant-table td {
157 |     white-space: nowrap;
158 |   }
159 | </style>
160 | 


--------------------------------------------------------------------------------
/src/views/Registration.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <a-row type="flex" justify="space-around" style="background-color: #f0f2f5">
  4 |       <a-col :span="4" style="line-height: 50px">体育用品商城</a-col>
  5 |       <a-col :span="4" style="line-height: 50px">已有账号？
  6 |         <router-link to="/login">立即登录</router-link>
  7 |       </a-col>
  8 |     </a-row>
  9 |     <div class="reg-box">
 10 |       <a-steps :current="regStatusIndex" style="margin-bottom: 24px;width: 315px;">
 11 |         <a-step title="填写信息"/>
 12 |         <a-step title="注册成功"/>
 13 |       </a-steps>
 14 |       <a-form :form="form" @submit="handleSubmit">
 15 |         <a-form-item v-bind="formItemLayout">
 16 |       <span slot="label">
 17 |         用户名
 18 |       </span>
 19 |           <a-input
 20 |             v-decorator="[
 21 |           'username',
 22 |           {
 23 |             rules: [{ required: true, message: '请输入用户名!', whitespace: true }],
 24 |           },
 25 |         ]"
 26 |           />
 27 |         </a-form-item>
 28 |         <a-form-item v-bind="formItemLayout" label="邮箱">
 29 |           <a-input
 30 |             v-decorator="[
 31 |           'email',
 32 |           {
 33 |             rules: [
 34 |               {
 35 |                 type: 'email',
 36 |                 message: '有输入正确的邮箱地址!',
 37 |               },
 38 |               {
 39 |                 required: true,
 40 |                 message: '请输入邮箱!',
 41 |               },
 42 |             ],
 43 |           },
 44 |         ]"
 45 |           />
 46 |         </a-form-item>
 47 |         <a-form-item v-bind="formItemLayout" label="手机号">
 48 |           <a-input
 49 |             v-decorator="[
 50 |           'phone',
 51 |           {
 52 |             rules: [{ required: true, message: '请输入电话号码!' }, {
 53 |                 validator: validatorPhoneNumber,
 54 |               },],
 55 |           },
 56 |         ]"
 57 |             style="width: 100%"
 58 |           >
 59 |           </a-input>
 60 |         </a-form-item>
 61 |         <a-form-item v-bind="formItemLayout" label="密码">
 62 |           <a-input
 63 |             v-decorator="[
 64 |           'password',
 65 |           {
 66 |             rules: [
 67 |               {
 68 |                 required: true,
 69 |                 message: '请输入密码!',
 70 |               },
 71 |               {
 72 |                 validator: validateToNextPassword,
 73 |               },
 74 |             ],
 75 |           },
 76 |         ]"
 77 |             type="password"
 78 |           />
 79 |         </a-form-item>
 80 |         <a-form-item v-bind="formItemLayout" label="确认密码">
 81 |           <a-input
 82 |             v-decorator="[
 83 |           'confirm',
 84 |           {
 85 |             rules: [
 86 |               {
 87 |                 required: true,
 88 |                 message: '请输入确认密码!',
 89 |               },
 90 |               {
 91 |                 validator: compareToFirstPassword,
 92 |               },
 93 |             ],
 94 |           },
 95 |         ]"
 96 |             type="password"
 97 |             @blur="handleConfirmBlur"
 98 |           />
 99 |         </a-form-item>
100 |         <a-form-item v-bind="tailFormItemLayout">
101 |           <a-button type="primary" html-type="submit" :loading="loading">注册</a-button>
102 |           <a-button html-type="button" @click="handleReturnClick" style="margin-left: 8px">返回</a-button>
103 |         </a-form-item>
104 |       </a-form>
105 |     </div>
106 |   </div>
107 | </template>
108 | 
109 | <script>
110 |   import {Post} from "@itning/axios-helper";
111 |   import {API} from "../api";
112 | 
113 |   export default {
114 |     name: "Registration",
115 |     data() {
116 |       return {
117 |         loading: false,
118 |         regStatusIndex: 0,
119 |         confirmDirty: false,
120 |         formItemLayout: {
121 |           labelCol: {
122 |             xs: {span: 24},
123 |             sm: {span: 8},
124 |           },
125 |           wrapperCol: {
126 |             xs: {span: 24},
127 |             sm: {span: 16},
128 |           },
129 |         },
130 |         tailFormItemLayout: {
131 |           wrapperCol: {
132 |             xs: {
133 |               span: 24,
134 |               offset: 0,
135 |             },
136 |             sm: {
137 |               span: 16,
138 |               offset: 8,
139 |             },
140 |           },
141 |         },
142 |       };
143 |     },
144 |     methods: {
145 |       handleSubmit(e) {
146 |         e.preventDefault();
147 |         this.form.validateFieldsAndScroll((err, values) => {
148 |           if (!err) {
149 |             this.loading = true;
150 |             Post(API.user.reg)
151 |               .withSuccessCode(201)
152 |               .withErrorStartMsg("注册失败：")
153 |               .withURLSearchParams({
154 |                 username: values.username,
155 |                 email: values.email,
156 |                 phone: values.phone,
157 |                 password: values.password
158 |               })
159 |               .do(response => {
160 |                 this.$message.success("注册成功");
161 |                 this.$router.push("/login").catch(error => {
162 |                 })
163 |               })
164 |               .doAfter(() => {
165 |                 this.loading = false;
166 |               })
167 |           }
168 |         });
169 |       },
170 |       handleConfirmBlur(e) {
171 |         const value = e.target.value;
172 |         this.confirmDirty = this.confirmDirty || !!value;
173 |       },
174 |       compareToFirstPassword(rule, value, callback) {
175 |         const form = this.form;
176 |         if (value && value !== form.getFieldValue('password')) {
177 |           callback('两次密码不一致!');
178 |         } else {
179 |           callback();
180 |         }
181 |       },
182 |       validateToNextPassword(rule, value, callback) {
183 |         const form = this.form;
184 |         if (value && this.confirmDirty) {
185 |           form.validateFields(['confirm'], {force: true});
186 |         }
187 |         callback();
188 |       },
189 |       validatorPhoneNumber(rule, value, callback) {
190 |         if (!(/^1([3456789])\d{9}$/.test(value))) {
191 |           callback('请输入正确的手机号');
192 |         } else {
193 |           callback();
194 |         }
195 |       },
196 |       handleReturnClick() {
197 |         this.$router.back();
198 |       }
199 |     },
200 |     beforeCreate() {
201 |       this.form = this.$form.createForm(this, {name: 'register'});
202 |     },
203 |   }
204 | </script>
205 | 
206 | <style scoped>
207 |   .reg-box {
208 |     max-width: 300px;
209 |     margin: 24px auto;
210 |   }
211 | </style>
212 | 


--------------------------------------------------------------------------------
/src/views/AdminOrder.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="order-box box-shadow box-radius">
  3 |     <div class="order-radio">
  4 |       <a-radio-group defaultValue="all" buttonStyle="solid" @change="handleRadioBtnChange">
  5 |         <a-radio-button value="all">所有订单</a-radio-button>
  6 |         <a-radio-button value="1">待付款</a-radio-button>
  7 |         <a-radio-button value="2">待发货</a-radio-button>
  8 |         <a-radio-button value="3">待收货</a-radio-button>
  9 |         <a-radio-button value="4">待评价</a-radio-button>
 10 |       </a-radio-group>
 11 |     </div>
 12 |     <a-empty v-if="loading.empty"/>
 13 |     <div v-if="!loading.empty">
 14 |       <div>
 15 |         <AdminOrderItem v-for="item in data" :key="item.id" :created-time="item.time" :img="item.commodity.imgMain"
 16 |                         :id="item.id"
 17 |                         :status="item.status" :title="item.commodity.name" :count="item.countNum"
 18 |                         :price="item.commodity.price" :sumPrice="item.sumPrice"
 19 |                         @delOrder="delOrder" @ok="handleNextStatus" @changePrice="handleChangePrice"/>
 20 |       </div>
 21 |       <div class="order-pagination">
 22 |         <a-pagination showSizeChanger
 23 |                       @showSizeChange="onShowSizeChange"
 24 |                       @change="onPageChange"
 25 |                       :total="pagination.totalElements"
 26 | 
 27 |         />
 28 |       </div>
 29 |     </div>
 30 |     <a-modal title="发货" v-model="expressInformation.visible" :confirmLoading="expressInformation.confirmLoading"
 31 |              @ok="handleHip">
 32 |       <a-textarea placeholder="快递信息..." :rows="4" v-model="expressInformation.newHip"/>
 33 |     </a-modal>
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 |   import OrderItem from "../components/OrderItem";
 39 |   import {Delete, Get, Post} from "@itning/axios-helper";
 40 |   import {API} from "../api";
 41 |   import moment from "moment";
 42 |   import 'moment/locale/zh-cn';
 43 |   import AdminOrderItem from "../components/AdminOrderItem";
 44 | 
 45 |   moment.locale('zh-cn');
 46 | 
 47 |   export default {
 48 |     name: "AdminOrder",
 49 |     components: {AdminOrderItem, OrderItem},
 50 |     data: () => ({
 51 |       pageSize: 20,
 52 |       current: 4,
 53 |       data: [],
 54 |       expressInformation: {
 55 |         // 快递模态框
 56 |         visible: false,
 57 |         confirmLoading: false,
 58 |         // 新快递内容
 59 |         newHip: '',
 60 |         // ID
 61 |         id: null
 62 |       },
 63 |       pagination: {
 64 |         // 数据总数
 65 |         totalElements: 0,
 66 |         // 页码
 67 |         page: 1,
 68 |         // 每页数量
 69 |         size: 10,
 70 |         // 订单状态
 71 |         status: ''
 72 |       },
 73 |       loading: {
 74 |         empty: false
 75 |       }
 76 |     }),
 77 |     methods: {
 78 |       handleRadioBtnChange(e) {
 79 |         if (e.target.value === "all") {
 80 |           this.pagination.status = "";
 81 |         } else {
 82 |           this.pagination.status = e.target.value;
 83 |         }
 84 |         this.initAllOrders();
 85 |       },
 86 |       onShowSizeChange(current, pageSize) {
 87 |         this.pagination.page = current;
 88 |         this.pagination.size = pageSize;
 89 |         this.initAllOrders();
 90 |       },
 91 |       onPageChange(page, pageSize) {
 92 |         this.pagination.page = page;
 93 |         this.pagination.size = pageSize;
 94 |         this.initAllOrders();
 95 |       },
 96 |       initAllOrders() {
 97 |         Get(`${API.order.admin_all}?page=${this.pagination.page - 1}&size=${this.pagination.size}&status=${this.pagination.status}`)
 98 |           .withSuccessCode(200)
 99 |           .withErrorStartMsg("获取订单信息失败：")
100 |           .do(response => {
101 |             this.pagination.totalElements = response.data.data.totalElements;
102 |             if (response.data.data.content.length === 0) {
103 |               this.loading.empty = true;
104 |               this.data = [];
105 |             } else {
106 |               this.loading.empty = false;
107 |               this.data = response.data.data.content.map(item => {
108 |                 item.time = moment(item.gmtModified).format("YYYY年MM月DD日 HH:mm:ss");
109 |                 return item;
110 |               });
111 |             }
112 |           })
113 |       },
114 |       delOrder(id) {
115 |         Delete(API.order.del + id)
116 |           .withSuccessCode(204)
117 |           .withErrorStartMsg("删除失败：")
118 |           .do(response => {
119 |             this.$message.success('删除成功');
120 |           })
121 |           .doAfter(() => {
122 |             this.initAllOrders();
123 |           })
124 |       },
125 |       handleNextStatus(o) {
126 |         if (o.status === 2) {
127 |           this.expressInformation.id = o.id;
128 |           this.expressInformation.visible = true;
129 |         }
130 |       },
131 |       handleHip() {
132 |         if (this.expressInformation.newHip.trim() === '') {
133 |           this.$message.error("必须填写内容");
134 |           return;
135 |         }
136 |         this.expressInformation.confirmLoading = true;
137 |         Post(API.order.hip)
138 |           .withSuccessCode(201)
139 |           .withErrorStartMsg("发货失败：")
140 |           .withURLSearchParams({
141 |             orderId: this.expressInformation.id,
142 |             expressInformation: this.expressInformation.newHip
143 |           })
144 |           .do(response => {
145 |             this.$message.success("发货成功");
146 |             this.expressInformation.visible = false;
147 |           })
148 |           .doAfter(() => {
149 |             this.expressInformation.confirmLoading = false;
150 |             this.initAllOrders();
151 |           })
152 |       },
153 |       handleChangePrice(obj) {
154 |         Post(API.order.admin_modify_price)
155 |           .withSuccessCode(201)
156 |           .withErrorStartMsg("修改总价失败：")
157 |           .withURLSearchParams(obj)
158 |           .do(response => {
159 |             this.$message.success("修改总价成功");
160 |           })
161 |           .doAfter(() => {
162 |             this.initAllOrders();
163 |           })
164 |       }
165 |     },
166 |     created() {
167 |       this.initAllOrders();
168 |     }
169 |   }
170 | </script>
171 | 
172 | <style scoped>
173 |   .order-box {
174 |     background-color: #fff;
175 |     padding: 12px;
176 |     margin-bottom: 12px;
177 |   }
178 | 
179 |   .order-pagination {
180 |     padding-top: 24px;
181 |     display: flex;
182 |     justify-content: flex-end;
183 |   }
184 | 
185 |   .order-radio {
186 |     height: 40px;
187 |     margin-top: 6px;
188 |   }
189 | </style>
190 | 


--------------------------------------------------------------------------------
/src/views/AdminProductNew.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <a-form :form="form" @submit="handleSubmit">
  4 |       <a-form-item v-bind="formItemLayout" label="商品标题" has-feedback>
  5 |         <a-input
  6 |           v-decorator="[
  7 |           'name',
  8 |           {
  9 |             rules: [
 10 |               {
 11 |                 required: true,
 12 |                 message: '请输入商品标题!',
 13 |               },
 14 |             ],
 15 |           },
 16 |         ]"
 17 |         />
 18 |       </a-form-item>
 19 |       <a-form-item v-bind="formItemLayout" label="商品单价">
 20 |         <a-input-number
 21 |           :min="0"
 22 |           :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
 23 |           :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
 24 |           v-decorator="[
 25 |           'price',
 26 |           {
 27 |             rules: [
 28 |               {
 29 |                 required: true,
 30 |                 message: '请输入商品单价!',
 31 |               },
 32 |             ],
 33 |           },
 34 |         ]"
 35 |         />
 36 |       </a-form-item>
 37 |       <a-form-item v-bind="formItemLayout" label="商品库存">
 38 |         <a-input-number
 39 |           :min="0"
 40 |           :step="1"
 41 |           v-decorator="[
 42 |           'stock',
 43 |           {
 44 |             rules: [
 45 |               {
 46 |                 required: true,
 47 |                 message: '请输入商品库存!',
 48 |               },
 49 |             ],
 50 |           },
 51 |         ]"
 52 |         />
 53 |       </a-form-item>
 54 |       <a-form-item v-bind="formItemLayout" label="推荐商品">
 55 |         <a-checkbox
 56 |           v-decorator="[
 57 |           'recommended',
 58 |           {
 59 |             valuePropName: 'checked',
 60 |             rules: [
 61 |               {
 62 |                 required: true,
 63 |                 message: '请选择是否是推荐商品!',
 64 |               },
 65 |             ],
 66 |           },
 67 |         ]">
 68 |         </a-checkbox>
 69 |       </a-form-item>
 70 |       <a-form-item v-bind="formItemLayout" label="商品分类" has-feedback>
 71 |         <a-select
 72 |           v-decorator="[
 73 |           'commodityTypeId',
 74 |           { rules: [{ required: true, message: '请选择商品分类!' }] },
 75 |         ]"
 76 |           placeholder="请选择分类"
 77 |         >
 78 |           <a-select-option v-for="item in productType" :key="item.id" :value="item.id">
 79 |             {{item.name}}
 80 |           </a-select-option>
 81 |         </a-select>
 82 |       </a-form-item>
 83 |       <a-form-item v-bind="formItemLayout" label="商品主图URL" has-feedback>
 84 |         <a-input
 85 |           v-decorator="[
 86 |           'imgMain',
 87 |           {
 88 |             rules: [
 89 |               {
 90 |                 required: true,
 91 |                 message: '请输入商品主图URL!',
 92 |               },
 93 |             ],
 94 |           },
 95 |         ]"
 96 |         />
 97 |       </a-form-item>
 98 |       <a-form-item v-bind="formItemLayout" has-feedback>
 99 |         <span slot="label">
100 |        商品轮播图URL
101 |         <a-tooltip title="至少一个。多个请使用英文分号进行分隔，最后一个末尾无需加英文分号。">
102 |           <a-icon type="question-circle-o"/>
103 |         </a-tooltip>
104 |       </span>
105 |         <a-textarea
106 |           v-decorator="[
107 |           'imgSecond',
108 |           {
109 |             rules: [
110 |               {
111 |                required: true,
112 |                 message: '请输入商品轮播URL!',
113 |               },
114 |               {
115 |                 validator: validateImgArray,
116 |               }
117 |             ],
118 |           },
119 |         ]"
120 |         />
121 |       </a-form-item>
122 |       <a-form-item v-bind="formItemLayout" label="商品介绍">
123 |         <a-textarea
124 |           v-decorator="[
125 |           'detail',
126 |           {
127 |             rules: [
128 |               {
129 |                 required: false
130 |               },
131 |             ],
132 |           },
133 |         ]"
134 |         />
135 |       </a-form-item>
136 |       <a-form-item v-bind="tailFormItemLayout">
137 |         <a-button type="primary" html-type="submit" :loading="loading">
138 |           添加商品
139 |         </a-button>
140 |       </a-form-item>
141 |     </a-form>
142 |   </div>
143 | </template>
144 | 
145 | <script>
146 |   import {Get, Post} from "@itning/axios-helper";
147 |   import {API} from "../api";
148 | 
149 |   export default {
150 |     name: 'AdminProductNew',
151 |     data() {
152 |       return {
153 |         loading: false,
154 |         recommended: true,
155 |         productType: [],
156 |         formItemLayout: {
157 |           labelCol: {
158 |             xs: {span: 24},
159 |             sm: {span: 8},
160 |           },
161 |           wrapperCol: {
162 |             xs: {span: 24},
163 |             sm: {span: 16},
164 |           },
165 |         },
166 |         tailFormItemLayout: {
167 |           wrapperCol: {
168 |             xs: {
169 |               span: 24,
170 |               offset: 0,
171 |             },
172 |             sm: {
173 |               span: 16,
174 |               offset: 8,
175 |             },
176 |           },
177 |         },
178 |       };
179 |     },
180 |     methods: {
181 |       handleSubmit(e) {
182 |         e.preventDefault();
183 |         this.form.validateFieldsAndScroll((err, values) => {
184 |           if (!err) {
185 |             console.log('Received values of form: ', values);
186 |             this.loading = true;
187 |             /*Post(API.commodity.admin_add)
188 |               .withURLSearchParams(values)
189 |               .withSuccessCode(201)
190 |               .withErrorStartMsg("添加失败：")
191 |               .do(response => {
192 |                 this.$message.success("添加成功");
193 |                 this.$router.push("/admin/product").catch(error => {
194 |                 });
195 |               })
196 |               .doAfter(() => {
197 |                 this.loading = false;
198 |               })*/
199 |           }
200 |         });
201 |       },
202 |       validateImgArray(rule, value, callback) {
203 |         if (value && value.endsWith(";")) {
204 |           callback('最后的URL请不要加英文分号');
205 |         } else {
206 |           callback();
207 |         }
208 |       },
209 |       initProductType() {
210 |         Get(API.commodityType.all)
211 |           .withSuccessCode(200)
212 |           .withErrorStartMsg("加载分类失败：")
213 |           .do(response => {
214 |             this.productType = response.data.data;
215 |             if (this.productType.length === 0) {
216 |               this.$message.error("请添加商品分类后再添加商品！");
217 |               this.$router.push("/admin/productType").catch(error => {
218 |               });
219 |             }
220 |           })
221 |       },
222 |     },
223 |     beforeCreate() {
224 |       this.form = this.$form.createForm(this, {name: 'product_new'});
225 |     },
226 |     created() {
227 |       this.initProductType();
228 |     }
229 |   };
230 | </script>
231 | 
232 | <style scoped>
233 | 
234 | </style>
235 | 


--------------------------------------------------------------------------------
/src/views/Order.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="order-box box-shadow box-radius">
  3 |     <div class="order-radio">
  4 |       <a-radio-group defaultValue="all" buttonStyle="solid" @change="handleRadioBtnChange">
  5 |         <a-radio-button value="all">所有订单</a-radio-button>
  6 |         <a-radio-button value="1">待付款</a-radio-button>
  7 |         <a-radio-button value="2">待发货</a-radio-button>
  8 |         <a-radio-button value="3">待收货</a-radio-button>
  9 |         <a-radio-button value="4">待评价</a-radio-button>
 10 |       </a-radio-group>
 11 |     </div>
 12 |     <a-empty v-if="loading.empty"/>
 13 |     <div v-if="!loading.empty">
 14 |       <div>
 15 |         <OrderItem v-for="item in data" :key="item.id" :created-time="item.time" :img="item.commodity.imgMain"
 16 |                    :id="item.id"
 17 |                    :status="item.status" :title="item.commodity.name" :count="item.countNum"
 18 |                    :price="item.commodity.price" :sumPrice="item.sumPrice"
 19 |                    @delOrder="delOrder" @ok="handleNextStatus"/>
 20 |       </div>
 21 |       <div class="order-pagination">
 22 |         <a-pagination showSizeChanger
 23 |                       @showSizeChange="onShowSizeChange"
 24 |                       @change="onPageChange"
 25 |                       :total="pagination.totalElements"
 26 | 
 27 |         />
 28 |       </div>
 29 |     </div>
 30 |     <a-modal title="评价商品" v-model="comment.visible" :confirmLoading="comment.confirmLoading" @ok="handleNewComment">
 31 |       <a-textarea placeholder="在此评论..." :rows="4" v-model="comment.newComment"/>
 32 |     </a-modal>
 33 |   </div>
 34 | </template>
 35 | 
 36 | <script>
 37 |   import OrderItem from "../components/OrderItem";
 38 |   import {Delete, Get, Post} from "@itning/axios-helper";
 39 |   import {API} from "../api";
 40 |   import moment from "moment";
 41 |   import 'moment/locale/zh-cn';
 42 | 
 43 |   moment.locale('zh-cn');
 44 | 
 45 |   export default {
 46 |     name: "Order",
 47 |     components: {OrderItem},
 48 |     data: () => ({
 49 |       pageSize: 20,
 50 |       current: 4,
 51 |       data: [],
 52 |       comment: {
 53 |         // 评价模态框
 54 |         visible: false,
 55 |         confirmLoading: false,
 56 |         // 新评论内容
 57 |         newComment: '',
 58 |         // 评论ID
 59 |         id: null
 60 |       },
 61 |       pagination: {
 62 |         // 数据总数
 63 |         totalElements: 0,
 64 |         // 页码
 65 |         page: 1,
 66 |         // 每页数量
 67 |         size: 10,
 68 |         // 订单状态
 69 |         status: ''
 70 |       },
 71 |       loading: {
 72 |         empty: false
 73 |       }
 74 |     }),
 75 |     methods: {
 76 |       handleRadioBtnChange(e) {
 77 |         if (e.target.value === "all") {
 78 |           this.pagination.status = "";
 79 |         } else {
 80 |           this.pagination.status = e.target.value;
 81 |         }
 82 |         this.initAllOrders();
 83 |       },
 84 |       onShowSizeChange(current, pageSize) {
 85 |         this.pagination.page = current;
 86 |         this.pagination.size = pageSize;
 87 |         this.initAllOrders();
 88 |       },
 89 |       onPageChange(page, pageSize) {
 90 |         this.pagination.page = page;
 91 |         this.pagination.size = pageSize;
 92 |         this.initAllOrders();
 93 |       },
 94 |       initAllOrders() {
 95 |         Get(`${API.order.all}?page=${this.pagination.page - 1}&size=${this.pagination.size}&status=${this.pagination.status}`)
 96 |           .withSuccessCode(200)
 97 |           .withErrorStartMsg("获取订单信息失败：")
 98 |           .do(response => {
 99 |             this.pagination.totalElements = response.data.data.totalElements;
100 |             if (response.data.data.content.length === 0) {
101 |               this.loading.empty = true;
102 |               this.data = [];
103 |             } else {
104 |               this.loading.empty = false;
105 |               this.data = response.data.data.content.map(item => {
106 |                 item.time = moment(item.gmtModified).format("YYYY年MM月DD日 HH:mm:ss");
107 |                 return item;
108 |               });
109 |             }
110 |           })
111 |       },
112 |       delOrder(id) {
113 |         Delete(API.order.del + id)
114 |           .withSuccessCode(204)
115 |           .withErrorStartMsg("删除失败：")
116 |           .do(response => {
117 |             this.$message.success('删除成功');
118 |           })
119 |           .doAfter(() => {
120 |             this.initAllOrders();
121 |           })
122 |       },
123 |       handleNextStatus(o) {
124 |         if (o.status !== 1 && o.status !== 3 && o.status !== 4) {
125 |           return;
126 |         }
127 |         switch (o.status) {
128 |           case 1: {
129 |             this.pay(o.id);
130 |             break;
131 |           }
132 |           case 3: {
133 |             this.receipt(o.id);
134 |             break;
135 |           }
136 |           case 4: {
137 |             this.comment.id = o.id;
138 |             this.comment.visible = true;
139 |             break;
140 |           }
141 |         }
142 |       },
143 |       pay(id) {
144 |         console.log("pay" + id);
145 |         Post(API.order.pay)
146 |           .withSuccessCode(201)
147 |           .withURLSearchParams({orderId: id})
148 |           .do(response => {
149 |             this.$message.success('付款成功');
150 |           })
151 |           .doAfter(() => {
152 |             this.initAllOrders();
153 |           })
154 |       },
155 |       receipt(id) {
156 |         console.log("receipt" + id);
157 |         Post(API.order.receipt)
158 |           .withSuccessCode(201)
159 |           .withURLSearchParams({orderId: id})
160 |           .do(response => {
161 |             this.$message.success('收货成功');
162 |           })
163 |           .doAfter(() => {
164 |             this.initAllOrders();
165 |           })
166 |       },
167 |       handleNewComment() {
168 |         if (this.comment.newComment.trim() === '') {
169 |           this.$message.error("必须填写内容");
170 |           return;
171 |         }
172 |         this.comment.confirmLoading = true;
173 |         Post(API.comment.add)
174 |           .withSuccessCode(201)
175 |           .withErrorStartMsg("评论失败：")
176 |           .withURLSearchParams({orderId: this.comment.id, content: this.comment.newComment})
177 |           .do(response => {
178 |             this.$message.success("评论成功");
179 |             this.comment.visible = false;
180 |           })
181 |           .doAfter(() => {
182 |             this.comment.confirmLoading = false;
183 |             this.initAllOrders();
184 |           })
185 |       }
186 |     },
187 |     created() {
188 |       this.initAllOrders();
189 |     }
190 |   }
191 | </script>
192 | 
193 | <style scoped>
194 |   .order-box {
195 |     background-color: #fff;
196 |     padding: 12px;
197 |     margin-bottom: 12px;
198 |   }
199 | 
200 |   .order-pagination {
201 |     padding-top: 24px;
202 |     display: flex;
203 |     justify-content: flex-end;
204 |   }
205 | 
206 |   .order-radio {
207 |     height: 40px;
208 |     margin-top: 6px;
209 |   }
210 | </style>
211 | 


--------------------------------------------------------------------------------
/src/views/AdminProduct.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <p>商品共计：{{pagination.totalElements}}
  4 |       <a-button type="link" @click="$router.push('/admin/product_new').catch(error=>{})">新增商品</a-button>
  5 |     </p>
  6 |     <AdminProductItem v-for="item in data" :key="item.id" :id="item.id" :img="item.imgMain" :title="item.name"
  7 |                       :time="item.time" :price="item.price" :stock="item.stock" :type="item.commodityType"
  8 |                       :recommended="item.recommended" :productType="productType"
  9 |                       @change="handleSave" @del="handleDel" @btnClick="handleClick"/>
 10 |     <div class="product-pagination">
 11 |       <a-pagination showSizeChanger
 12 |                     @showSizeChange="onShowSizeChange"
 13 |                     @change="onPageChange"
 14 |                     :total="pagination.totalElements"
 15 | 
 16 |       />
 17 |     </div>
 18 |     <div>
 19 |       <a-modal
 20 |         title="轮播图和商品介绍"
 21 |         :visible="modify.visible"
 22 |         @ok="handleOk"
 23 |         :confirmLoading="modify.confirmLoading"
 24 |         @cancel="handleModalClose"
 25 |       >
 26 |         <div style="margin:12px 0">
 27 |           <p>轮播图设置：</p>
 28 |           <div style="margin-bottom: 12px" v-for="(item,index) in modify.imgSecondArray">
 29 |             <a-input placeholder="轮播图片" style="width: 90%" v-model="modify.imgSecondArrayNew[index]"/>
 30 |             <a-icon type="close" style="margin-left: 6px" @click="modify.imgSecondArrayNew.splice(index,1)"/>
 31 |           </div>
 32 |           <a-button type="primary" @click="handleAddInput">添加轮播图</a-button>
 33 |         </div>
 34 |         <div>
 35 |           <p>商品介绍：</p>
 36 |           <a-textarea v-model="modify.detail"/>
 37 |         </div>
 38 |       </a-modal>
 39 |     </div>
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script>
 44 |   import AdminProductItem from "../components/AdminProductItem";
 45 |   import {Get, Patch} from "@itning/axios-helper";
 46 |   import {API} from "../api";
 47 |   import moment from "moment";
 48 |   import 'moment/locale/zh-cn';
 49 | 
 50 |   moment.locale('zh-cn');
 51 | 
 52 |   export default {
 53 |     name: "AdminProduct",
 54 |     components: {AdminProductItem},
 55 |     data() {
 56 |       return {
 57 |         modify: {
 58 |           modifyId: '',
 59 |           detailId: '',
 60 |           detail: '',
 61 |           visible: false,
 62 |           confirmLoading: false,
 63 |           imgSecondArray: [],
 64 |           imgSecondArrayNew: [],
 65 |         },
 66 |         data: [],
 67 |         productType: [],
 68 |         pagination: {
 69 |           // 数据总数
 70 |           totalElements: 0,
 71 |           // 页码
 72 |           page: 1,
 73 |           // 每页数量
 74 |           size: 10
 75 |         },
 76 |       }
 77 |     },
 78 |     methods: {
 79 |       onShowSizeChange(current, pageSize) {
 80 |         this.pagination.page = current;
 81 |         this.pagination.size = pageSize;
 82 |         this.initAllProduct();
 83 |       },
 84 |       onPageChange(page, pageSize) {
 85 |         this.pagination.page = page;
 86 |         this.pagination.size = pageSize;
 87 |         this.initAllProduct();
 88 |       },
 89 |       initAllProduct() {
 90 |         Get(`${API.commodity.admin_all}?page=${this.pagination.page - 1}&size=${this.pagination.size}`)
 91 |           .withSuccessCode(200)
 92 |           .withErrorStartMsg("加载商品信息失败：")
 93 |           .do(response => {
 94 |             this.pagination.totalElements = response.data.data.totalElements;
 95 |             this.data = response.data.data.content.map(item => {
 96 |               item.time = moment(item.gmtModified).format("YYYY年MM月DD日 HH:mm:ss");
 97 |               return item;
 98 |             });
 99 |           })
100 |       },
101 |       initProductType() {
102 |         Get(API.commodityType.all)
103 |           .withSuccessCode(200)
104 |           .withErrorStartMsg("加载分类失败：")
105 |           .do(response => {
106 |             this.productType = response.data.data;
107 |           })
108 |       },
109 |       handleSave(obj) {
110 |         let send = {id: obj.id};
111 |         if (obj.key === 'commodityType') {
112 |           send['commodityType'] = {id: obj.value};
113 |         } else {
114 |           send[obj.key] = obj.value;
115 |         }
116 |         console.log(send);
117 |         Patch(API.commodity.admin_modify)
118 |           .withSuccessCode(204)
119 |           .withErrorStartMsg("修改失败：")
120 |           .withJson(send)
121 |           .do(response => {
122 |             this.$message.success("修改成功");
123 |           })
124 |           .doAfter(() => {
125 |             this.initAllProduct();
126 |           })
127 |       },
128 |       handleDel(id) {
129 |         Patch(API.commodity.admin_modify)
130 |           .withSuccessCode(204)
131 |           .withErrorStartMsg("下架失败：")
132 |           .withJson({id: id, takeOff: true})
133 |           .do(response => {
134 |             this.$message.success("下架成功");
135 |           })
136 |           .doAfter(() => {
137 |             this.initAllProduct();
138 |           })
139 |       },
140 |       handleClick(id) {
141 |         this.modify.modifyId = id;
142 |         this.modify.detail = "加载中...";
143 |         Get(API.commodity.commodityDetail + id)
144 |           .withSuccessCode(200)
145 |           .withErrorStartMsg("加载详情失败：")
146 |           .do(response => {
147 |             this.modify.detailId = response.data.data.id;
148 |             this.modify.detail = response.data.data.detail;
149 |           })
150 |           .doAfter(() => {
151 |             const t = this.data.filter(item => item.id === id)[0];
152 |             this.modify.imgSecondArray = t.imgSecond.split(';');
153 |             this.modify.imgSecondArrayNew = this.modify.imgSecondArray;
154 |             this.modify.visible = true;
155 |           });
156 |       },
157 |       handleAddInput() {
158 |         this.modify.imgSecondArray.push("");
159 |       },
160 |       handleModalClose() {
161 |         this.modify.visible = false;
162 |         this.modify.imgSecondArray = [];
163 |         this.modify.imgSecondArrayNew = [];
164 |         this.modify.detail = '';
165 |       },
166 |       handleOk() {
167 |         let imgSecond = '';
168 |         this.modify.imgSecondArrayNew.forEach(item => {
169 |           if (item.trim() !== '') {
170 |             imgSecond += item + ';'
171 |           }
172 |         });
173 |         imgSecond = imgSecond.substring(0, imgSecond.length - 1);
174 |         this.modify.confirmLoading = true;
175 |         Patch(API.commodity.admin_modify)
176 |           .withSuccessCode(204)
177 |           .withErrorStartMsg("修改失败：")
178 |           .withJson({id: this.modify.modifyId, imgSecond: imgSecond})
179 |           .do(response => {
180 |             this.$message.success("修改轮播图成功");
181 |             this.modify.visible = false;
182 |           })
183 |           .doAfter(() => {
184 |             this.modify.confirmLoading = false;
185 |             this.initAllProduct();
186 |           });
187 |         Patch(API.commodity.admin_modify_detail)
188 |           .withSuccessCode(204)
189 |           .withErrorStartMsg("修改详情失败：")
190 |           .withJson({id: this.modify.detailId, detail: this.modify.detail, commodity: {id: this.modify.modifyId}})
191 |           .do(response => {
192 |             this.$message.success("修改详情成功");
193 |           })
194 |       },
195 |     },
196 |     created() {
197 |       this.initAllProduct();
198 |       this.initProductType();
199 |     }
200 |   }
201 | </script>
202 | 
203 | <style scoped>
204 |   .product-pagination {
205 |     padding-top: 24px;
206 |     display: flex;
207 |     justify-content: flex-end;
208 |   }
209 | </style>
210 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "{}"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright 2019 itning
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


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