├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── logo.png
    │   └── impl.js
    ├── plugins
    │   └── element.js
    ├── pages
    │   ├── test
    │   │   ├── Test.js
    │   │   └── TestComponent.vue
    │   ├── product
    │   │   ├── list
    │   │   │   ├── BoughtProducts.vue
    │   │   │   ├── Selling.vue
    │   │   │   ├── MyProducts.vue
    │   │   │   └── CensoringProduct.vue
    │   │   ├── Edit.vue
    │   │   └── Detail.vue
    │   ├── chat
    │   │   ├── StartChat.vue
    │   │   └── Chat.vue
    │   ├── login
    │   │   └── Login.vue
    │   ├── register
    │   │   └── Register.vue
    │   └── profile
    │   │   └── Profile.vue
    ├── main.js
    ├── router
    │   └── fleaRouter.js
    ├── components
    │   ├── UserSummary.vue
    │   ├── ProductList.vue
    │   ├── ChatPanel.vue
    │   └── ProductDetailTable.vue
    └── index.vue
├── babel.config.js
├── vue.config.js
├── .editorconfig
├── .gitignore
├── README.md
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leafee98/flea-market-front/master/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/leafee98/flea-market-front/master/src/assets/logo.png


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


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   configureWebpack: {
3 |     performance: {
4 |       hints: false
5 |     }
6 |   }
7 | }
8 | 


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


--------------------------------------------------------------------------------
/src/plugins/element.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Element from 'element-ui'
3 | import 'element-ui/lib/theme-chalk/index.css'
4 | 
5 | Vue.use(Element)
6 | 


--------------------------------------------------------------------------------
/src/pages/test/Test.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import testComponent from './TestComponent.vue'
3 | 
4 | new Vue({
5 |   render: h => h(testComponent)
6 | }).$mount('#app')
7 | 


--------------------------------------------------------------------------------
/src/pages/product/list/BoughtProducts.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <compo-product-list listType="boughtProducts"></compo-product-list>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 | 
 8 | }
 9 | </script>
10 | 
11 | <style>
12 | 
13 | </style>
14 | 


--------------------------------------------------------------------------------
/src/pages/product/list/Selling.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <compo-product-list
 3 |     listType='selling'>
 4 |   </compo-product-list>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 
10 | }
11 | </script>
12 | 
13 | <style>
14 | 
15 | </style>
16 | 


--------------------------------------------------------------------------------
/src/pages/product/list/MyProducts.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <compo-product-list
 3 |     listType='myProducts'>
 4 |   </compo-product-list>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 
10 | }
11 | </script>
12 | 
13 | <style>
14 | 
15 | </style>
16 | 


--------------------------------------------------------------------------------
/src/pages/product/list/CensoringProduct.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <compo-product-list
 3 |     listType='censoringProducts'>
 4 |   </compo-product-list>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 
10 | }
11 | </script>
12 | 
13 | <style>
14 | 
15 | </style>
16 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # flea-front
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/pages/test/TestComponent.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id='app'>
 3 |     <input type="file" id="picFile"/>
 4 |     <button @click="upload">read byte</button>
 5 |     <hr />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import flea from '@/assets/impl.js'
11 | 
12 | export default {
13 |   name: 'PictureUpload',
14 |   methods: {
15 |     upload: function () {
16 |       const picFile = document.getElementById('picFile').files[0]
17 |       flea.api.picture.upload(picFile)
18 |     }
19 |   }
20 | }
21 | </script>
22 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 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><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Element from 'element-ui'
 3 | import 'element-ui/lib/theme-chalk/index.css'
 4 | import router from '@/router/fleaRouter.js'
 5 | import index from './index.vue'
 6 | 
 7 | import compoProductDetailTable from '@/components/ProductDetailTable.vue'
 8 | import compoProductList from '@/components/ProductList.vue'
 9 | import compoUserSummary from '@/components/UserSummary.vue'
10 | import compoChatPanel from '@/components/ChatPanel.vue'
11 | 
12 | Vue.use(Element)
13 | 
14 | Vue.component('compo-product-detail-table', compoProductDetailTable)
15 | Vue.component('compo-product-list', compoProductList)
16 | Vue.component('compo-user-summary', compoUserSummary)
17 | Vue.component('compo-chat-panel', compoChatPanel)
18 | 
19 | new Vue({
20 |   router,
21 |   render: h => h(index)
22 | }).$mount('#app')
23 | 


--------------------------------------------------------------------------------
/src/pages/product/Edit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <compo-product-detail-table style="width: 450px"
 4 |       :detail="detail" :edit="true">
 5 |     </compo-product-detail-table>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import flea from '@/assets/impl.js'
11 | 
12 | export default {
13 |   data: function () {
14 |     return {
15 |       productId: 0,
16 |       detail: {}
17 |     }
18 |   },
19 |   methods: {
20 |     loadDetail: function () {
21 |       const loadData = (body) => {
22 |         if (body.success) {
23 |           this.detail = body.data
24 |         } else {
25 |           this.$message({
26 |             message: 'failed to get product detail',
27 |             type: 'error'
28 |           })
29 |           setTimeout(this.jumpMyProduct, 500)
30 |         }
31 |       }
32 | 
33 |       this.productId = this.$route.params.productId
34 |       const params = {
35 |         productId: this.productId
36 |       }
37 |       flea.api.request(flea.api.url.product.getProductDetail, params)
38 |         .then(res => res.json()).then(loadData)
39 |     },
40 |     jumpMyProduct: function () {
41 |       this.$router.push({ name: 'myProducts' })
42 |     }
43 |   },
44 |   created: function () {
45 |     this.loadDetail()
46 |   },
47 |   beforeRouteUpdate: function (to, from, next) {
48 |     this.loadDetail()
49 |   }
50 | }
51 | </script>
52 | 
53 | <style>
54 | 
55 | </style>
56 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "flea-front",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.4",
12 |     "element-ui": "^2.4.5",
13 |     "vue": "^2.6.11",
14 |     "vue-router": "^3.1.6"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "~4.3.0",
18 |     "@vue/cli-plugin-eslint": "~4.3.0",
19 |     "@vue/cli-plugin-router": "~4.3.0",
20 |     "@vue/cli-service": "~4.3.0",
21 |     "@vue/eslint-config-standard": "^5.1.2",
22 |     "babel-eslint": "^10.1.0",
23 |     "eslint": "^6.7.2",
24 |     "eslint-plugin-import": "^2.20.2",
25 |     "eslint-plugin-node": "^11.1.0",
26 |     "eslint-plugin-promise": "^4.2.1",
27 |     "eslint-plugin-standard": "^4.0.0",
28 |     "eslint-plugin-vue": "^6.2.2",
29 |     "vue-cli-plugin-element": "~1.0.1",
30 |     "vue-template-compiler": "^2.6.11"
31 |   },
32 |   "eslintConfig": {
33 |     "root": true,
34 |     "env": {
35 |       "node": true
36 |     },
37 |     "extends": [
38 |       "plugin:vue/essential",
39 |       "@vue/standard"
40 |     ],
41 |     "parserOptions": {
42 |       "parser": "babel-eslint"
43 |     },
44 |     "rules": {}
45 |   },
46 |   "browserslist": [
47 |     "> 1%",
48 |     "last 2 versions",
49 |     "not dead"
50 |   ]
51 | }
52 | 


--------------------------------------------------------------------------------
/src/pages/product/Detail.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div style="display: flex">
 3 |     <compo-product-detail-table style="width: 450px"
 4 |       :detail="detail" :edit="false">
 5 |     </compo-product-detail-table>
 6 | 
 7 |     <compo-user-summary
 8 |       id="compo-user-summary"
 9 |       :seller="seller">
10 |     </compo-user-summary>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import flea from '@/assets/impl.js'
16 | 
17 | export default {
18 |   data: function () {
19 |     return {
20 |       productId: 0,
21 |       detail: {},
22 |       seller: {}
23 |     }
24 |   },
25 |   methods: {
26 |     loadDetail: function () {
27 |       const loadData = (body) => {
28 |         if (body.success) {
29 |           this.detail = body.data
30 |           this.seller = this.detail.seller
31 |         } else {
32 |           this.$message({
33 |             message: 'failed to get product detail',
34 |             type: 'error'
35 |           })
36 |         }
37 |       }
38 | 
39 |       this.productId = this.$route.params.productId
40 |       const params = {
41 |         productId: this.productId
42 |       }
43 |       flea.api.request(flea.api.url.product.getProductDetail, params)
44 |         .then(res => res.json()).then(loadData)
45 |     }
46 |   },
47 |   created: function () {
48 |     this.loadDetail()
49 |   }
50 | }
51 | </script>
52 | 
53 | <style>
54 | #compo-user-summary {
55 |   margin-left: 10%;
56 | }
57 | </style>
58 | 


--------------------------------------------------------------------------------
/src/pages/chat/StartChat.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |   </div>
 4 | </template>
 5 | 
 6 | <script>
 7 | import flea from '@/assets/impl.js'
 8 | 
 9 | export default {
10 |   created: function () {
11 |     const username = this.$route.params.username
12 |     this.startChat(username)
13 |   },
14 |   methods: {
15 |     startChat: function (username) {
16 |       const param = {
17 |         token: flea.util.cookie.get('token'),
18 |         username: username
19 |       }
20 |       flea.api.request(flea.api.url.chat.startChatSession, param)
21 |         .then(res => res.json())
22 |         .then(body => {
23 |           if (body.success) {
24 |             this.jumpChat(body.data)
25 |           } else {
26 |             this.promptResult(false, null, 'failed to start chat')
27 |           }
28 |         })
29 |     },
30 |     jumpChat: function (sessionId) {
31 |       this.$router.push({ name: 'chatSession', params: { chatSessionId: sessionId } })
32 |     },
33 | 
34 |     promptResult: function (success, successMsg, failedMsg) {
35 |       if (successMsg === undefined) { successMsg = 'action success' }
36 |       if (failedMsg === undefined) { failedMsg = 'action failed' }
37 | 
38 |       if (success) {
39 |         this.$message.success(successMsg)
40 |         return Promise.resolve()
41 |       } else {
42 |         this.$message.error(failedMsg)
43 |         return Promise.reject(new Error('failed'))
44 |       }
45 |     }
46 |   }
47 | }
48 | </script>
49 | 
50 | <style>
51 | 
52 | </style>
53 | 


--------------------------------------------------------------------------------
/src/pages/login/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <el-input v-model="username" placeholder="input your username" type="text" />
 4 |     <br />
 5 |     <el-input v-model="password" placeholder="input your password" type="password" />
 6 |     <br />
 7 |     <el-button type="primary" @click="login">login</el-button>
 8 |     <el-button type="" @click="jmpRegister">go to register</el-button>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import flea from '@/assets/impl.js'
14 | 
15 | export default {
16 |   name: 'Login',
17 |   data: function () {
18 |     return {
19 |       username: '',
20 |       password: ''
21 |     }
22 |   },
23 |   methods: {
24 |     login: function () {
25 |       const param = flea.api.param.user.authorize
26 |       param.username = this.username
27 |       param.password = this.password
28 |       flea.api.request(flea.api.url.user.authorize, param)
29 |         .then(res => res.json()).then(body => this.handleLogin(body))
30 |     },
31 |     handleLogin: function (body) {
32 |       if (body.success === true) {
33 |         flea.util.cookie.set('token', body.data)
34 |         window.location.reload(false)
35 |       } else {
36 |         flea.util.cookie.set('token', '', 0)
37 |         this.$message({
38 |           message: 'login failed',
39 |           type: 'error'
40 |         })
41 |       }
42 |     },
43 |     jmpRegister: function () {
44 |       this.$router.push({ name: 'register' })
45 |     },
46 |     logged: function () {
47 |       if (flea.util.cookie.get('token') !== undefined) {
48 |         this.$router.push({ name: 'productSelling' })
49 |       }
50 |     }
51 |   },
52 |   created: function () {
53 |     this.logged()
54 |     if (this.$route.params.logout === true) {
55 |       window.location.reload(false)
56 |     }
57 |   }
58 | }
59 | </script>
60 | 


--------------------------------------------------------------------------------
/src/pages/register/Register.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div>
 3 |   <el-row>
 4 |     <el-col :span="6">
 5 |       <el-input v-model="username" placeholder="input your username"/>
 6 |     </el-col>
 7 |   </el-row>
 8 |   <el-row>
 9 |     <el-col :span="6">
10 |       <el-input v-model="nickname" placeholder="input your nickname"/>
11 |     </el-col>
12 |   </el-row>
13 |   <el-row>
14 |     <el-col :span="6">
15 |       <el-input show-password v-model="password" placeholder="input your password"/>
16 |     </el-col>
17 |   </el-row>
18 |   <br />
19 |   <el-row>
20 |     <el-col :span="6">
21 |       <el-button @click="register" type="primary">register</el-button>
22 |       <el-button @click="jmpLogin" type="">go to login</el-button>
23 |     </el-col>
24 |   </el-row>
25 |   <br />
26 | </div>
27 | </template>
28 | 
29 | <script>
30 | import flea from '@/assets/impl.js'
31 | 
32 | export default {
33 |   name: 'RegisterField',
34 |   data: function () {
35 |     return {
36 |       username: '',
37 |       nickname: '',
38 |       password: ''
39 |     }
40 |   },
41 |   methods: {
42 |     register: function () {
43 |       const param = flea.util.cloneObj(flea.api.param.user.register)
44 |       param.username = this.username
45 |       param.password = this.password
46 |       param.nickname = this.nickname
47 |       flea.api.request(flea.api.url.user.register, param)
48 |         .then(res => res.json()).then(body => this.handleRegister(body))
49 |     },
50 |     handleRegister: function (body) {
51 |       if (body.success === true) {
52 |         this.$message({
53 |           message: 'register success, jump to login page in 2 seconds',
54 |           type: 'success'
55 |         })
56 | 
57 |         setTimeout(this.jmpLogin, 2000)
58 |       } else {
59 |         this.$message({
60 |           message: 'register failed for unknown reason',
61 |           type: 'error'
62 |         })
63 |       }
64 |     },
65 |     jmpLogin: function () {
66 |       this.$router.push(
67 |         {
68 |           name: 'login',
69 |           params: { value: 2 }
70 |         })
71 |     }
72 |   }
73 | }
74 | </script>
75 | 


--------------------------------------------------------------------------------
/src/router/fleaRouter.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | 
 4 | import Login from '@/pages/login/Login.vue'
 5 | import Register from '@/pages/register/Register.vue'
 6 | 
 7 | import Profile from '@/pages/profile/Profile'
 8 | 
 9 | import ProductSelling from '@/pages/product/list/Selling.vue'
10 | import MyProducts from '@/pages/product/list/MyProducts.vue'
11 | import BoughtProducts from '@/pages/product/list/BoughtProducts.vue'
12 | import CensoringProduct from '@/pages/product/list/CensoringProduct'
13 | 
14 | import ProductDetail from '@/pages/product/Detail.vue'
15 | import ProductDetailEdit from '@/pages/product/Edit.vue'
16 | 
17 | import Chat from '@/pages/chat/Chat.vue'
18 | import StartChat from '@/pages/chat/StartChat.vue'
19 | 
20 | Vue.use(VueRouter)
21 | 
22 | const routes = [
23 |   { path: '', redirect: { name: 'login' } },
24 |   { path: '/login', name: 'login', component: Login },
25 |   { path: '/register', name: 'register', component: Register },
26 |   { path: '/profile', name: 'myProfile', component: Profile },
27 |   { path: '/profile/:username', name: 'profile', component: Profile },
28 | 
29 |   { path: '/product/', redirect: { name: 'productSelling' } },
30 |   { path: '/product/list/selling', name: 'productSelling', component: ProductSelling },
31 |   { path: '/product/list/myProducts', name: 'myProducts', component: MyProducts },
32 |   { path: '/product/list/boughtProducts', name: 'boughtProducts', component: BoughtProducts },
33 |   { path: '/product/list/censoringProduct', name: 'censoringProduct', component: CensoringProduct },
34 | 
35 |   { path: '/product/detail/:productId', name: 'productDetail', component: ProductDetail },
36 |   { path: '/product/edit/:productId', name: 'productDetailEdit', component: ProductDetailEdit },
37 | 
38 |   { path: '/chat/chat/:chatSessionId', name: 'chatSession', component: Chat },
39 |   { path: '/chat/chat', name: 'chat', component: Chat },
40 | 
41 |   { path: '/chat/startChat/:username', name: 'startChat', component: StartChat }
42 | ]
43 | 
44 | const router = new VueRouter({
45 |   routes: routes,
46 |   mode: 'history'
47 | })
48 | 
49 | export default router
50 | 


--------------------------------------------------------------------------------
/src/components/UserSummary.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div style="display: flex">
 4 |       <el-avatar :size="128" style="margin: auto" :src="avatarUrl"></el-avatar>
 5 |     </div>
 6 |     <br />
 7 |     <table>
 8 |       <tr v-for="item in getIter(userInfo)" :key="item.key">
 9 |         <td>{{ item.name }}</td>
10 |         <td>
11 |           <div class="oneline-text-area">
12 |             {{ item.value }}
13 |           </div>
14 |         </td>
15 |       </tr>
16 |     </table>
17 |     <div style="display: flex">
18 |       <el-button @click="viewDetail">view detail</el-button>
19 |       <el-button @click="startChat">start chat</el-button>
20 |     </div>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 |   props: [
27 |     'seller'
28 |   ],
29 |   data: function () {
30 |     return {
31 |       userInfo: {
32 |         username: '',
33 |         nickname: '',
34 |         banStatus: ''
35 |       },
36 |       avatarUrl: ''
37 |     }
38 |   },
39 |   computed: {
40 |   },
41 |   watch: {
42 |     seller: function () {
43 |       this.loadInfo()
44 |     }
45 |   },
46 |   methods: {
47 |     loadInfo: function () {
48 |       this.userInfo.username = this.seller.username
49 |       this.userInfo.nickname = this.seller.nickname
50 |       this.avatarUrl = this.seller.avatarUrl
51 |       this.userInfo.banStatus = new Date().getTime() < this.seller.banUntil
52 |     },
53 |     getIter: function (obj) {
54 |       let x = 0
55 |       const res = []
56 |       for (const prop in obj) {
57 |         res.push({ name: prop, value: obj[prop], key: x++ })
58 |       }
59 |       return res
60 |     },
61 |     viewDetail: function () {
62 |       this.$router.push({ name: 'profile', params: { username: this.userInfo.username } })
63 |     },
64 |     startChat: function () {
65 |       this.$router.push({ name: 'startChat', params: { username: this.userInfo.username } })
66 |     }
67 |   }
68 | }
69 | </script>
70 | 
71 | <style>
72 | .oneline-text-area {
73 |   color: #606266;
74 |   width: 220px;
75 |   height: 40px;
76 |   line-height: 40px;
77 |   text-align: center;
78 |   margin-right: 8px;
79 |   border: 1px solid #DCDFE6;
80 |   border-radius: 4px;
81 |   box-sizing: border-box;
82 | }
83 | </style>
84 | 


--------------------------------------------------------------------------------
/src/pages/chat/Chat.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-container>
  3 |     <el-aside>
  4 |       <!-- chat session list -->
  5 |       <div id="chat-session-list" style="overflow: auto; height: 360px">
  6 |         <div class="oneline-text-area"
  7 |           style="background-color: #ECECEC; margin-bottom: 8px">
  8 |           chat sessions
  9 |         </div>
 10 |         <div
 11 |           v-for="session in chatSessionList"
 12 |           :key="session.chatSessionId"
 13 |           @click="chatInSession(session.chatSessionId)"
 14 |           :class="{
 15 |             'oneline-text-area': true,
 16 |             'action-element': true,
 17 |             'action-element-active': showingChatId == session.chatSessionId
 18 |           }"
 19 |           style="margin-bottom: 4px">
 20 |           {{ session.chatSessionId }}
 21 |         </div>
 22 |       </div>
 23 |     </el-aside>
 24 | 
 25 |     <el-main>
 26 |       <compo-chat-panel :chatSessionId="showingChatId"></compo-chat-panel>
 27 |     </el-main>
 28 |   </el-container>
 29 | </template>
 30 | 
 31 | <script>
 32 | import flea from '@/assets/impl.js'
 33 | 
 34 | export default {
 35 |   data: function () {
 36 |     return {
 37 |       showingChatId: 0,
 38 |       chatSessionList: []
 39 |     }
 40 |   },
 41 |   created: function () {
 42 |     this.loadData()
 43 |     setInterval(this.loadData, 10000)
 44 |   },
 45 |   watch: {
 46 |     $route: function (from, to) {
 47 |       this.loadData()
 48 |     }
 49 |   },
 50 |   methods: {
 51 |     loadData: function () {
 52 |       this.loadSessionList()
 53 |       this.loadParams()
 54 |     },
 55 |     loadParams: function () {
 56 |       this.showingChatId = this.$route.params.chatSessionId
 57 |     },
 58 |     loadSessionList: function () {
 59 |       const param = { token: flea.util.cookie.get('token') }
 60 |       flea.api.request(flea.api.url.chat.getChatSessions, param)
 61 |         .then(res => res.json())
 62 |         .then(body => {
 63 |           if (body.success === true) {
 64 |             this.chatSessionList = body.data
 65 |           } else {
 66 |             this.promptResult(false, null, 'load chat session list failed')
 67 |           }
 68 |         })
 69 |     },
 70 | 
 71 |     chatInSession: function (sessionId) {
 72 |       this.$router.push({ name: 'chatSession', params: { chatSessionId: sessionId } })
 73 |     },
 74 | 
 75 |     promptResult: function (success, successMsg, failedMsg) {
 76 |       if (successMsg === undefined) { successMsg = 'action success' }
 77 |       if (failedMsg === undefined) { failedMsg = 'action failed' }
 78 | 
 79 |       if (success) {
 80 |         this.$message.success(successMsg)
 81 |         return Promise.resolve()
 82 |       } else {
 83 |         this.$message.error(failedMsg)
 84 |         return Promise.reject(new Error('failed'))
 85 |       }
 86 |     }
 87 |   }
 88 | 
 89 | }
 90 | </script>
 91 | 
 92 | <style>
 93 | .action-element {
 94 |   cursor: pointer;
 95 |   transition: 0.5s
 96 | }
 97 | 
 98 | .action-element:hover {
 99 |   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
100 | }
101 | 
102 | .action-element-active {
103 |   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
104 | }
105 | 
106 | .oneline-text-area {
107 |   color: #606266;
108 |   width: 220px;
109 |   height: 40px;
110 |   line-height: 40px;
111 |   text-align: center;
112 |   margin-right: 8px;
113 |   border: 1px solid #DCDFE6;
114 |   border-radius: 4px;
115 |   box-sizing: border-box;
116 | }
117 | </style>
118 | 


--------------------------------------------------------------------------------
/src/components/ProductList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-table
  4 |       :data="productList"
  5 |       @row-click="goto">
  6 |       <el-table-column
  7 |         label="id"
  8 |         prop="productId"
  9 |         width="52px">
 10 |       </el-table-column>
 11 |       <el-table-column
 12 |         label="product name"
 13 |         prop="productName">
 14 |       </el-table-column>
 15 |       <el-table-column
 16 |         label="publish time"
 17 |         prop="publishTime">
 18 |       </el-table-column>
 19 |       <el-table-column
 20 |         label="seller nickname"
 21 |         prop="sellerNickName">
 22 |       </el-table-column>
 23 |     </el-table>
 24 |   </div>
 25 | </template>
 26 | 
 27 | <script>
 28 | import flea from '@/assets/impl.js'
 29 | 
 30 | export default {
 31 |   props: [
 32 |     'listType'
 33 |   ],
 34 |   data: function () {
 35 |     return {
 36 |       productList: [],
 37 |       type: {
 38 |         selling: 'selling',
 39 |         myProducts: 'myProducts',
 40 |         censoringProducts: 'censoringProducts',
 41 |         boughtProducts: 'boughtProducts'
 42 |       }
 43 |     }
 44 |   },
 45 |   methods: {
 46 |     parepareFunctions: function () {
 47 |       if (this.listType === this.type.selling) {
 48 |         this.request = () => {
 49 |           return flea.api.request(flea.api.url.product.getProductList, {})
 50 |         }
 51 |         this.goto = (row, column, event) => {
 52 |           this.$router.push({ name: 'productDetail', params: { productId: row.productId } })
 53 |         }
 54 |       } else if (this.listType === this.type.myProducts) {
 55 |         this.request = () => {
 56 |           return flea.api.request(flea.api.url.product.getMyProductList,
 57 |             { token: flea.util.cookie.get('token') })
 58 |         }
 59 |         this.goto = (row, column, event) => {
 60 |           this.$router.push({ name: 'productDetailEdit', params: { productId: row.productId } })
 61 |         }
 62 |       } else if (this.listType === this.type.censoringProducts) {
 63 |         this.request = () => {
 64 |           return flea.api.request(flea.api.url.admin.getCensoringProducts,
 65 |             { token: flea.util.cookie.get('token') })
 66 |         }
 67 |         this.goto = (row, column, event) => {
 68 |           this.$router.push({ name: 'productDetail', params: { productId: row.productId } })
 69 |         }
 70 |       } else if (this.listType === this.type.boughtProducts) {
 71 |         this.request = () => {
 72 |           return flea.api.request(flea.api.url.product.getBoughtProductList,
 73 |             { token: flea.util.cookie.get('token') })
 74 |         }
 75 |         this.goto = (row, column, event) => {
 76 |           this.$router.push({ name: 'productDetail', params: { productId: row.productId } })
 77 |         }
 78 |       } else {
 79 |         this.$message({
 80 |           message: 'unknown list type' + this.listType,
 81 |           type: 'error'
 82 |         })
 83 |       }
 84 |     },
 85 |     request: function () {},
 86 |     goto: function () {},
 87 |     loadProduct: function () {
 88 |       const loadProductItem = (body) => {
 89 |         const data = body.data
 90 |         for (const index in data) {
 91 |           const item = data[index]
 92 |           this.productList.push({
 93 |             productId: item.productId,
 94 |             productName: item.productName,
 95 |             publishTime: new Date(item.publishTime).toLocaleString(),
 96 |             sellerUsername: item.seller.username,
 97 |             sellerNickName: item.seller.nickname,
 98 |             sellerAvatarUrl: item.seller.avatarUrl
 99 |           })
100 |         }
101 |       }
102 |       this.request().then(res => res.json()).then(loadProductItem)
103 |     }
104 |   },
105 |   created: function () {
106 |     this.parepareFunctions()
107 |     this.loadProduct()
108 |   }
109 | }
110 | </script>
111 | 
112 | <style>
113 | 
114 | </style>
115 | 


--------------------------------------------------------------------------------
/src/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id='app'>
  3 |     <el-container>
  4 |       <el-header>
  5 |         <div style="display: flex; align-items: center">
  6 |           <strong>flea markdet</strong>
  7 | 
  8 |           <div style="margin-left: 8px">
  9 |             <el-button @click="jumpMarket">market</el-button>
 10 |             <el-button v-if="admin" @click="jumpCensoringProduct">censoring product</el-button>
 11 |             <el-button v-if="logged" @click="jumpMyProducts">my products</el-button>
 12 |             <el-button v-if="logged" @click="jumpBoughtProducts">bought products</el-button>
 13 |             <el-button v-if="logged" @click="newProduct">publish product</el-button>
 14 |             <el-button v-if="logged" @click="jumpProfile">my profile</el-button>
 15 |             <el-button type="warning" v-if="logged" @click="logout">logout</el-button>
 16 |           </div>
 17 | 
 18 |           <el-avatar v-if="logged" :src="avatarUrl" :size="54"
 19 |             style="margin-left: 15px">{{ nickname }}</el-avatar>
 20 |         </div>
 21 |       </el-header>
 22 | 
 23 |       <el-main id="main-panel">
 24 |         <router-view></router-view>
 25 |       </el-main>
 26 |     </el-container>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | import flea from '@/assets/impl.js'
 32 | 
 33 | export default {
 34 |   data: function () {
 35 |     return {
 36 |       username: '',
 37 |       nickname: '',
 38 |       avatarUrl: '',
 39 |       admin: false
 40 |     }
 41 |   },
 42 |   computed: {
 43 |     logged: function () {
 44 |       return this.nickname !== ''
 45 |     }
 46 |   },
 47 |   methods: {
 48 |     logout: function () {
 49 |       const param = { token: flea.util.cookie.get('token') }
 50 |       flea.api.request(flea.api.url.user.logout, param)
 51 | 
 52 |       flea.util.cookie.set('token', '23', 0)
 53 |       this.$message({
 54 |         message: 'logout from flea market, go to login page',
 55 |         type: 'warning'
 56 |       })
 57 |       setTimeout(this.jumpLogin, 500)
 58 |     },
 59 |     newProduct: function () {
 60 |       const param = {
 61 |         token: flea.util.cookie.get('token')
 62 |       }
 63 |       flea.api.request(flea.api.url.product.newProduct, param)
 64 |         .then(res => res.json()).then(this.handleNewProduct)
 65 |     },
 66 |     handleNewProduct: function (body) {
 67 |       if (body.success === true) {
 68 |         this.jumpProductEdit(body.data)
 69 |       } else {
 70 |         this.$message({
 71 |           message: 'failed to create new product',
 72 |           type: 'error'
 73 |         })
 74 |       }
 75 |     },
 76 |     jumpBoughtProducts: function () {
 77 |       this.$router.push({ name: 'boughtProducts' })
 78 |     },
 79 |     jumpProfile: function () {
 80 |       this.$router.push({ name: 'myProfile' })
 81 |       window.location.reload(false)
 82 |     },
 83 |     jumpMarket: function () {
 84 |       this.$router.push({ name: 'productSelling' })
 85 |     },
 86 |     jumpCensoringProduct: function () {
 87 |       this.$router.push({ name: 'censoringProduct' })
 88 |     },
 89 |     jumpProductEdit: function (productId) {
 90 |       this.$router.push({ name: 'productDetailEdit', params: { productId: productId } })
 91 |     },
 92 |     jumpLogin: function () {
 93 |       this.$router.push({ name: 'login', params: { logout: true } })
 94 |     },
 95 |     jumpMyProducts: function () {
 96 |       this.$router.push({ name: 'myProducts' })
 97 |     }
 98 |   },
 99 |   created: function () {
100 |     const param = { token: flea.util.cookie.get('token') }
101 |     flea.api.request(flea.api.url.user.getMyDetail, param)
102 |       .then(res => res.json()).then(body => {
103 |         if (body.success === true) {
104 |           this.username = body.data.username
105 |           this.nickname = body.data.nickname
106 |           this.avatarUrl = body.data.avatarUrl
107 |           this.admin = body.data.admin
108 |         }
109 |       })
110 |   }
111 | }
112 | </script>
113 | 
114 | <style>
115 | #main-panel {
116 |   margin-top: 8px;
117 |   padding-top: 8px;
118 |   box-sizing: border-box;
119 |   border-top: 2px dashed #d7dae2;
120 | }
121 | </style>
122 | 


--------------------------------------------------------------------------------
/src/components/ChatPanel.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <!-- msgs panel -->
  4 |     <div id="msg-panel" style="height: 360px">
  5 |       <div id="msg-panel-content" style="overflow-y: auto;">
  6 |         <div id="msg-item" style="display: grid" v-for="msg in msgList" :key="msg.chatMsgId">
  7 |           <div id="msg-info">
  8 |             <div id="user-info"
  9 |               class="action-element"
 10 |               @click="viewDetail(msg.sender.username)"
 11 |               style="display: flex; padding: 8px; width: 40%; margin-left: 8px; margin-top: 4px">
 12 |               <el-avatar class="action-element"
 13 |                 @click="viewDetail(msg.sender.username)"
 14 |                 size="small"
 15 |                 :src="msg.sender.avatarUrl"></el-avatar>
 16 |               <div style="display: grid">
 17 |                 <span
 18 |                   style="align-self: center; margin-left: 20px; color: #606266; font-size: small">
 19 |                   {{ msg.sender.nickname }}
 20 |                 </span>
 21 |                 <span
 22 |                   style="align-self: center; margin-left: 20px; color: #606266; font-size: small">
 23 |                   {{ new Date(msg.messageTime).toLocaleString() }}
 24 |                 </span>
 25 |               </div>
 26 |             </div>
 27 |           </div>
 28 | 
 29 |           <!-- msg content -->
 30 |           <div id="msg-content-panel">
 31 |             <div id="msg-content"
 32 |               class="multiline-text-area"
 33 |               style="margin-left: 6px; margin-right: 6px">
 34 |               {{ msg.content }}
 35 |             </div>
 36 |           </div>
 37 |         </div>
 38 | 
 39 |       </div>
 40 |     </div>
 41 | 
 42 |     <!-- input panel -->
 43 |     <div>
 44 |       <el-input
 45 |         v-model="msgEditing"
 46 |         type="textarea"
 47 |         placeholder="input your message here">
 48 |       </el-input>
 49 |       <el-button @click="sendMsg">send</el-button>
 50 |     </div>
 51 |   </div>
 52 | </template>
 53 | 
 54 | <script>
 55 | import flea from '@/assets/impl.js'
 56 | 
 57 | export default {
 58 |   props: [
 59 |     'chatSessionId'
 60 |   ],
 61 |   data: function () {
 62 |     return {
 63 |       msgList: [],
 64 |       msgEditing: ''
 65 |     }
 66 |   },
 67 |   created: function () {
 68 |     this.loadData()
 69 |   },
 70 |   watch: {
 71 |     chatSessionId: function () {
 72 |       this.loadData()
 73 |     }
 74 |   },
 75 |   methods: {
 76 |     loadData: function () {
 77 |       this.loadMsgs()
 78 |       setInterval(this.loadMsgs, 10000)
 79 |     },
 80 |     loadMsgs: function () {
 81 |       if (this.chatSessionId === undefined) {
 82 |         console.warn('chat session id is undefined, will not load message')
 83 |       } else {
 84 |         const param = {
 85 |           token: flea.util.cookie.get('token'),
 86 |           chatSessionId: this.chatSessionId
 87 |         }
 88 |         flea.api.request(flea.api.url.chat.getMsg, param)
 89 |           .then(res => res.json()).then(body => {
 90 |             if (!body.success) {
 91 |               this.promptResult(false, null, 'failed to load chat messages')
 92 |             } else {
 93 |               this.msgList = body.data
 94 |               // this.scrollMsgPanelToBottom()
 95 |             }
 96 |           })
 97 |       }
 98 |     },
 99 | 
100 |     sendMsg: function () {
101 |       const param = {
102 |         token: flea.util.cookie.get('token'),
103 |         chatSessionId: this.chatSessionId,
104 |         content: this.msgEditing
105 |       }
106 |       flea.api.request(flea.api.url.chat.sendMsg, param)
107 |         .then(res => res.json()).then(body => this.promptResult(body.success))
108 |         .then(this.loadMsgs)
109 |     },
110 | 
111 |     viewDetail: function (username) {
112 |       this.$router.push({ name: 'profile', params: { username: username } })
113 |     },
114 | 
115 |     // scrollMsgPanelToBottom: function () {
116 |     //   const com = document.getElementById('msg-panel-content')
117 |     //   com.scrollTo(0, com.scrollHeight)
118 |     // },
119 |     promptResult: function (success, successMsg, failedMsg) {
120 |       if (successMsg === undefined) { successMsg = 'action success' }
121 |       if (failedMsg === undefined) { failedMsg = 'action failed' }
122 | 
123 |       if (success) {
124 |         this.$message.success(successMsg)
125 |         return Promise.resolve()
126 |       } else {
127 |         this.$message.error(failedMsg)
128 |         return Promise.reject(new Error('failed'))
129 |       }
130 |     }
131 |   }
132 | }
133 | </script>
134 | 
135 | <style>
136 | #msg-panel {
137 |   display: grid;
138 |   border: 1px solid #DCDFE6;
139 |   border-radius: 4px;
140 |   box-sizing: border-box;
141 | }
142 | 
143 | .multiline-text-area {
144 |   color: #606266;
145 |   border: 1px solid #DCDFE6;
146 |   border-radius: 4px;
147 |   box-sizing: border-box;
148 |   padding: 12px 20px 12px 20px;
149 | }
150 | 
151 | .action-element {
152 |   cursor: pointer;
153 |   transition: 0.5s
154 | }
155 | 
156 | .action-element:hover {
157 |   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
158 | }
159 | 
160 | </style>
161 | 


--------------------------------------------------------------------------------
/src/assets/impl.js:
--------------------------------------------------------------------------------
  1 | const fleaHost = location.host
  2 | const fleaApiProtocol = 'http://'
  3 | 
  4 | const fleaApiUrl = {
  5 |   user: {
  6 |     register: fleaApiProtocol + fleaHost + '/api/user/register',
  7 |     authorize: fleaApiProtocol + fleaHost + '/api/user/authorize',
  8 |     logout: fleaApiProtocol + fleaHost + '/api/user/logout',
  9 |     modifyPassword: fleaApiProtocol + fleaHost + '/api/user/modifyPassword',
 10 |     modifyNickname: fleaApiProtocol + fleaHost + '/api/user/modifyNickname',
 11 |     modifyAvatar: fleaApiProtocol + fleaHost + '/api/user/modifyAvatar',
 12 |     addSocial: fleaApiProtocol + fleaHost + '/api/user/addSocial',
 13 |     removeSocial: fleaApiProtocol + fleaHost + '/api/user/removeSocial',
 14 |     getMyDetail: fleaApiProtocol + fleaHost + '/api/user/getMyDetail',
 15 |     getUserDetail: fleaApiProtocol + fleaHost + '/api/user/getUserDetail'
 16 |   },
 17 |   admin: {
 18 |     grantUser: fleaApiProtocol + fleaHost + '/api/admin/grantUser',
 19 |     banUser: fleaApiProtocol + fleaHost + '/api/admin/banUser',
 20 |     getCensoringProducts: fleaApiProtocol + fleaHost + '/api/admin/getCensoringProducts',
 21 |     censorProduct: fleaApiProtocol + fleaHost + '/api/admin/censorProduct',
 22 |     publishBulletin: fleaApiProtocol + fleaHost + '/api/admin/publishBulletin'
 23 |   },
 24 |   picture: {
 25 |     upload: fleaApiProtocol + fleaHost + '/api/picture/upload',
 26 |     download: fleaApiProtocol + fleaHost + '/api/picture/download'
 27 |   },
 28 |   chat: {
 29 |     startChatSession: fleaApiProtocol + fleaHost + '/api/chat/startChatSession',
 30 |     getChatSessions: fleaApiProtocol + fleaHost + '/api/chat/getChatSessions',
 31 |     sendMsg: fleaApiProtocol + fleaHost + '/api/chat/sendMsg',
 32 |     getMsg: fleaApiProtocol + fleaHost + '/api/chat/getMsg'
 33 |   },
 34 |   product: {
 35 |     getProductList: fleaApiProtocol + fleaHost + '/api/product/getProductList',
 36 |     getBoughtProductList: fleaApiProtocol + fleaHost + '/api/product/getBoughtProductList',
 37 |     getMyProductList: fleaApiProtocol + fleaHost + '/api/product/getMyProductList',
 38 |     getProductDetail: fleaApiProtocol + fleaHost + '/api/product/getProductDetail',
 39 |     newProduct: fleaApiProtocol + fleaHost + '/api/product/newProduct',
 40 |     deleteProduct: fleaApiProtocol + fleaHost + '/api/product/deleteProduct',
 41 |     editProduct: fleaApiProtocol + fleaHost + '/api/product/editProduct',
 42 |     editFinish: fleaApiProtocol + fleaHost + '/api/product/editFinish',
 43 |     editExpectedPrice: fleaApiProtocol + fleaHost + '/api/product/editExpectedPrice',
 44 |     editProductName: fleaApiProtocol + fleaHost + '/api/product/editProductName',
 45 |     editProductDetail: fleaApiProtocol + fleaHost + '/api/product/editProductDetail',
 46 |     editAddPic: fleaApiProtocol + fleaHost + '/api/product/editAddPic',
 47 |     editDeletePic: fleaApiProtocol + fleaHost + '/api/product/editDeletePic',
 48 |     orderProduct: fleaApiProtocol + fleaHost + '/api/product/orderProduct',
 49 |     cancelOrder: fleaApiProtocol + fleaHost + '/api/product/cancelOrder',
 50 |     confirmOrder: fleaApiProtocol + fleaHost + '/api/product/confirmOrder',
 51 |     comment: fleaApiProtocol + fleaHost + '/api/product/comment',
 52 |     getComments: fleaApiProtocol + fleaHost + '/api/product/getComments'
 53 |   }
 54 | }
 55 | 
 56 | const fleaApiParam = {
 57 |   user: {
 58 |     register: { username: null, nickname: null, password: null },
 59 |     authorize: { username: null, password: null },
 60 |     logout: { token: null },
 61 |     modifyPassword: { token: null, password: null },
 62 |     modifyNickname: { token: null, nickname: null },
 63 |     modifyAvatar: { token: null, avatarUrl: null },
 64 |     addSocial: { token: null, socialType: null, socialUrl: null },
 65 |     removeSocial: { token: null, socialId: null },
 66 |     getMyDetail: { token: null },
 67 |     getUserDetail: { username: null }
 68 |   },
 69 |   admin: {
 70 |     grantUser: { token: null, username: null },
 71 |     banUser: { token: null, username: null, day: null },
 72 |     getCensoringProducts: { token: null },
 73 |     censorProduct: { token: null, productId: null, pass: null },
 74 |     publishBulletin: { token: null, bulletinMsg: null }
 75 |   },
 76 |   picture: {
 77 |     // upload:{ pic: null },
 78 |     download: { picUid: null }
 79 |   },
 80 |   chat: {
 81 |     startChatSession: { token: null, username: null },
 82 |     getChatSessions: { token: null },
 83 |     sendMsg: { token: null, chatSessionId: null, content: null },
 84 |     getMsg: { token: null, chatSessionId: null }
 85 |   },
 86 |   product: {
 87 |     getProductList: {},
 88 |     getBoughtProductList: { token: null },
 89 |     getMyProductList: { token: null },
 90 |     getProductDetail: { productId: null },
 91 |     newProduct: { token: null },
 92 |     deleteProduct: { token: null, productId: null },
 93 |     editProduct: { token: null, productId: null },
 94 |     editFinish: { token: null, productId: null },
 95 |     editExpectedPrice: { token: null, productId: null, price: null },
 96 |     editProductName: { token: null, productId: null, productName: null },
 97 |     editProductDetail: { token: null, productId: null, productDetail: null },
 98 |     editAddPic: { token: null, productId: null, picUrl: null },
 99 |     editDeletePic: { token: null, productId: null, picId: null },
100 |     orderProduct: { token: null, productId: null },
101 |     cancelOrder: { token: null, productId: null },
102 |     confirmOrder: { token: null, productId: null },
103 |     comment: { token: null, productId: null, content: null },
104 |     getComments: { productId: null }
105 |   }
106 | }
107 | 
108 | function fleaApiRequest (url, params) {
109 |   const fetchReq = {
110 |     method: 'POST',
111 |     body: null
112 |   }
113 | 
114 |   const fd = new FormData()
115 |   for (const property in params) {
116 |     fd.append(property, params[property])
117 |   }
118 | 
119 |   fetchReq.body = fd
120 |   return fetch(url, fetchReq)
121 | }
122 | 
123 | async function fleaApiPictureUpload (picFile) {
124 |   const handleUpload = function (body) {
125 |     if (body.success === true) {
126 |       return fleaApiUrl.picture.download + '?picUid=' + body.data
127 |     } else {
128 |       return ''
129 |     }
130 |   }
131 | 
132 |   const fd = new FormData()
133 |   fd.append('pic', picFile)
134 |   const fetchReq = {
135 |     method: 'POST',
136 |     body: fd
137 |   }
138 |   return fetch(fleaApiUrl.picture.upload, fetchReq)
139 |     .then(res => res.json())
140 |     .then(handleUpload)
141 | }
142 | 
143 | const cookieUitls = {
144 |   expireSec: 3600 * 24 * 7,
145 |   parseCookie: function (cookieStr) {
146 |     const res = {}
147 |     if (!cookieStr.endsWith(';')) {
148 |       cookieStr += ';'
149 |     }
150 | 
151 |     while (cookieStr.length > 1) {
152 |       const ie = cookieStr.indexOf('=')
153 |       const is = cookieStr.indexOf(';')
154 | 
155 |       const key = cookieStr.substring(0, ie)
156 |       const value = cookieStr.substring(ie + 1, is)
157 |       res[key.trim()] = value
158 | 
159 |       cookieStr = cookieStr.substring(is + 1)
160 |     }
161 |     return res
162 |   },
163 |   get: function (name) {
164 |     return this.parseCookie(document.cookie)[name]
165 |   },
166 |   set: function (name, value, expireSeconds) {
167 |     let expireDate = null
168 |     if (expireSeconds === undefined) {
169 |       expireDate = new Date(Date.now() + 7 * 24 * 3600 * 1000)
170 |     } else {
171 |       expireDate = new Date(Date.now() + expireSeconds)
172 |     }
173 | 
174 |     const tmpCookie = name + '=' + value + '; Expires=' + expireDate + '; SameSite=Strict; Path=/'
175 |     document.cookie = tmpCookie
176 |   }
177 | }
178 | 
179 | const fleaUtils = {
180 |   cloneObj: function (obj) {
181 |     return Object.assign({}, obj)
182 |   },
183 |   cookie: cookieUitls
184 | }
185 | 
186 | // export fleaApiParam;
187 | // export fleaApiRequest;
188 | // export fleaApiUrl;
189 | // export fleaUtils;
190 | // export {fleaApiUrl, fleaApiParam, fleaApiRequest, fleaUtils};
191 | 
192 | export default {
193 |   api: {
194 |     url: fleaApiUrl,
195 |     param: fleaApiParam,
196 |     request: fleaApiRequest,
197 |     picture: {
198 |       upload: fleaApiPictureUpload
199 |     }
200 |   },
201 |   util: fleaUtils
202 | }
203 | 


--------------------------------------------------------------------------------
/src/pages/profile/Profile.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-container>
  3 |     <el-main>
  4 |       <div style="width: min-content; display: grid">
  5 |         <el-avatar
  6 |           :src="avatarUrl"
  7 |           :size="128"
  8 |           style="margin: auto; margin-bottom: 16px">
  9 |           {{ nickname }}
 10 |         </el-avatar>
 11 |         <div class="item-account" v-if="myself">
 12 |           <div class="entry">avatar:</div>
 13 |           <div class="oneline-text-area">
 14 |             <input id="avatarFile" type="file" class="input-small" />
 15 |           </div>
 16 |           <el-button type="primary" @click="updateAvatar">update</el-button>
 17 |         </div>
 18 |         <div class="item-account">
 19 |           <div class="entry">username:</div>
 20 |           <div class="oneline-text-area">
 21 |             {{ username }}
 22 |           </div>
 23 |         </div>
 24 | 
 25 |         <div class="item-account" v-if="myself">
 26 |           <div class="entry">password:</div>
 27 |           <el-input v-model="password" class="input-small" type="password"></el-input>
 28 |           <el-button type="primary" @click="updatePassword">modify</el-button>
 29 |         </div>
 30 | 
 31 |         <div class="item-account">
 32 |           <div class="entry">nickname:</div>
 33 |           <el-input v-if="myself" v-model="nickname" class="input-small"></el-input>
 34 |           <div v-else class="oneline-text-area">{{ nickname }}</div>
 35 |           <el-button v-if="myself" type="primary" @click="updateNickname">save</el-button>
 36 |         </div>
 37 | 
 38 |         <div class="item-account">
 39 |           <div class="entry">admin:</div>
 40 |           <div class="oneline-text-area">{{ admin }}</div>
 41 |           <el-button v-if="IAmAdmin && !this.admin" @click="grantAdmin">grant</el-button>
 42 |         </div>
 43 | 
 44 |         <div class="item-account">
 45 |           <div class="entry">ban status:</div>
 46 |           <el-button style="width: 50px; padding-left: 10px; padding-right: 10px"
 47 |             :type="banned ? 'danger' : 'success'" disabled>
 48 |             {{ banned ? 'ban' : 'fine' }}
 49 |           </el-button>
 50 |           <div v-if="IAmAdmin"
 51 |             style="display: flex">
 52 |             <el-input
 53 |               style="width: 84px; margin-left: 8px; margin-right: 8px;"
 54 |               placeholder="Day to ban"
 55 |               v-model="banDay"></el-input>
 56 |             <el-button @click="banUser">ban</el-button>
 57 |           </div>
 58 |         </div>
 59 | 
 60 |         <div class="item-account" v-if="banned">
 61 |           <div class="entry">ban until:</div>
 62 |           <div class="oneline-text-area">
 63 |             {{ new Date(banUntil).toLocaleString() }}
 64 |           </div>
 65 |         </div>
 66 | 
 67 |         <div class="item-account">
 68 |           <div class="entry">join Time:</div>
 69 |           <div class="oneline-text-area">
 70 |             {{ new Date(joinTime).toLocaleString() }}
 71 |           </div>
 72 |         </div>
 73 | 
 74 |         <div style="margin-top: 32px; display: grid">
 75 |           <strong>social list</strong>
 76 |           <div class="item-account" v-for="social in socialList" :key="social.socialId">
 77 |             <div v-if="myself" style="display: flex">
 78 |               <div class="entry">{{ social.socialType }}</div>
 79 |               <div class="oneline-text-area">{{ social.socialUrl }}</div>
 80 |               <el-button @click="removeSocial(social)">drop</el-button>
 81 |             </div>
 82 |             <div v-else style="display: flex">
 83 |               <div class="entry">{{ social.socialType }}</div>
 84 |               <div class="oneline-text-area">{{ social.socialUrl }}</div>
 85 |             </div>
 86 |           </div>
 87 | 
 88 |           <div v-if="myself" style="display: flex">
 89 |               <el-input class="entry-input"
 90 |                 placeholder="social type"
 91 |                 v-model="newSocial.socialType"></el-input>
 92 |               <el-input class="input-small"
 93 |                 placeholder="social url"
 94 |                 v-model="newSocial.socialUrl"></el-input>
 95 |               <el-button @click="addSocial">add</el-button>
 96 |           </div>
 97 | 
 98 |           <el-button v-else @click="startChat">start chat</el-button>
 99 |         </div>
100 |       </div>
101 |     </el-main>
102 |   </el-container>
103 | </template>
104 | 
105 | <script>
106 | import flea from '@/assets/impl.js'
107 | 
108 | export default {
109 |   data: function () {
110 |     return {
111 |       avatarUrl: '',
112 |       username: '',
113 |       password: '',
114 |       nickname: '',
115 |       banUntil: 0,
116 |       joinTime: 0,
117 |       admin: false,
118 |       socialList: [],
119 | 
120 |       newSocial: {
121 |         socialType: '',
122 |         socialUrl: ''
123 |       },
124 | 
125 |       myself: true,
126 |       IAmAdmin: false,
127 |       banDay: 0
128 |     }
129 |   },
130 |   computed: {
131 |     banned: function () {
132 |       return new Date().getTime() < this.banUntil
133 |     }
134 |   },
135 |   created: function () {
136 |     const username = this.$route.params.username
137 |     if (username === undefined) {
138 |       this.loadMyself()
139 |     } else {
140 |       this.myself = false
141 |       this.loadOther(username)
142 |     }
143 | 
144 |     this.loadIAmAdmin()
145 |   },
146 |   methods: {
147 |     loadMyself: function () {
148 |       const tokenCookie = flea.util.cookie.get('token')
149 |       const param = {}
150 |       param.token = tokenCookie
151 |       flea.api.request(flea.api.url.user.getMyDetail, param)
152 |         .then(res => res.json()).then(this.handleLoad)
153 |     },
154 |     loadOther: function (username) {
155 |       const param = { username: username }
156 |       flea.api.request(flea.api.url.user.getUserDetail, param)
157 |         .then(res => res.json()).then(this.handleLoad)
158 |     },
159 |     handleLoad: function (body) {
160 |       if (body.success === true) {
161 |         const detail = body.data
162 |         this.avatarUrl = detail.avatarUrl
163 |         this.username = detail.username
164 |         this.nickname = detail.nickname
165 |         this.banUntil = detail.banUntil
166 |         this.joinTime = detail.joinTime
167 |         this.admin = detail.admin
168 |         this.socialList = detail.socialList
169 |       } else {
170 |         this.$message({
171 |           message: 'failed to get profile',
172 |           type: 'error'
173 |         })
174 |       }
175 |     },
176 |     loadIAmAdmin: function () {
177 |       const param = { token: flea.util.cookie.get('token') }
178 |       flea.api.request(flea.api.url.user.getMyDetail, param)
179 |         .then(res => res.json()).then(body => { this.IAmAdmin = body.data.admin })
180 |     },
181 | 
182 |     banUser: function () {
183 |       const param = { token: flea.util.cookie.get('token'), username: this.username, day: this.banDay }
184 |       flea.api.request(flea.api.url.admin.banUser, param)
185 |         .then(res => res.json()).then(body => this.promptResult(body.success))
186 |       setTimeout(this.refreshRoute, 800)
187 |     },
188 |     grantAdmin: function () {
189 |       const param = { token: flea.util.cookie.get('token'), username: this.username }
190 |       flea.api.request(flea.api.url.admin.grantUser, param)
191 |         .then(res => res.json()).then(body => this.promptResult(body.success))
192 |       setTimeout(this.refreshRoute, 800)
193 |     },
194 | 
195 |     updatePassword: function () {
196 |       const param = { token: flea.util.cookie.get('token'), password: this.password }
197 |       flea.api.request(flea.api.url.user.modifyPassword, param)
198 |         .then(res => res.json()).then(body => this.promptResult(body.success))
199 |       setTimeout(this.refreshRoute, 800)
200 |     },
201 |     updateNickname: function () {
202 |       const param = { token: flea.util.cookie.get('token'), nickname: this.nickname }
203 |       flea.api.request(flea.api.url.user.modifyNickname, param)
204 |         .then(res => res.json()).then(body => this.promptResult(body.success))
205 |       setTimeout(this.refreshRoute, 800)
206 |     },
207 |     updateAvatar: function () {
208 |       const handleAddPic = (url) => {
209 |         const param = {
210 |           token: flea.util.cookie.get('token'),
211 |           avatarUrl: url
212 |         }
213 |         flea.api.request(flea.api.url.user.modifyAvatar, param).then(res => {
214 |           setTimeout(this.refreshRoute, 1500)
215 |         })
216 |       }
217 |       const handlePicUpload = (url) => {
218 |         if (url === '') {
219 |           this.$message({
220 |             message: 'picture upload failed',
221 |             type: 'error'
222 |           })
223 |         } else {
224 |           this.$message('picture file upload')
225 |           handleAddPic(url)
226 |         }
227 |       }
228 | 
229 |       const picFileDom = document.getElementById('avatarFile')
230 |       const pic = picFileDom.files[0]
231 |       flea.api.picture.upload(pic).then(handlePicUpload)
232 |     },
233 |     addSocial: function () {
234 |       const param = {
235 |         token: flea.util.cookie.get('token'),
236 |         socialType: this.newSocial.socialType,
237 |         socialUrl: this.newSocial.socialUrl
238 |       }
239 |       flea.api.request(flea.api.url.user.addSocial, param)
240 |         .then(res => res.json()).then(body => this.promptResult(body.success))
241 |       setTimeout(this.refreshRoute, 800)
242 |     },
243 |     removeSocial: function (social) {
244 |       const param = {
245 |         token: flea.util.cookie.get('token'),
246 |         socialId: social.socialId
247 |       }
248 |       flea.api.request(flea.api.url.user.removeSocial, param)
249 |         .then(res => res.json()).then(body => this.promptResult(body.success))
250 |       setTimeout(this.refreshRoute, 800)
251 |     },
252 | 
253 |     startChat: function () {
254 |       this.$router.push({ name: 'startChat', params: { username: this.username } })
255 |     },
256 | 
257 |     refreshRoute: function () {
258 |       window.location.reload(false)
259 |     },
260 |     promptResult: function (success) {
261 |       if (success) {
262 |         this.$message.success('action success')
263 |       } else {
264 |         this.$message.error('action failed')
265 |       }
266 |     }
267 |   }
268 | }
269 | </script>
270 | 
271 | <style>
272 | .input-small {
273 |   width: 220px;
274 |   margin-right: 8px;
275 | }
276 | 
277 | .item-account {
278 |   margin-bottom: 4px;
279 |   display: flex;
280 |   line-height: 40px;
281 | }
282 | 
283 | .oneline-text-area {
284 |   color: #606266;
285 |   width: 220px;
286 |   height: 40px;
287 |   line-height: 40px;
288 |   text-align: center;
289 |   margin-right: 8px;
290 |   border: 1px solid #DCDFE6;
291 |   border-radius: 4px;
292 |   box-sizing: border-box;
293 | }
294 | 
295 | .entry {
296 |   width: 120px;
297 |   text-align: center;
298 | }
299 | 
300 | .entry-input {
301 |   width: 112px;
302 |   margin-right: 8px
303 | }
304 | </style>>
305 | 


--------------------------------------------------------------------------------
/src/components/ProductDetailTable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <table>
  4 |       <tr>
  5 |         <td>product name</td>
  6 |         <td>
  7 |           <el-input v-if="edit" v-model="detail.productName"/>
  8 |           <div class="oneline-text-area" v-else>{{ detail.productName }}</div>
  9 |         </td>
 10 |       </tr>
 11 | 
 12 |       <tr>
 13 |         <td>product price</td>
 14 |         <td>
 15 |           <el-input v-if="edit" v-model="detail.expectedPrice"/>
 16 |           <div class="oneline-text-area" v-else>{{ detail.expectedPrice }}</div>
 17 |         </td>
 18 |       </tr>
 19 | 
 20 |       <tr>
 21 |         <td>product id</td>
 22 |         <td>
 23 |           <el-input v-if="edit" v-model="detail.productId" disabled/>
 24 |           <div class="oneline-text-area" v-else>{{ detail.productId}}</div>
 25 |         </td>
 26 |       </tr>
 27 | 
 28 |       <tr>
 29 |         <td>product status</td>
 30 |         <td>
 31 |           <el-input v-if="edit" v-model="detail.productStatus" disabled/>
 32 |           <div class="oneline-text-area" v-else>{{ detail.productStatus }}</div>
 33 |         </td>
 34 |       </tr>
 35 | 
 36 |       <tr>
 37 |         <td>publish time</td>
 38 |         <td>
 39 |           <el-input v-if="edit" v-model="publishTimeStr" disabled/>
 40 |           <div class="oneline-text-area" v-else>{{ publishTimeStr }}</div>
 41 |         </td>
 42 |       </tr>
 43 |     </table>
 44 | 
 45 |     <div>
 46 |       <div class="pic-container"
 47 |         v-for="pic in detail.pics" :key="pic.productPicUrl">
 48 |         <el-image :src="pic.productPicUrl"
 49 |           class="pic-item"
 50 |           :preview-src-list="new Array(pic.productPicUrl)">
 51 |         </el-image>
 52 |         <el-button v-if="edit"
 53 |           style="margin-left: 8px"
 54 |           @click="dropPic(pic)">
 55 |           drop
 56 |         </el-button>
 57 |       </div>
 58 |     </div>
 59 | 
 60 |     <div v-if="edit">
 61 |       <input style="width: 300px" type="file" id="picFile" />
 62 |       <el-button @click="newPic">new picture</el-button>
 63 |     </div>
 64 | 
 65 |     <el-input type="textarea" v-model="detail.productDetail"></el-input>
 66 |     <div stype="display: flex" v-if="edit">
 67 |       <el-button @click="editProduct">edit</el-button>
 68 |       <el-button @click="update">update</el-button>
 69 |       <el-button @click="finishEdit">finish edit</el-button>
 70 |       <el-button @click="dropProduct">drop product</el-button>
 71 |     </div>
 72 | 
 73 |     <div style="display: flex" v-if="detail.productStatus === 'censoring' && admin">
 74 |       <el-button @click="censorPass">censor pass</el-button>
 75 |       <el-button @click="censorDeny">censor deny</el-button>
 76 |     </div>
 77 |     <div style="display: flex" v-if="logged">
 78 |       <el-button v-if="detail.productStatus === 'selling'" @click="orderProduct">order</el-button>
 79 |       <el-button v-if="confirmable" @click="confirmOrder">confrim order</el-button>
 80 |       <el-button v-if="confirmable" @click="cancelOrder">cancel order</el-button>
 81 |     </div>
 82 | 
 83 |     <div class="top-dash-border" style="margin-top: 16px; padding-top: 8px;">
 84 |       <div>
 85 |         <!-- other's comment -->
 86 |         <div class="top-tight-dash-border"
 87 |           v-for="c in commentList" :key="c.commentId">
 88 |           <div class="action-element"
 89 |             @click="viewDetail(c.user.username)"
 90 |             style="display: flex; padding: 4px">
 91 |             <el-avatar class="action-element"
 92 |               @click="viewDetail(c.user.username)"
 93 |               size="small"
 94 |               :src="c.user.avatarUrl"></el-avatar>
 95 |             <span
 96 |               style="align-self: center; margin-left: 20px; color: #606266; font-size: small">
 97 |               {{ c.user.nickname }}
 98 |             </span>
 99 |           </div>
100 |           <div class="multiline-text-area" style="margin-top: 4px">
101 |             {{ c.content }}
102 |           </div>
103 |         </div>
104 |       </div>
105 |       <div class="top-dash-border" style="margin-top: 16px; padding-top: 8px;">
106 |         <!-- write comment -->
107 |         <el-button @click="comment">post comment</el-button>
108 |         <el-input type="textarea" v-model="commentContent"></el-input>
109 |       </div>
110 |     </div>
111 |   </div>
112 | </template>
113 | 
114 | <script>
115 | import flea from '@/assets/impl.js'
116 | 
117 | export default {
118 |   props: [
119 |     'detail',
120 |     'edit'
121 |   ],
122 |   data: function () {
123 |     return {
124 |       admin: false,
125 |       commentList: [],
126 |       commentContent: ''
127 |     }
128 |   },
129 |   computed: {
130 |     publishTimeStr: {
131 |       get: function () {
132 |         return new Date(this.detail.publishTime).toLocaleString()
133 |       }
134 |     },
135 |     token: {
136 |       get: function () {
137 |         return flea.util.cookie.get('token')
138 |       }
139 |     },
140 |     logged: {
141 |       get: function () {
142 |         return this.token !== undefined
143 |       }
144 |     },
145 |     confirmable: {
146 |       get: function () {
147 |         return this.detail.productStatus === 'ordered' ||
148 |           this.detail.productStatus === 'confirm_buyer' ||
149 |           this.detail.productStatus === 'confirm_seller'
150 |       }
151 |     }
152 |   },
153 |   created: function () {
154 |     this.loadAdmin()
155 |     this.loadComments()
156 |   },
157 |   watch: {
158 |     detail: function () {
159 |       this.loadComments()
160 |     }
161 |   },
162 |   methods: {
163 |     loadAdmin: function () {
164 |       flea.api.request(flea.api.url.user.getMyDetail, { token: this.token })
165 |         .then(res => res.json()).then(body => { this.admin = body.data.admin })
166 |     },
167 |     loadComments: function () {
168 |       if (this.detail.productId === undefined) { return }
169 | 
170 |       const param = { productId: this.detail.productId }
171 |       flea.api.request(flea.api.url.product.getComments, param)
172 |         .then(res => res.json()).then(body => { this.commentList = body.data })
173 |     },
174 | 
175 |     update: function () {
176 |       const token = flea.util.cookie.get('token')
177 |       const productId = this.detail.productId
178 |       const productName = this.detail.productName
179 |       const productDetail = this.detail.productDetail
180 |       const expectedPrice = this.detail.expectedPrice
181 | 
182 |       const paramProductName =
183 |         { token: token, productId: productId, productName: productName }
184 | 
185 |       const paramProductDetail =
186 |         { token: token, productId: productId, productDetail: productDetail }
187 | 
188 |       const paramProductPrice =
189 |         { token: token, productId: productId, price: expectedPrice }
190 | 
191 |       const p1 = flea.api.request(flea.api.url.product.editProductName, paramProductName).then(res => res.json())
192 |       const p2 = flea.api.request(flea.api.url.product.editProductDetail, paramProductDetail).then(res => res.json())
193 |       const p3 = flea.api.request(flea.api.url.product.editExpectedPrice, paramProductPrice).then(res => res.json())
194 |       Promise.all([p1, p2, p3])
195 |         .then(bodys => {
196 |           if (bodys[0].success === true &&
197 |             bodys[1].success === true &&
198 |             bodys[2].success === true) {
199 |             this.promptResult(true)
200 |           } else {
201 |             this.promptResult(false)
202 |           }
203 |         })
204 |     },
205 |     newPic: function () {
206 |       const handleAddPic = (url) => {
207 |         const param = {
208 |           token: flea.util.cookie.get('token'),
209 |           productId: this.detail.productId,
210 |           picUrl: url
211 |         }
212 |         flea.api.request(flea.api.url.product.editAddPic, param)
213 |           .then(res => res.json()).then(body => this.promptResult(body.success))
214 |       }
215 |       const handlePicUpload = (url) => {
216 |         if (url === '') {
217 |           this.$message({
218 |             message: 'picture upload failed',
219 |             type: 'error'
220 |           })
221 |         } else {
222 |           this.$message('picture file upload')
223 |           handleAddPic(url)
224 |         }
225 |       }
226 | 
227 |       const picFileDom = document.getElementById('picFile')
228 |       const pic = picFileDom.files[0]
229 |       flea.api.picture.upload(pic).then(handlePicUpload)
230 |     },
231 |     dropPic: function (pic) {
232 |       const param = {
233 |         token: flea.util.cookie.get('token'),
234 |         productId: this.detail.productId,
235 |         picId: pic.productPicId
236 |       }
237 |       flea.api.request(flea.api.url.product.editDeletePic, param)
238 |         .then(res => res.json()).then(body => this.promptResult(body.success))
239 |     },
240 | 
241 |     finishEdit: function () {
242 |       const param = {
243 |         token: flea.util.cookie.get('token'),
244 |         productId: this.detail.productId
245 |       }
246 |       flea.api.request(flea.api.url.product.editFinish, param)
247 |         .then(res => res.json()).then(body => this.promptResult(body.success))
248 |     },
249 |     editProduct: function () {
250 |       const param = {
251 |         token: flea.util.cookie.get('token'),
252 |         productId: this.detail.productId
253 |       }
254 |       flea.api.request(flea.api.url.product.editProduct, param)
255 |         .then(res => res.json()).then(body => this.promptResult(body.success))
256 |     },
257 |     dropProduct: function () {
258 |       const param = {
259 |         token: flea.util.cookie.get('token'),
260 |         productId: this.detail.productId
261 |       }
262 |       flea.api.request(flea.api.url.product.deleteProduct, param)
263 |         .then(res => res.json()).then(body => this.promptResult(body.success))
264 |     },
265 | 
266 |     censorPass: function () {
267 |       const param = { token: this.token, productId: this.detail.productId, pass: true }
268 |       flea.api.request(flea.api.url.admin.censorProduct, param)
269 |         .then(res => res.json()).then(body => this.promptResult(body.success))
270 |     },
271 |     censorDeny: function () {
272 |       const param = { token: this.token, productId: this.detail.productId, pass: false }
273 |       flea.api.request(flea.api.url.admin.censorProduct, param)
274 |         .then(res => res.json()).then(body => this.promptResult(body.success))
275 |     },
276 | 
277 |     comment: function () {
278 |       const param = {
279 |         token: this.token,
280 |         productId: this.detail.productId,
281 |         content: this.commentContent
282 |       }
283 |       flea.api.request(flea.api.url.product.comment, param)
284 |         .then(res => res.json()).then(body => this.promptResult(body.success))
285 |         .then(this.loadComments)
286 |     },
287 |     orderProduct: function () {
288 |       const param = { token: this.token, productId: this.detail.productId }
289 |       flea.api.request(flea.api.url.product.orderProduct, param)
290 |         .then(res => res.json()).then(body => this.promptResult(body.success))
291 |     },
292 |     confirmOrder: function () {
293 |       const param = { token: this.token, productId: this.detail.productId }
294 |       flea.api.request(flea.api.url.product.confirmOrder, param)
295 |         .then(res => res.json()).then(body => this.promptResult(body.success))
296 |     },
297 |     cancelOrder: function () {
298 |       const param = { token: this.token, productId: this.detail.productId }
299 |       flea.api.request(flea.api.url.product.cancelOrder, param)
300 |         .then(res => res.json()).then(body => this.promptResult(body.success))
301 |     },
302 | 
303 |     viewDetail: function (username) {
304 |       this.$router.push({ name: 'profile', params: { username: username } })
305 |     },
306 | 
307 |     refreshRoute: function () {
308 |       setTimeout(() => {
309 |         window.location.reload(false)
310 |       }, 1000)
311 |     },
312 |     promptResult: function (success) {
313 |       if (success === true) {
314 |         this.$message.success('action success')
315 |       } else {
316 |         this.$message.error('action failed')
317 |       }
318 |       this.refreshRoute()
319 |     }
320 |   }
321 | }
322 | </script>
323 | 
324 | <style>
325 | .pic-container {
326 |   display: flex;
327 |   align-items: center;
328 |   margin-block: 2px;
329 | }
330 | 
331 | .pic-item {
332 |   width: 100px;
333 |   height: 100px
334 | }
335 | 
336 | .oneline-text-area {
337 |   color: #606266;
338 |   width: 220px;
339 |   height: 40px;
340 |   line-height: 40px;
341 |   text-align: center;
342 |   margin-right: 8px;
343 |   border: 1px solid #DCDFE6;
344 |   border-radius: 4px;
345 |   box-sizing: border-box;
346 | }
347 | 
348 | .multiline-text-area {
349 |   color: #606266;
350 |   border: 1px solid #DCDFE6;
351 |   border-radius: 4px;
352 |   box-sizing: border-box;
353 |   padding: 12px 20px 12px 20px;
354 | }
355 | 
356 | .top-dash-border {
357 |   border-top: 2px dashed #d7dae2
358 | }
359 | 
360 | .top-tight-dash-border {
361 |   border-top: 1px dashed #d7dae2;
362 |   margin-bottom: 4px;
363 |   margin-top: 4px;
364 |   padding-top: 4px;
365 |   box-sizing: border-box;
366 | }
367 | 
368 | .action-element {
369 |   cursor: pointer;
370 |   transition: 0.5s
371 | }
372 | 
373 | .action-element:hover {
374 |   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
375 | }
376 | </style>
377 | 


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