liwa
3 years ago
commit
47b48a561e
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
@ -0,0 +1,3 @@
|
||||
> 1%
|
||||
last 2 versions
|
||||
not dead
|
||||
@ -0,0 +1,9 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
@ -0,0 +1,23 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -0,0 +1,29 @@
|
||||
# liwa-shoppingcart
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Run your tests
|
||||
```
|
||||
npm run test
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "liwa-shoppingcart",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"better-scroll": "^2.2.0",
|
||||
"core-js": "^3.6.5",
|
||||
"fastclick": "^1.0.6",
|
||||
"postcss-px-to-viewport": "^1.1.1",
|
||||
"vue": "^2.6.11",
|
||||
"vue-lazyload": "^1.3.3",
|
||||
"vue-router": "^3.5.1",
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^4.5.0",
|
||||
"@vue/cli-service": "^4.5.0",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<!-- 2.路由跳转页面 -->
|
||||
<!-- exclude值为组件导出的name值 -->
|
||||
<keep-alive exclude='Detail'>
|
||||
<router-view></router-view>
|
||||
</keep-alive>
|
||||
<!-- 1.底部标签栏 -->
|
||||
<main-tab-bar></main-tab-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MainTabBar from "components/content/tabbar/MainTabBar";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
MainTabBar,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "assets/css/base.css";
|
||||
</style>
|
||||
@ -0,0 +1,349 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
/* v2.0 | 20110126
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
License: none (public domain)
|
||||
*/
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 520 B |
|
After Width: | Height: | Size: 566 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 9.2 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 785 B |
|
After Width: | Height: | Size: 785 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 518 B |
|
After Width: | Height: | Size: 518 B |
|
After Width: | Height: | Size: 927 B |
|
After Width: | Height: | Size: 927 B |
|
After Width: | Height: | Size: 674 B |
|
After Width: | Height: | Size: 674 B |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,37 @@
|
||||
//防抖函数
|
||||
export function debounce(func, delay) {
|
||||
let timer = null
|
||||
return function (...args) {
|
||||
//如果下一次来的非常频繁就取消掉上一次的刷新
|
||||
if (timer) clearTimeout(timer)
|
||||
timer = setTimeout(() => {
|
||||
func.apply(this, args)
|
||||
}, delay)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//时间
|
||||
export function formatDate(date, fmt) {
|
||||
if (/(y+)/.test(fmt)) {
|
||||
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
|
||||
}
|
||||
let o = {
|
||||
'M+': date.getMonth() + 1,
|
||||
'd+': date.getDate(),
|
||||
'h+': date.getHours(),
|
||||
'm+': date.getMinutes(),
|
||||
's+': date.getSeconds()
|
||||
};
|
||||
for (let k in o) {
|
||||
if (new RegExp(`(${k})`).test(fmt)) {
|
||||
let str = o[k] + '';
|
||||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
|
||||
}
|
||||
}
|
||||
return fmt
|
||||
}
|
||||
function padLeftZero(str) {
|
||||
return ('00'+str).substr(str.length);
|
||||
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class='nav-bar' :style='{backgroundColor:"#13227a"}'>
|
||||
<div class='left'><slot name='left'></slot></div>
|
||||
<div class='center'><slot name='center'></slot></div>
|
||||
<div class='right'><slot name='right'></slot></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'NavBar',
|
||||
props: {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
/*垂直居中*/
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
/*水平居中*/
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 1px rgba(100,100,100,0.1);
|
||||
}
|
||||
.left, .right {
|
||||
width: 60px;
|
||||
}
|
||||
.center {
|
||||
flex: 1;/* flex: 1; -> felx: 1 1 0% */ /*占据全部剩余空间*/
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
|
||||
<div class='slide'>
|
||||
<!-- 放入超链接和图片 -->
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SwiperItem'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.slide{
|
||||
width: 100%;
|
||||
/* 不缩放 */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.slide img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class='tab-bar'>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'TabBar',
|
||||
components: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
box-shadow: 0 -2px 1px rgba(100,100,100,0.1);/*X轴偏移量、Y轴偏移量、模糊半径*/
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="toast" v-show="isShow">
|
||||
<div>{{message}}</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Toast',
|
||||
data(){
|
||||
return {
|
||||
isShow: false,
|
||||
message: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show (message='默认文字', duration=2000) {
|
||||
this.isShow = true;
|
||||
this.message = message
|
||||
|
||||
setTimeout(() => {
|
||||
this.isShow = false;
|
||||
this.message = ''
|
||||
}, duration)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toast{
|
||||
position: fixed;
|
||||
left:50%;
|
||||
top:50%;
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
color:#fff;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 14px;
|
||||
z-index: 999;
|
||||
padding:8px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class='backtop'>
|
||||
<img src="~assets/img/common/top.png" alt="">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BackTop'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.backtop {
|
||||
position: fixed;
|
||||
bottom: 56px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.backtop img {
|
||||
width: 30px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div>
|
||||
<tab-bar>
|
||||
<tab-bar-item path='/cart' colorActive='var(--color-high-text)'>
|
||||
<img slot='item-icon' src="~assets/img/tabbar/cart.svg" alt="" />
|
||||
<img slot='item-active' src="~assets/img/tabbar/cart-active.svg" alt="" />
|
||||
<div slot='item-text'>购物车</div>
|
||||
</tab-bar-item>
|
||||
<tab-bar-item path='/product' colorActive='var(--color-high-text)'>
|
||||
<img slot='item-icon' src="~assets/img/tabbar/goods.svg" alt="" />
|
||||
<img slot='item-active' src="~assets/img/tabbar/goods-active.svg" alt="" />
|
||||
<div slot='item-text'>商品</div>
|
||||
</tab-bar-item>
|
||||
<tab-bar-item path='/order' colorActive='var(--color-high-text)'>
|
||||
<img slot='item-icon' src="~assets/img/tabbar/order.svg" alt="" />
|
||||
<img slot='item-active' src="~assets/img/tabbar/order-active.svg" alt="" />
|
||||
<div slot='item-text'>订单</div>
|
||||
</tab-bar-item>
|
||||
<tab-bar-item path='/user' colorActive='var(--color-high-text)'>
|
||||
<img slot='item-icon' src="~assets/img/tabbar/user.svg" alt="" />
|
||||
<img slot='item-active' src="~assets/img/tabbar/user-active.svg" alt="" />
|
||||
<div slot='item-text'>用户</div>
|
||||
</tab-bar-item>
|
||||
</tab-bar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TabBar from "components/common/tabbar/TabBar";
|
||||
import TabBarItem from "components/common/tabbar/TabBarItem";
|
||||
|
||||
export default {
|
||||
name: "MainTabBar",
|
||||
components: {
|
||||
TabBar,
|
||||
TabBarItem,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class='tab-control'>
|
||||
<div v-for='(item, index) in titles'
|
||||
:key='index'
|
||||
@click='itemClick(index)'
|
||||
class='tab-item'
|
||||
:class='{active: index === currentIndex}'>
|
||||
<span>{{item}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TabControl',
|
||||
props: {
|
||||
titles: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
itemClick(index) {
|
||||
this.currentIndex = index;
|
||||
this.$emit('tabClick', index)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tab-control {
|
||||
display:flex;
|
||||
background-color: var(--color-background);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
}
|
||||
.tab-item span {
|
||||
padding: 5px;
|
||||
}
|
||||
.active span{
|
||||
color: var(--color-tint);
|
||||
border-bottom: 2px solid var(--color-tint);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,29 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import toast from 'components/common/toast'
|
||||
import FastClick from 'fastclick'
|
||||
import VueLazyLoad from 'vue-lazyload'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
//安装自定义toast插件
|
||||
Vue.use(toast)
|
||||
|
||||
//用Vue实例作为事件总线
|
||||
Vue.prototype.$bus = new Vue();
|
||||
|
||||
//解决移动端300ms延迟
|
||||
FastClick.attach(document.body)
|
||||
|
||||
//使用懒加载插件
|
||||
Vue.use(VueLazyLoad, {
|
||||
loading: require('assets/img/common/lazyload.gif')
|
||||
})
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
router,
|
||||
store,
|
||||
}).$mount('#app')
|
||||
@ -0,0 +1,15 @@
|
||||
import {request} from './request'
|
||||
|
||||
export function getCartItems() {
|
||||
return request({
|
||||
url: '/cart/user/1',
|
||||
params: {
|
||||
userId: 1,
|
||||
pageNum: 1,
|
||||
pageSize: 9,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
import {request} from './request'
|
||||
|
||||
export function getCategory() {
|
||||
return request({
|
||||
url: '/category'
|
||||
})
|
||||
}
|
||||
|
||||
export function getSubCategory(maitKey) {
|
||||
return request({
|
||||
url: '/subcategory',
|
||||
params: {
|
||||
maitKey
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// export function getCategoryDetail(miniWallkey,type) {
|
||||
// return request({
|
||||
// url:'/subcategory/detail',
|
||||
// params:{
|
||||
// miniWallkey,
|
||||
// type
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
@ -0,0 +1,57 @@
|
||||
/* 存放详情页的相关网络请求函数*/
|
||||
import {request} from './request'
|
||||
|
||||
//请求详情页数据
|
||||
export function getDetail(iid) {
|
||||
return request({
|
||||
url: '/detail',
|
||||
params: {
|
||||
iid
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//商品详情信息
|
||||
export class GoodsInfo {
|
||||
constructor(itemInfo,columns,services) {
|
||||
this.title = itemInfo.title;
|
||||
this.desc = itemInfo.desc;
|
||||
this.newPrice = itemInfo.price;
|
||||
this.oldPrice = itemInfo.oldPrice;
|
||||
this.discount = itemInfo.discountDesc;
|
||||
this.columns = columns;
|
||||
this.services = services;
|
||||
this.discountBgColor = itemInfo.discountBgColor;
|
||||
this.realPrice =itemInfo.lowNowPrice;
|
||||
}
|
||||
}
|
||||
|
||||
//详情页商家信息
|
||||
export class Shop{
|
||||
constructor(shopInfo) {
|
||||
this.logo = shopInfo.shopLogo;
|
||||
this.name = shopInfo.name;
|
||||
this.fans = shopInfo.cFans;
|
||||
this.sells = shopInfo.cSells;
|
||||
this.score = shopInfo.score;
|
||||
this.goodsCount = shopInfo.cGoods;
|
||||
}
|
||||
}
|
||||
|
||||
//商品参数
|
||||
export class GoodsParam{
|
||||
constructor(info,rule){
|
||||
this.image = info.images ? info.images[0] : '';
|
||||
this.infos = info.set;
|
||||
this.sizes = rule.tables;
|
||||
}
|
||||
}
|
||||
|
||||
//请求推荐信息
|
||||
|
||||
export function getRecommend() {
|
||||
return request({
|
||||
url: '/recommend'
|
||||
})
|
||||
}
|
||||
|
||||
@ -0,0 +1,18 @@
|
||||
/* 存放首页的相关网络请求函数*/
|
||||
import {request} from './request'
|
||||
|
||||
export function getHomeMultidata() {
|
||||
return request({
|
||||
url: '/home/multidata'
|
||||
})
|
||||
}
|
||||
|
||||
export function getHomeGoods(type, page) {
|
||||
return request({
|
||||
url: '/home/data',
|
||||
params: {
|
||||
type,
|
||||
page
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
import axios from 'axios'
|
||||
|
||||
export function request(config) {
|
||||
//1.创建axios实例
|
||||
const instance = axios.create({
|
||||
/* 接口地址在这里更改 */
|
||||
baseURL: 'http://localhost:8088',
|
||||
timeout: 5000
|
||||
})
|
||||
|
||||
//2.axios拦截器
|
||||
//请求拦截
|
||||
instance.interceptors.request.use(config => {
|
||||
return config
|
||||
}, err => {
|
||||
console.log(err)
|
||||
})
|
||||
|
||||
//相应拦截
|
||||
instance.interceptors.response.use(res => {
|
||||
return res.data
|
||||
}, err => {
|
||||
console.log(err)
|
||||
})
|
||||
|
||||
//3.发送真正的网络请求
|
||||
return instance(config)
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
|
||||
const Cart = () => import('views/cart/Cart')
|
||||
const Product = () => import('views/product/Product')
|
||||
const Order = () => import('views/order/Order')
|
||||
const User = () => import('views/user/User')
|
||||
|
||||
|
||||
|
||||
//通过Vue.use安装vue-router插件
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '',
|
||||
redirect: '/product'
|
||||
},
|
||||
{
|
||||
path: '/product',
|
||||
component: Product
|
||||
},
|
||||
{
|
||||
path: '/cart',
|
||||
component: Cart
|
||||
},
|
||||
{
|
||||
path: '/order',
|
||||
component: Order
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
component: User
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
//创建VueRouter对象
|
||||
const router = new VueRouter({
|
||||
routes,
|
||||
mode: 'history'
|
||||
})
|
||||
|
||||
//导出
|
||||
export default router
|
||||
@ -0,0 +1,19 @@
|
||||
export default {
|
||||
addCart(context, payload) {
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
//1.查找之前的数组里是否有该商品
|
||||
let oldProduct = context.state.cartList.find(item => item.iid === payload.iid)
|
||||
|
||||
//2.判断oldProduct
|
||||
if (oldProduct) {
|
||||
context.commit('addCounter', oldProduct)
|
||||
resolve('当前商品的数量+1')
|
||||
} else {
|
||||
payload.count = 1
|
||||
context.commit('addtoCart', payload)
|
||||
resolve('已添加新商品到购物车')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
export default {
|
||||
cartLength(state) {
|
||||
return state.cartList.length
|
||||
},
|
||||
|
||||
cartList(state) {
|
||||
return state.cartList
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
import mutations from './mutations'
|
||||
import actions from './actions'
|
||||
import getters from './getters'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
const state = {
|
||||
cartList:[{iid: "1m70y5k", count: 1, checked: true, image: "//s11.mogucdn.com/mlcdn/c45406/180808_600abce0g8dc8i4f6ic7k27i7837l_640x960.jpg", title: "2018秋季新款韩版百搭格子长袖衬衫+前短后长针织气质开衫外套+高腰直筒九分牛仔裤三件套装", desc: "2018秋季新款韩版百搭格子长袖衬衫+前短后长针织气质开衫外套+高腰直筒九分牛仔裤三件套装", price: "59.00"},{iid: "1m745k0", count: 1, checked: true, image: "//s11.mogucdn.com/mlcdn/c45406/180811_1k5hfa6d803575df3lkb6j67l5j3c_640x960.jpg", title: "2018秋季新款韩版女装字母印花宽松连帽休闲卫衣搭配松紧腰九分牛仔裤两件套女时尚运动套装潮", desc: "你的运动套装，也可以一起承包了~棉混纺的连帽卫衣，版型虽宽松，但因为有罗纹收口，穿起来立体挺括，能遮…助攻，翻边上的亮粉字母数字，和上衣一个调调，闪闪地时尚别致.清清爽爽的运动风其实也很拉好感der~", price: "68.00"}]
|
||||
}
|
||||
const store = new Vuex.Store({
|
||||
state,
|
||||
mutations,
|
||||
actions,
|
||||
getters,
|
||||
})
|
||||
|
||||
export default store;
|
||||
@ -0,0 +1,14 @@
|
||||
// import {
|
||||
// ADD_COUNTER,
|
||||
// ADD_TO_CART
|
||||
// } from './mutation-types'
|
||||
|
||||
export default {
|
||||
addCounter(state, payload) {
|
||||
payload.count +=1;
|
||||
},
|
||||
addtoCart(state, payload) {
|
||||
payload.checked = true
|
||||
state.cartList.push(payload)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div id="cart">
|
||||
<category-nav-bar class="navbar">
|
||||
<div slot="center">购物车</div>
|
||||
</category-nav-bar>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<div class="empty+card" v-for="item in cart_list">
|
||||
<div class="empty">
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="content">
|
||||
<div>id:{{ item.id }}</div>
|
||||
<div>产品id:{{ item.productId }}</div>
|
||||
<div>数量:{{ item.quantity }}</div>
|
||||
<div>创建时间:{{ item.createdAt }}</div>
|
||||
<div>更新时间:{{ item.updatedAt }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCartItems } from "network/cart.js";
|
||||
|
||||
import CategoryNavBar from "components/common/navbar/NavBar";
|
||||
|
||||
export default {
|
||||
name: "Cart",
|
||||
components: {
|
||||
CategoryNavBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cart_list: [
|
||||
{
|
||||
"id": 0,
|
||||
"userId": 0,
|
||||
"productId": 0,
|
||||
"quantity": 0,
|
||||
"createdAt": "",
|
||||
"updatedAt": ""
|
||||
},
|
||||
{
|
||||
"id": 0,
|
||||
"userId": 0,
|
||||
"productId": 0,
|
||||
"quantity": 0,
|
||||
"createdAt": "",
|
||||
"updatedAt": ""
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
getData() {
|
||||
getCartItems().then((res) => {
|
||||
console.log(res)
|
||||
this.cart_list = res
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.navbar {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
height: calc(100vh - 44px - 49px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 350px;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 1.5px solid #13227a;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.empty {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div id="order">
|
||||
<category-nav-bar class="navbar">
|
||||
<div slot="center">订单</div>
|
||||
</category-nav-bar>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<div class="empty+card" v-for="item in records">
|
||||
<div class="empty">
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="content">
|
||||
<div>id:{{ item.id }}</div>
|
||||
<div>名称:{{ item.name }}</div>
|
||||
<div>描述:{{ item.description }}</div>
|
||||
<div>价格:{{ item.price }}</div>
|
||||
<div>数量:{{ item.quantity }}</div>
|
||||
<div>创建时间:{{ item.createdAt }}</div>
|
||||
<div>更新时间:{{ item.updatedAt }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CategoryNavBar from "components/common/navbar/NavBar";
|
||||
|
||||
export default {
|
||||
name: "Order",
|
||||
components: {
|
||||
CategoryNavBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
categories: [],
|
||||
categoryData: [],
|
||||
currentIndex: -1,
|
||||
records: [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Apple",
|
||||
"description": "Apple",
|
||||
"price": 99,
|
||||
"quantity": 99,
|
||||
"createdAt": "2023-05-20",
|
||||
"updatedAt": "2023-05-20"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Apple",
|
||||
"description": "Apple",
|
||||
"price": 99,
|
||||
"quantity": 99,
|
||||
"createdAt": "2023-05-20",
|
||||
"updatedAt": "2023-05-20"
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.navbar {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
height: calc(100vh - 44px - 49px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 350px;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 1.5px solid #13227a;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.empty {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div id="product">
|
||||
<category-nav-bar class="navbar">
|
||||
<div slot="center">丽娃商品</div>
|
||||
</category-nav-bar>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<div class="empty+card" v-for="item in records">
|
||||
<div class="empty">
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="content">
|
||||
<div>id:{{ item.id }}</div>
|
||||
<div>名称:{{ item.name }}</div>
|
||||
<div>描述:{{ item.description }}</div>
|
||||
<div>价格:{{ item.price }}</div>
|
||||
<div>数量:{{ item.quantity }}</div>
|
||||
<div>创建时间:{{ item.createdAt }}</div>
|
||||
<div>更新时间:{{ item.updatedAt }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCategory, getSubCategory } from "network/category.js";
|
||||
import Scroll from "components/common/scroll/Scroll";
|
||||
import CategoryNavBar from "components/common/navbar/NavBar";
|
||||
import CategoryMenu from "./childcomps/CategoryMenu";
|
||||
import CategoryMenuItem from "./childcomps/CategoryMenuItem";
|
||||
export default {
|
||||
name: "Product",
|
||||
components: {
|
||||
CategoryNavBar,
|
||||
CategoryMenu,
|
||||
CategoryMenuItem,
|
||||
Scroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
categories: [],
|
||||
categoryData: [],
|
||||
currentIndex: -1,
|
||||
records: [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Apple",
|
||||
"description": "Apple",
|
||||
"price": 99,
|
||||
"quantity": 99,
|
||||
"createdAt": "2023-05-20",
|
||||
"updatedAt": "2023-05-20"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Apple",
|
||||
"description": "Apple",
|
||||
"price": 99,
|
||||
"quantity": 99,
|
||||
"createdAt": "2023-05-20",
|
||||
"updatedAt": "2023-05-20"
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
getData() {
|
||||
getCategory().then((res) => {
|
||||
this.categories = res.data.category.list;
|
||||
this.getSubData(0);
|
||||
|
||||
|
||||
});
|
||||
},
|
||||
getSubData(index) {
|
||||
this.currentIndex = index
|
||||
const maitKey = this.categories[index].maitKey;
|
||||
getSubCategory(maitKey).then((res) => {
|
||||
this.categoryData = res.data.list;
|
||||
|
||||
});
|
||||
},
|
||||
menuItemClick(index) {
|
||||
this.getSubData(index);
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.navbar {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
height: calc(100vh - 44px - 49px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 350px;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 1.5px solid #13227a;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.empty {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<div class='menu'>
|
||||
<div class='menu-item'
|
||||
:class='{active: currentIndex == index}'
|
||||
v-for='(item, index) in menuList'
|
||||
:key='index'
|
||||
@click='itemClick(index)'>
|
||||
{{item.title}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CategoryMenu',
|
||||
props: {
|
||||
menuList: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
itemClick(index) {
|
||||
this.currentIndex = index;
|
||||
this.$emit('menuItemClick',index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.menu {
|
||||
width: 100px;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.menu-item {
|
||||
padding: 15px 0;
|
||||
font-size: 15px;
|
||||
color:#333;
|
||||
text-align: center;
|
||||
}
|
||||
.menu-item.active {
|
||||
background-color: #fff;
|
||||
color:var(--color-high-text);
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<scroll class="scroll menu-content" ref="scroll">
|
||||
<div>
|
||||
<div class="menu-item" v-if='categoryData'>
|
||||
<div class="subitem" v-for="(item, index) in categoryData" :key="index">
|
||||
<a :href="item.link">
|
||||
<img @load='imgLoad' :src="item.image" alt="" />
|
||||
<div>{{ item.title }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</scroll>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Scroll from "components/common/scroll/Scroll";
|
||||
import {debounce} from "common/utils";
|
||||
export default {
|
||||
name: "CategoryMenuItem",
|
||||
props: {
|
||||
categoryData: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
refresh: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.refresh = debounce(this.$refs.scroll.refresh, 50)
|
||||
},
|
||||
|
||||
components: {
|
||||
Scroll,
|
||||
},
|
||||
methods: {
|
||||
imgLoad() {
|
||||
this.refresh()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.scroll {
|
||||
height: calc(100vh - 44px - 49px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.menu-content {
|
||||
flex: 1;
|
||||
}
|
||||
.menu-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
}
|
||||
.subitem {
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
width: 80px;
|
||||
}
|
||||
.subitem img {
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div id="user">
|
||||
<category-nav-bar class="navbar">
|
||||
<div slot="center">用户</div>
|
||||
</category-nav-bar>
|
||||
|
||||
<div class="main">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CategoryNavBar from "components/common/navbar/NavBar";
|
||||
|
||||
export default {
|
||||
name: "User",
|
||||
components: {
|
||||
CategoryNavBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
categories: [],
|
||||
categoryData: [],
|
||||
currentIndex: -1,
|
||||
records: [
|
||||
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.navbar {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
height: calc(100vh - 44px - 49px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 350px;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
border: 1.5px solid #13227a;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.main {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.empty {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
module.exports = {
|
||||
configureWebpack: {
|
||||
resolve: {
|
||||
alias: {
|
||||
'assets': '@/assets',
|
||||
'common': '@/common',
|
||||
'components': '@/components',
|
||||
'network': '@/network',
|
||||
'views': '@/views'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue