feat: 删除pc副本
yin5th
parent
b0602c1e10
commit
2b6df7cc62
|
|
@ -1,13 +0,0 @@
|
||||||
# editorconfig.org
|
|
||||||
root = true
|
|
||||||
|
|
||||||
[*]
|
|
||||||
indent_style = space
|
|
||||||
indent_size = 4
|
|
||||||
end_of_line = lf
|
|
||||||
charset = utf-8
|
|
||||||
trim_trailing_whitespace = true
|
|
||||||
insert_final_newline = true
|
|
||||||
|
|
||||||
[*.md]
|
|
||||||
trim_trailing_whitespace = false
|
|
||||||
|
|
@ -1,90 +0,0 @@
|
||||||
# Created by .ignore support plugin (hsz.mobi)
|
|
||||||
### Node template
|
|
||||||
# Logs
|
|
||||||
/logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
|
|
||||||
# Runtime data
|
|
||||||
pids
|
|
||||||
*.pid
|
|
||||||
*.seed
|
|
||||||
*.pid.lock
|
|
||||||
|
|
||||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
|
||||||
lib-cov
|
|
||||||
|
|
||||||
# Coverage directory used by tools like istanbul
|
|
||||||
coverage
|
|
||||||
|
|
||||||
# nyc test coverage
|
|
||||||
.nyc_output
|
|
||||||
|
|
||||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
|
||||||
.grunt
|
|
||||||
|
|
||||||
# Bower dependency directory (https://bower.io/)
|
|
||||||
bower_components
|
|
||||||
|
|
||||||
# node-waf configuration
|
|
||||||
.lock-wscript
|
|
||||||
|
|
||||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
|
||||||
build/Release
|
|
||||||
|
|
||||||
# Dependency directories
|
|
||||||
node_modules/
|
|
||||||
jspm_packages/
|
|
||||||
|
|
||||||
# TypeScript v1 declaration files
|
|
||||||
typings/
|
|
||||||
|
|
||||||
# Optional npm cache directory
|
|
||||||
.npm
|
|
||||||
|
|
||||||
# Optional eslint cache
|
|
||||||
.eslintcache
|
|
||||||
|
|
||||||
# Optional REPL history
|
|
||||||
.node_repl_history
|
|
||||||
|
|
||||||
# Output of 'npm pack'
|
|
||||||
*.tgz
|
|
||||||
|
|
||||||
# Yarn Integrity file
|
|
||||||
.yarn-integrity
|
|
||||||
|
|
||||||
# dotenv environment variables file
|
|
||||||
.env
|
|
||||||
|
|
||||||
# parcel-bundler cache (https://parceljs.org/)
|
|
||||||
.cache
|
|
||||||
|
|
||||||
# next.js build output
|
|
||||||
.next
|
|
||||||
|
|
||||||
# nuxt.js build output
|
|
||||||
.nuxt
|
|
||||||
|
|
||||||
# Nuxt generate
|
|
||||||
dist
|
|
||||||
|
|
||||||
# vuepress build output
|
|
||||||
.vuepress/dist
|
|
||||||
|
|
||||||
# Serverless directories
|
|
||||||
.serverless
|
|
||||||
|
|
||||||
# IDE / Editor
|
|
||||||
.idea
|
|
||||||
|
|
||||||
# Service worker
|
|
||||||
sw.*
|
|
||||||
|
|
||||||
# macOS
|
|
||||||
.DS_Store
|
|
||||||
|
|
||||||
# Vim swap files
|
|
||||||
*.swp
|
|
||||||
|
|
@ -1,69 +0,0 @@
|
||||||
# LikeSopb2b2c
|
|
||||||
|
|
||||||
## Build Setup
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# install dependencies
|
|
||||||
$ npm install
|
|
||||||
|
|
||||||
# serve with hot reload at localhost:3000
|
|
||||||
$ npm run dev
|
|
||||||
|
|
||||||
# build for production and launch server
|
|
||||||
$ npm run build
|
|
||||||
$ npm run start
|
|
||||||
|
|
||||||
# generate static project
|
|
||||||
$ npm run generate
|
|
||||||
```
|
|
||||||
|
|
||||||
For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
|
|
||||||
|
|
||||||
## Special Directories
|
|
||||||
|
|
||||||
You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality.
|
|
||||||
|
|
||||||
### `assets`
|
|
||||||
|
|
||||||
The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
|
|
||||||
|
|
||||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets).
|
|
||||||
|
|
||||||
### `components`
|
|
||||||
|
|
||||||
The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
|
|
||||||
|
|
||||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components).
|
|
||||||
|
|
||||||
### `layouts`
|
|
||||||
|
|
||||||
Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.
|
|
||||||
|
|
||||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts).
|
|
||||||
|
|
||||||
|
|
||||||
### `pages`
|
|
||||||
|
|
||||||
This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically.
|
|
||||||
|
|
||||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing).
|
|
||||||
|
|
||||||
### `plugins`
|
|
||||||
|
|
||||||
The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`.
|
|
||||||
|
|
||||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins).
|
|
||||||
|
|
||||||
### `static`
|
|
||||||
|
|
||||||
This directory contains your static files. Each file inside this directory is mapped to `/`.
|
|
||||||
|
|
||||||
Example: `/static/robots.txt` is mapped as `/robots.txt`.
|
|
||||||
|
|
||||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static).
|
|
||||||
|
|
||||||
### `store`
|
|
||||||
|
|
||||||
This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.
|
|
||||||
|
|
||||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store).
|
|
||||||
|
|
@ -1,223 +0,0 @@
|
||||||
|
|
||||||
|
|
||||||
/** S 背景颜色 **/
|
|
||||||
.bg-primary { background-color: $--color-primary; }
|
|
||||||
|
|
||||||
.bg-white { background-color: $--color-white; }
|
|
||||||
|
|
||||||
.bg-body { background-color: $--background-color-base; }
|
|
||||||
/** E 背景颜色 **/
|
|
||||||
|
|
||||||
|
|
||||||
/** S 字体颜色 **/
|
|
||||||
.primary { color: $--color-primary; }
|
|
||||||
|
|
||||||
.black { color: $--color-black; }
|
|
||||||
|
|
||||||
.white { color: $--color-white; }
|
|
||||||
|
|
||||||
.normal { color: $--color-text-primary; }
|
|
||||||
|
|
||||||
.lighter { color: $--color-text-regular; }
|
|
||||||
|
|
||||||
.muted { color: $--color-text-secondary; }
|
|
||||||
/** E 字体颜色 **/
|
|
||||||
|
|
||||||
|
|
||||||
.border-bottom {
|
|
||||||
border-bottom: $--border-base;
|
|
||||||
}
|
|
||||||
.border-top {
|
|
||||||
border-top: $--border-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-left {
|
|
||||||
border-left: $--border-base;
|
|
||||||
}
|
|
||||||
.border-right {
|
|
||||||
border-right: $--border-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border {
|
|
||||||
border: $--border-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 字体字重
|
|
||||||
@for $i from 100 through 900 {
|
|
||||||
@if $i % 100 == 0 {
|
|
||||||
.weight-#{$i} {
|
|
||||||
font-weight: $i;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/** S 字体大小 **/
|
|
||||||
.xxl { font-size: 18px; }
|
|
||||||
|
|
||||||
.xl { font-size: 17px; }
|
|
||||||
|
|
||||||
.lg { font-size: 16px; }
|
|
||||||
|
|
||||||
.md { font-size: 15px; }
|
|
||||||
|
|
||||||
.nr { font-size: 14px; }
|
|
||||||
|
|
||||||
.sm { font-size: 13px; }
|
|
||||||
|
|
||||||
.xs { font-size: 12px; }
|
|
||||||
|
|
||||||
.xxs { font-size: 11px; }
|
|
||||||
|
|
||||||
// 字体大小[19-40]
|
|
||||||
@for $i from 19 through 50 {
|
|
||||||
.font-size-#{$i} {
|
|
||||||
font-size: $i + px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/** E 字体大小 **/
|
|
||||||
|
|
||||||
|
|
||||||
// 内、外边距[1-60]
|
|
||||||
@for $i from 0 through 60 {
|
|
||||||
// 只要偶数和能被5整除的数
|
|
||||||
@if $i % 2 == 0 or $i % 5 == 0 {
|
|
||||||
// 如：m-30
|
|
||||||
.m-#{$i} {
|
|
||||||
margin: $i + px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如：p-30
|
|
||||||
.p-#{$i} {
|
|
||||||
padding: $i + px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $short, $long in l left, t top, r right, b bottom {
|
|
||||||
//如： m-l-6
|
|
||||||
// 外边距
|
|
||||||
.m-#{$short}-#{$i} {
|
|
||||||
margin-#{$long}: $i + px;
|
|
||||||
}
|
|
||||||
|
|
||||||
//如： p-l-30
|
|
||||||
// 内边距
|
|
||||||
.p-#{$short}-#{$i} {
|
|
||||||
padding-#{$long}: $i + px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 行内块元素
|
|
||||||
.inline { display: inline-block; }
|
|
||||||
|
|
||||||
// 块元素
|
|
||||||
.block { display: block; }
|
|
||||||
|
|
||||||
// 触手
|
|
||||||
.pointer { cursor: pointer }
|
|
||||||
|
|
||||||
|
|
||||||
/** S 弹性布局 **/
|
|
||||||
.flex {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-col {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 定义flex等分
|
|
||||||
@for $i from 0 through 5 {
|
|
||||||
.flex-#{$i} {
|
|
||||||
flex: $i;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-none { flex: none; }
|
|
||||||
|
|
||||||
.flex-wrap { flex-wrap: wrap; }
|
|
||||||
|
|
||||||
.flex-nowrap { flex-wrap: nowrap; }
|
|
||||||
|
|
||||||
.col-baseline { align-items: baseline; }
|
|
||||||
|
|
||||||
.col-center { align-items: center; }
|
|
||||||
|
|
||||||
.col-top { align-items: flex-start; }
|
|
||||||
|
|
||||||
.col-bottom { align-items: flex-end; }
|
|
||||||
|
|
||||||
.col-stretch { align-items:stretch; }
|
|
||||||
|
|
||||||
.row-center { justify-content: center; }
|
|
||||||
|
|
||||||
.row-left { justify-content: flex-start; }
|
|
||||||
|
|
||||||
.row-right { justify-content: flex-end; }
|
|
||||||
|
|
||||||
.row-between { justify-content: space-between; }
|
|
||||||
|
|
||||||
.row-around { justify-content: space-around; }
|
|
||||||
|
|
||||||
/** E 弹性布局 **/
|
|
||||||
|
|
||||||
|
|
||||||
/** S 内容排序方式 **/
|
|
||||||
.text-left { text-align: left; }
|
|
||||||
|
|
||||||
.text-center { text-align: center; }
|
|
||||||
|
|
||||||
.text-right { text-align: right; }
|
|
||||||
/** E 内容排序方式 **/
|
|
||||||
|
|
||||||
|
|
||||||
/** S 文本行数限制 **/
|
|
||||||
.line-1 {
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line-2 { -webkit-line-clamp: 2; }
|
|
||||||
|
|
||||||
.line-3 { -webkit-line-clamp: 3; }
|
|
||||||
|
|
||||||
.line-4 { -webkit-line-clamp: 4; }
|
|
||||||
|
|
||||||
.line-5 { -webkit-line-clamp: 5; }
|
|
||||||
|
|
||||||
.line-2, .line-3, .line-4, .line-5 {
|
|
||||||
overflow: hidden;
|
|
||||||
word-break: break-all;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box; // 弹性伸缩盒
|
|
||||||
-webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
|
|
||||||
}
|
|
||||||
/** E 文本行数限制 **/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 中划线 */
|
|
||||||
.line-through {
|
|
||||||
text-decoration: line-through;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clearfix:after{
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
clear: both;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper1180 {
|
|
||||||
width: 1180px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
@ -1,985 +0,0 @@
|
||||||
|
|
||||||
|
|
||||||
/* Transition
|
|
||||||
-------------------------- */
|
|
||||||
$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
|
|
||||||
$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
|
|
||||||
$--fade-linear-transition: opacity 200ms linear !default;
|
|
||||||
$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
|
|
||||||
$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
|
|
||||||
$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
|
|
||||||
|
|
||||||
/* Color
|
|
||||||
-------------------------- */
|
|
||||||
/// color|1|Brand Color|0
|
|
||||||
$--color-primary: #FF2C3C !default;
|
|
||||||
/// color|1|Background Color|4
|
|
||||||
$--color-white: #FFFFFF !default;
|
|
||||||
/// color|1|Background Color|4
|
|
||||||
$--color-black: #333333 !default;
|
|
||||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
|
|
||||||
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
|
|
||||||
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
|
|
||||||
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
|
|
||||||
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
|
|
||||||
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
|
|
||||||
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
|
|
||||||
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
|
|
||||||
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
|
|
||||||
/// color|1|Functional Color|1
|
|
||||||
$--color-success: #67c23a !default;
|
|
||||||
/// color|1|Functional Color|1
|
|
||||||
$--color-warning: #FB9400 !default;
|
|
||||||
/// color|1|Functional Color|1
|
|
||||||
$--color-danger: #F56C6C !default;
|
|
||||||
/// color|1|Functional Color|1
|
|
||||||
$--color-info: #909399 !default;
|
|
||||||
|
|
||||||
$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
|
|
||||||
$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
|
|
||||||
$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
|
|
||||||
$--color-info-light: mix($--color-white, $--color-info, 80%) !default;
|
|
||||||
|
|
||||||
$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
|
|
||||||
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
|
|
||||||
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
|
|
||||||
$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
|
|
||||||
/// color|1|Font Color|2
|
|
||||||
$--color-text-primary: #333333 !default;
|
|
||||||
/// color|1|Font Color|2
|
|
||||||
$--color-text-regular: #666666 !default;
|
|
||||||
/// color|1|Font Color|2
|
|
||||||
$--color-text-secondary: #999999 !default;
|
|
||||||
/// color|1|Font Color|2
|
|
||||||
$--color-text-placeholder: #999999 !default;
|
|
||||||
/// color|1|Border Color|3
|
|
||||||
$--border-color-base: #E5E5E5E5 !default;
|
|
||||||
/// color|1|Border Color|3
|
|
||||||
$--border-color-light: #f2f2f2f2!default;
|
|
||||||
/// color|1|Border Color|3
|
|
||||||
$--border-color-lighter: #f5f5f5 !default;
|
|
||||||
/// color|1|Border Color|3
|
|
||||||
$--border-color-extra-light: #f5f5f5 !default;
|
|
||||||
|
|
||||||
// Background
|
|
||||||
/// color|1|Background Color|4
|
|
||||||
$--background-color-base: #F5F7F9 !default;
|
|
||||||
|
|
||||||
/* Link
|
|
||||||
-------------------------- */
|
|
||||||
$--link-color: $--color-primary-light-2 !default;
|
|
||||||
$--link-hover-color: $--color-primary !default;
|
|
||||||
|
|
||||||
/* Border
|
|
||||||
-------------------------- */
|
|
||||||
$--border-width-base: 1px !default;
|
|
||||||
$--border-style-base: solid !default;
|
|
||||||
$--border-color-hover: $--color-primary!default;
|
|
||||||
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
|
|
||||||
/// borderRadius|1|Radius|0
|
|
||||||
$--border-radius-base: 4px !default;
|
|
||||||
/// borderRadius|1|Radius|0
|
|
||||||
$--border-radius-small: 2px !default;
|
|
||||||
/// borderRadius|1|Radius|0
|
|
||||||
$--border-radius-circle: 100% !default;
|
|
||||||
/// borderRadius|1|Radius|0
|
|
||||||
$--border-radius-zero: 0 !default;
|
|
||||||
|
|
||||||
// Box-shadow
|
|
||||||
/// boxShadow|1|Shadow|1
|
|
||||||
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
|
|
||||||
// boxShadow|1|Shadow|1
|
|
||||||
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
|
|
||||||
/// boxShadow|1|Shadow|1
|
|
||||||
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
|
|
||||||
|
|
||||||
/* Fill
|
|
||||||
-------------------------- */
|
|
||||||
$--fill-base: $--color-white !default;
|
|
||||||
|
|
||||||
/* Typography
|
|
||||||
-------------------------- */
|
|
||||||
$--font-path: 'fonts' !default;
|
|
||||||
$--font-display: 'auto' !default;
|
|
||||||
/// fontSize|1|Font Size|0
|
|
||||||
$--font-size-extra-large: 17px !default;
|
|
||||||
/// fontSize|1|Font Size|0
|
|
||||||
$--font-size-large: 16px !default;
|
|
||||||
/// fontSize|1|Font Size|0
|
|
||||||
$--font-size-medium: 15px !default;
|
|
||||||
/// fontSize|1|Font Size|0
|
|
||||||
$--font-size-base: 14px !default;
|
|
||||||
/// fontSize|1|Font Size|0
|
|
||||||
$--font-size-small: 12px !default;
|
|
||||||
/// fontSize|1|Font Size|0
|
|
||||||
$--font-size-extra-small: 12px !default;
|
|
||||||
/// fontWeight|1|Font Weight|1
|
|
||||||
$--font-weight-primary: 500 !default;
|
|
||||||
/// fontWeight|1|Font Weight|1
|
|
||||||
$--font-weight-secondary: 100 !default;
|
|
||||||
/// fontLineHeight|1|Line Height|2
|
|
||||||
$--font-line-height-primary: 24px !default;
|
|
||||||
/// fontLineHeight|1|Line Height|2
|
|
||||||
$--font-line-height-secondary: 16px !default;
|
|
||||||
$--font-color-disabled-base: #bbb !default;
|
|
||||||
/* Size
|
|
||||||
-------------------------- */
|
|
||||||
$--size-base: 12px !default;
|
|
||||||
|
|
||||||
/* z-index
|
|
||||||
-------------------------- */
|
|
||||||
$--index-normal: 1 !default;
|
|
||||||
$--index-top: 1000 !default;
|
|
||||||
$--index-popper: 2000 !default;
|
|
||||||
|
|
||||||
/* Disable base
|
|
||||||
-------------------------- */
|
|
||||||
$--disabled-fill-base: $--background-color-base !default;
|
|
||||||
$--disabled-color-base: $--color-text-placeholder !default;
|
|
||||||
$--disabled-border-base: $--border-color-light !default;
|
|
||||||
|
|
||||||
/* Icon
|
|
||||||
-------------------------- */
|
|
||||||
$--icon-color: #666 !default;
|
|
||||||
$--icon-color-base: $--color-info !default;
|
|
||||||
|
|
||||||
/* Checkbox
|
|
||||||
-------------------------- */
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--checkbox-font-size: $--font-size-base !default;
|
|
||||||
/// fontWeight||Font|1
|
|
||||||
$--checkbox-font-weight: 400 !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--checkbox-font-color: $--color-text-primary !default;
|
|
||||||
$--checkbox-input-height: 14px !default;
|
|
||||||
$--checkbox-input-width: 14px !default;
|
|
||||||
/// borderRadius||Border|2
|
|
||||||
$--checkbox-border-radius: $--border-radius-small !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--checkbox-background-color: $--color-white !default;
|
|
||||||
$--checkbox-input-border: $--border-base !default;
|
|
||||||
|
|
||||||
/// color||Color|0
|
|
||||||
$--checkbox-disabled-border-color: $--border-color-base !default;
|
|
||||||
$--checkbox-disabled-input-fill: #edf2fc !default;
|
|
||||||
$--checkbox-disabled-icon-color: $--color-text-placeholder !default;
|
|
||||||
|
|
||||||
$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default;
|
|
||||||
$--checkbox-disabled-checked-input-border-color: $--border-color-base !default;
|
|
||||||
$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default;
|
|
||||||
|
|
||||||
/// color||Color|0
|
|
||||||
$--checkbox-checked-font-color: $--color-primary !default;
|
|
||||||
$--checkbox-checked-input-border-color: $--color-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--checkbox-checked-background-color: $--color-primary !default;
|
|
||||||
$--checkbox-checked-icon-color: $--fill-base !default;
|
|
||||||
|
|
||||||
$--checkbox-input-border-color-hover: $--color-primary !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--checkbox-bordered-height: 40px !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--checkbox-bordered-padding: 9px 20px 9px 10px !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
|
|
||||||
$--checkbox-bordered-medium-input-height: 14px !default;
|
|
||||||
$--checkbox-bordered-medium-input-width: 14px !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--checkbox-bordered-medium-height: 36px !default;
|
|
||||||
$--checkbox-bordered-small-input-height: 12px !default;
|
|
||||||
$--checkbox-bordered-small-input-width: 12px !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--checkbox-bordered-small-height: 32px !default;
|
|
||||||
$--checkbox-bordered-mini-input-height: 12px !default;
|
|
||||||
$--checkbox-bordered-mini-input-width: 12px !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--checkbox-bordered-mini-height: 28px !default;
|
|
||||||
|
|
||||||
/// color||Color|0
|
|
||||||
$--checkbox-button-checked-background-color: $--color-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--checkbox-button-checked-font-color: $--color-white !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--checkbox-button-checked-border-color: $--color-primary !default;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Radio
|
|
||||||
-------------------------- */
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--radio-font-size: $--font-size-base !default;
|
|
||||||
/// fontWeight||Font|1
|
|
||||||
$--radio-font-weight: 400 !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--radio-font-color: $--color-text-primary !default;
|
|
||||||
$--radio-input-height: 14px !default;
|
|
||||||
$--radio-input-width: 14px !default;
|
|
||||||
/// borderRadius||Border|2
|
|
||||||
$--radio-input-border-radius: $--border-radius-circle !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--radio-input-background-color: $--color-white !default;
|
|
||||||
$--radio-input-border: $--border-base !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--radio-input-border-color: $--border-color-base !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--radio-icon-color: $--color-white !default;
|
|
||||||
|
|
||||||
$--radio-disabled-input-border-color: $--disabled-border-base !default;
|
|
||||||
$--radio-disabled-input-fill: $--disabled-fill-base !default;
|
|
||||||
$--radio-disabled-icon-color: $--disabled-fill-base !default;
|
|
||||||
|
|
||||||
$--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
|
|
||||||
$--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
|
|
||||||
$--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
|
|
||||||
|
|
||||||
/// color||Color|0
|
|
||||||
$--radio-checked-font-color: $--color-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--radio-checked-input-border-color: $--color-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--radio-checked-input-background-color: $--color-white !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--radio-checked-icon-color: $--color-primary !default;
|
|
||||||
|
|
||||||
$--radio-input-border-color-hover: $--color-primary !default;
|
|
||||||
|
|
||||||
$--radio-bordered-height: 40px !default;
|
|
||||||
$--radio-bordered-padding: 12px 20px 0 10px !default;
|
|
||||||
$--radio-bordered-medium-padding: 10px 20px 0 10px !default;
|
|
||||||
$--radio-bordered-small-padding: 8px 15px 0 10px !default;
|
|
||||||
$--radio-bordered-mini-padding: 6px 15px 0 10px !default;
|
|
||||||
$--radio-bordered-medium-input-height: 14px !default;
|
|
||||||
$--radio-bordered-medium-input-width: 14px !default;
|
|
||||||
$--radio-bordered-medium-height: 36px !default;
|
|
||||||
$--radio-bordered-small-input-height: 12px !default;
|
|
||||||
$--radio-bordered-small-input-width: 12px !default;
|
|
||||||
$--radio-bordered-small-height: 32px !default;
|
|
||||||
$--radio-bordered-mini-input-height: 12px !default;
|
|
||||||
$--radio-bordered-mini-input-width: 12px !default;
|
|
||||||
$--radio-bordered-mini-height: 28px !default;
|
|
||||||
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--radio-button-font-size: $--font-size-base !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--radio-button-checked-background-color: $--color-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--radio-button-checked-font-color: $--color-white !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--radio-button-checked-border-color: $--color-primary !default;
|
|
||||||
$--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
|
|
||||||
|
|
||||||
/* Select
|
|
||||||
-------------------------- */
|
|
||||||
$--select-border-color-hover: $--border-color-hover !default;
|
|
||||||
$--select-disabled-border: $--disabled-border-base !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--select-font-size: $--font-size-base !default;
|
|
||||||
$--select-close-hover-color: $--color-text-secondary !default;
|
|
||||||
|
|
||||||
$--select-input-color: $--color-text-placeholder !default;
|
|
||||||
$--select-multiple-input-color: #666 !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--select-input-focus-border-color: $--color-primary !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--select-input-font-size: $--font-size-base !default;
|
|
||||||
|
|
||||||
$--select-option-color: $--color-text-regular !default;
|
|
||||||
$--select-option-disabled-color: $--color-text-placeholder !default;
|
|
||||||
$--select-option-disabled-background: $--color-white !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--select-option-height: 34px !default;
|
|
||||||
$--select-option-hover-background: $--background-color-base !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--select-option-selected-font-color: $--color-primary !default;
|
|
||||||
$--select-option-selected-hover: $--background-color-base !default;
|
|
||||||
|
|
||||||
$--select-group-color: $--color-info !default;
|
|
||||||
$--select-group-height: 30px !default;
|
|
||||||
$--select-group-font-size: $--font-size-base !default;
|
|
||||||
|
|
||||||
$--select-dropdown-background: $--color-white !default;
|
|
||||||
$--select-dropdown-shadow: $--box-shadow-light !default;
|
|
||||||
$--select-dropdown-empty-color: #999 !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--select-dropdown-max-height: 274px !default;
|
|
||||||
$--select-dropdown-padding: 6px 0 !default;
|
|
||||||
$--select-dropdown-empty-padding: 10px 0 !default;
|
|
||||||
$--select-dropdown-border: solid 1px $--border-color-light !default;
|
|
||||||
|
|
||||||
/* Alert
|
|
||||||
-------------------------- */
|
|
||||||
$--alert-padding: 8px 16px !default;
|
|
||||||
/// borderRadius||Border|2
|
|
||||||
$--alert-border-radius: $--border-radius-base !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--alert-title-font-size: $--font-size-base !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--alert-description-font-size: $--font-size-base !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--alert-close-font-size: $--font-size-base !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--alert-close-customed-font-size: $--font-size-base !default;
|
|
||||||
|
|
||||||
$--alert-success-color: $--color-success-lighter !default;
|
|
||||||
$--alert-info-color: $--color-info-lighter !default;
|
|
||||||
$--alert-warning-color: $--color-warning-lighter !default;
|
|
||||||
$--alert-danger-color: $--color-danger-lighter !default;
|
|
||||||
|
|
||||||
/// height||Other|4
|
|
||||||
$--alert-icon-size: 16px !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--alert-icon-large-size: 28px !default;
|
|
||||||
|
|
||||||
/* MessageBox
|
|
||||||
-------------------------- */
|
|
||||||
/// color||Color|0
|
|
||||||
$--messagebox-title-color: $--color-text-primary !default;
|
|
||||||
$--msgbox-width: 420px !default;
|
|
||||||
$--msgbox-border-radius: 4px !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--messagebox-font-size: $--font-size-large !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--messagebox-content-font-size: $--font-size-base !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--messagebox-content-color: $--color-text-regular !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--messagebox-error-font-size: 12px !default;
|
|
||||||
$--msgbox-padding-primary: 15px !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--messagebox-success-color: $--color-success !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--messagebox-info-color: $--color-info !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--messagebox-warning-color: $--color-warning !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--messagebox-danger-color: $--color-danger !default;
|
|
||||||
|
|
||||||
/* Message
|
|
||||||
-------------------------- */
|
|
||||||
$--message-shadow: $--box-shadow-base !default;
|
|
||||||
$--message-min-width: 380px !default;
|
|
||||||
$--message-background-color: #edf2fc !default;
|
|
||||||
$--message-padding: 15px 15px 15px 20px !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--message-close-icon-color: $--color-text-placeholder !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--message-close-size: 16px !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--message-close-hover-color: $--color-text-secondary !default;
|
|
||||||
|
|
||||||
/// color||Color|0
|
|
||||||
$--message-success-font-color: $--color-success !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--message-info-font-color: $--color-info !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--message-warning-font-color: $--color-warning !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--message-danger-font-color: $--color-danger !default;
|
|
||||||
|
|
||||||
/* Notification
|
|
||||||
-------------------------- */
|
|
||||||
$--notification-width: 330px !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--notification-padding: 14px 26px 14px 13px !default;
|
|
||||||
$--notification-radius: 8px !default;
|
|
||||||
$--notification-shadow: $--box-shadow-light !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--notification-border-color: $--border-color-lighter !default;
|
|
||||||
$--notification-icon-size: 24px !default;
|
|
||||||
$--notification-close-font-size: $--message-close-size !default;
|
|
||||||
$--notification-group-margin-left: 13px !default;
|
|
||||||
$--notification-group-margin-right: 8px !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--notification-content-font-size: $--font-size-base !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--notification-content-color: $--color-text-regular !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--notification-title-font-size: 16px !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--notification-title-color: $--color-text-primary !default;
|
|
||||||
|
|
||||||
/// color||Color|0
|
|
||||||
$--notification-close-color: $--color-text-secondary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--notification-close-hover-color: $--color-text-regular !default;
|
|
||||||
|
|
||||||
/// color||Color|0
|
|
||||||
$--notification-success-icon-color: $--color-success !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--notification-info-icon-color: $--color-info !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--notification-warning-icon-color: $--color-warning !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--notification-danger-icon-color: $--color-danger !default;
|
|
||||||
|
|
||||||
/* Input
|
|
||||||
-------------------------- */
|
|
||||||
$--input-font-size: $--font-size-base !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--input-font-color: $--color-text-regular !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--input-width: 140px !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--input-height: 40px !default;
|
|
||||||
$--input-border: $--border-base !default;
|
|
||||||
$--input-border-color: $--border-color-base !default;
|
|
||||||
/// borderRadius||Border|2
|
|
||||||
$--input-border-radius: $--border-radius-base !default;
|
|
||||||
$--input-border-color-hover: $--border-color-hover !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--input-background-color: $--color-white !default;
|
|
||||||
$--input-fill-disabled: $--disabled-fill-base !default;
|
|
||||||
$--input-color-disabled: $--font-color-disabled-base !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--input-icon-color: $--color-text-placeholder !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--input-placeholder-color: $--color-text-placeholder !default;
|
|
||||||
$--input-max-width: 314px !default;
|
|
||||||
|
|
||||||
$--input-hover-border: $--border-color-hover !default;
|
|
||||||
$--input-clear-hover-color: $--color-text-secondary !default;
|
|
||||||
|
|
||||||
$--input-focus-border: $--color-primary !default;
|
|
||||||
$--input-focus-fill: $--color-white !default;
|
|
||||||
|
|
||||||
$--input-disabled-fill: $--disabled-fill-base !default;
|
|
||||||
$--input-disabled-border: $--disabled-border-base !default;
|
|
||||||
$--input-disabled-color: $--disabled-color-base !default;
|
|
||||||
$--input-disabled-placeholder-color: $--color-text-placeholder !default;
|
|
||||||
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--input-medium-font-size: 14px !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--input-medium-height: 36px !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--input-small-font-size: $--font-size-small !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--input-small-height: 32px !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--input-mini-font-size: 12px !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--input-mini-height: 28px !default;
|
|
||||||
|
|
||||||
/* Cascader
|
|
||||||
-------------------------- */
|
|
||||||
/// color||Color|0
|
|
||||||
$--cascader-menu-font-color: $--color-text-regular !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--cascader-menu-selected-font-color: $--color-primary !default;
|
|
||||||
$--cascader-menu-fill: $--fill-base !default;
|
|
||||||
$--cascader-menu-font-size: $--font-size-base !default;
|
|
||||||
$--cascader-menu-radius: $--border-radius-base !default;
|
|
||||||
$--cascader-menu-border: solid 1px $--border-color-light !default;
|
|
||||||
$--cascader-menu-shadow: $--box-shadow-light !default;
|
|
||||||
$--cascader-node-background-hover: $--background-color-base !default;
|
|
||||||
$--cascader-node-color-disabled:$--color-text-placeholder !default;
|
|
||||||
$--cascader-color-empty:$--color-text-placeholder !default;
|
|
||||||
$--cascader-tag-background: #f0f2f5;
|
|
||||||
|
|
||||||
/* Group
|
|
||||||
-------------------------- */
|
|
||||||
$--group-option-flex: 0 0 (1/5) * 100% !default;
|
|
||||||
$--group-option-offset-bottom: 12px !default;
|
|
||||||
$--group-option-fill-hover: rgba($--color-black, 0.06) !default;
|
|
||||||
$--group-title-color: $--color-black !default;
|
|
||||||
$--group-title-font-size: $--font-size-base !default;
|
|
||||||
$--group-title-width: 66px !default;
|
|
||||||
|
|
||||||
/* Tab
|
|
||||||
-------------------------- */
|
|
||||||
$--tab-font-size: $--font-size-medium !default;
|
|
||||||
$--tab-border-line: 1px solid #e4e4e4 !default;
|
|
||||||
$--tab-header-color-active: $--color-text-secondary !default;
|
|
||||||
$--tab-header-color-hover: $--color-text-regular !default;
|
|
||||||
$--tab-header-color: $--color-text-regular !default;
|
|
||||||
$--tab-header-fill-active: rgba($--color-black, 0.06) !default;
|
|
||||||
$--tab-header-fill-hover: rgba($--color-black, 0.06) !default;
|
|
||||||
$--tab-vertical-header-width: 90px !default;
|
|
||||||
$--tab-vertical-header-count-color: $--color-white !default;
|
|
||||||
$--tab-vertical-header-count-fill: $--color-text-secondary !default;
|
|
||||||
|
|
||||||
/* Button
|
|
||||||
-------------------------- */
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--button-font-size: 14px !default;
|
|
||||||
/// fontWeight||Font|1
|
|
||||||
$--button-font-weight: 400 !default;
|
|
||||||
/// borderRadius||Border|2
|
|
||||||
$--button-border-radius: $--border-radius-base !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--button-padding-vertical: 12px !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--button-padding-horizontal: 20px !default;
|
|
||||||
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--button-medium-font-size: 13px !default;
|
|
||||||
/// borderRadius||Border|2
|
|
||||||
$--button-medium-border-radius: $--border-radius-base !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--button-medium-padding-vertical: 10px !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--button-medium-padding-horizontal: 20px !default;
|
|
||||||
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--button-small-font-size: 12px !default;
|
|
||||||
$--button-small-border-radius: #{$--border-radius-base - 1} !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--button-small-padding-vertical: 9px !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--button-small-padding-horizontal: 15px !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--button-mini-font-size: 12px !default;
|
|
||||||
$--button-mini-border-radius: #{$--border-radius-base - 1} !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--button-mini-padding-vertical: 7px !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--button-mini-padding-horizontal: 12px !default;
|
|
||||||
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-default-font-color: $--color-text-regular !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-default-background-color: $--color-white !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-default-border-color: $--border-color-base !default;
|
|
||||||
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-disabled-font-color: $--color-text-placeholder !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-disabled-background-color: $--color-white !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-disabled-border-color: $--border-color-lighter !default;
|
|
||||||
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-primary-border-color: $--color-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-primary-font-color: $--color-white !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-primary-background-color: $--color-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-success-border-color: $--color-success !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-success-font-color: $--color-white !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-success-background-color: $--color-success !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-warning-border-color: $--color-warning !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-warning-font-color: $--color-white !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-warning-background-color: $--color-warning !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-danger-border-color: $--color-danger !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-danger-font-color: $--color-white !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-danger-background-color: $--color-danger !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-info-border-color: $--color-info !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-info-font-color: $--color-white !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--button-info-background-color: $--color-info !default;
|
|
||||||
|
|
||||||
$--button-hover-tint-percent: 20% !default;
|
|
||||||
$--button-active-shade-percent: 10% !default;
|
|
||||||
|
|
||||||
|
|
||||||
/* cascader
|
|
||||||
-------------------------- */
|
|
||||||
$--cascader-height: 200px !default;
|
|
||||||
|
|
||||||
/* Switch
|
|
||||||
-------------------------- */
|
|
||||||
/// color||Color|0
|
|
||||||
$--switch-on-color: $--color-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--switch-off-color: $--border-color-base !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--switch-font-size: $--font-size-base !default;
|
|
||||||
$--switch-core-border-radius: 10px !default;
|
|
||||||
// height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义
|
|
||||||
$--switch-width: 36px !default;
|
|
||||||
// height||Other|4
|
|
||||||
$--switch-height: 18px !default;
|
|
||||||
// height||Other|4
|
|
||||||
$--switch-button-size: 14px !default;
|
|
||||||
|
|
||||||
/* Dialog
|
|
||||||
-------------------------- */
|
|
||||||
$--dialog-background-color: $--color-white !default;
|
|
||||||
$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--dialog-title-font-size: $--font-size-large !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--dialog-content-font-size: $--font-size-base !default;
|
|
||||||
/// fontLineHeight||LineHeight|2
|
|
||||||
$--dialog-font-line-height: $--font-line-height-primary !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--dialog-padding-primary: 20px !default;
|
|
||||||
|
|
||||||
/* Table
|
|
||||||
-------------------------- */
|
|
||||||
/// color||Color|0
|
|
||||||
$--table-border-color: $--border-color-light !default;
|
|
||||||
$--table-border: 1px solid $--table-border-color !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--table-font-color: $--color-text-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--table-header-font-color: $--color-text-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--table-row-hover-background-color: #F5F8FF !default;
|
|
||||||
$--table-current-row-background-color: $--color-primary-light-9 !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--table-header-background-color: $--color-white !default;
|
|
||||||
$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
|
|
||||||
|
|
||||||
/* Pagination
|
|
||||||
-------------------------- */
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--pagination-font-size: $--font-size-base !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--pagination-background-color: $--color-white !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--pagination-font-color: $--color-text-primary !default;
|
|
||||||
$--pagination-border-radius: 3px !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--pagination-button-color: $--color-text-primary !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--pagination-button-width: 35.5px !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--pagination-button-height: 28px !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--pagination-button-disabled-color: $--color-text-placeholder !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--pagination-button-disabled-background-color: $--color-white !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--pagination-hover-color: $--color-primary !default;
|
|
||||||
|
|
||||||
/* Popup
|
|
||||||
-------------------------- */
|
|
||||||
/// color||Color|0
|
|
||||||
$--popup-modal-background-color: $--color-black !default;
|
|
||||||
/// opacity||Other|1
|
|
||||||
$--popup-modal-opacity: 0.5 !default;
|
|
||||||
|
|
||||||
/* Popover
|
|
||||||
-------------------------- */
|
|
||||||
/// color||Color|0
|
|
||||||
$--popover-background-color: $--color-white !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--popover-font-size: $--font-size-base !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--popover-border-color: $--border-color-lighter !default;
|
|
||||||
$--popover-arrow-size: 6px !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--popover-padding: 12px !default;
|
|
||||||
$--popover-padding-large: 18px 20px !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--popover-title-font-size: $--font-size-medium !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--popover-title-font-color: $--color-text-primary !default;
|
|
||||||
|
|
||||||
/* Tooltip
|
|
||||||
-------------------------- */
|
|
||||||
/// color|1|Color|0
|
|
||||||
$--tooltip-fill: $--color-text-primary !default;
|
|
||||||
/// color|1|Color|0
|
|
||||||
$--tooltip-color: $--color-white !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--tooltip-font-size: 12px !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--tooltip-border-color: $--color-text-primary !default;
|
|
||||||
$--tooltip-arrow-size: 6px !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--tooltip-padding: 10px !default;
|
|
||||||
|
|
||||||
/* Tag
|
|
||||||
-------------------------- */
|
|
||||||
/// color||Color|0
|
|
||||||
$--tag-info-color: $--color-info !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--tag-primary-color: $--color-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--tag-success-color: $--color-success !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--tag-warning-color: $--color-warning !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--tag-danger-color: $--color-danger !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--tag-font-size: 12px !default;
|
|
||||||
$--tag-border-radius: 4px !default;
|
|
||||||
$--tag-padding: 0 10px !default;
|
|
||||||
|
|
||||||
/* Tree
|
|
||||||
-------------------------- */
|
|
||||||
/// color||Color|0
|
|
||||||
$--tree-node-hover-background-color: $--background-color-base !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--tree-font-color: $--color-text-regular !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--tree-expand-icon-color: $--color-text-placeholder !default;
|
|
||||||
|
|
||||||
/* Dropdown
|
|
||||||
-------------------------- */
|
|
||||||
$--dropdown-menu-box-shadow: $--box-shadow-light !default;
|
|
||||||
$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;
|
|
||||||
$--dropdown-menuItem-hover-color: $--link-color !default;
|
|
||||||
|
|
||||||
/* Badge
|
|
||||||
-------------------------- */
|
|
||||||
/// color||Color|0
|
|
||||||
$--badge-background-color: $--color-danger !default;
|
|
||||||
$--badge-radius: 10px !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--badge-font-size: 12px !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--badge-padding: 6px !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--badge-size: 18px !default;
|
|
||||||
|
|
||||||
/* Card
|
|
||||||
--------------------------*/
|
|
||||||
/// color||Color|0
|
|
||||||
$--card-border-color: $--border-color-light !default;
|
|
||||||
$--card-border-radius: 4px !default;
|
|
||||||
/// padding||Spacing|3
|
|
||||||
$--card-padding: 20px !default;
|
|
||||||
|
|
||||||
/* Slider
|
|
||||||
--------------------------*/
|
|
||||||
/// color||Color|0
|
|
||||||
$--slider-main-background-color: $--color-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--slider-runway-background-color: $--border-color-light !default;
|
|
||||||
$--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
|
|
||||||
$--slider-stop-background-color: $--color-white !default;
|
|
||||||
$--slider-disable-color: $--color-text-placeholder !default;
|
|
||||||
$--slider-margin: 16px 0 !default;
|
|
||||||
$--slider-border-radius: 3px !default;
|
|
||||||
/// height|1|Other|4
|
|
||||||
$--slider-height: 6px !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--slider-button-size: 10px !default;
|
|
||||||
$--slider-button-wrapper-size: 36px !default;
|
|
||||||
$--slider-button-wrapper-offset: -15px !default;
|
|
||||||
|
|
||||||
/* Steps
|
|
||||||
--------------------------*/
|
|
||||||
$--steps-border-color: $--disabled-border-base !default;
|
|
||||||
$--steps-border-radius: 4px !default;
|
|
||||||
$--steps-padding: 20px !default;
|
|
||||||
|
|
||||||
/* Menu
|
|
||||||
--------------------------*/
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--menu-item-font-size: $--font-size-base !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--menu-item-font-color: $--color-text-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--menu-background-color: $--color-white !default;
|
|
||||||
$--menu-item-hover-fill: $--color-primary-light-9 !default;
|
|
||||||
|
|
||||||
/* Rate
|
|
||||||
--------------------------*/
|
|
||||||
$--rate-height: 20px !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--rate-font-size: $--font-size-base !default;
|
|
||||||
/// height||Other|3
|
|
||||||
$--rate-icon-size: 18px !default;
|
|
||||||
/// margin||Spacing|2
|
|
||||||
$--rate-icon-margin: 6px !default;
|
|
||||||
$--rate-icon-color: $--color-text-placeholder !default;
|
|
||||||
|
|
||||||
/* DatePicker
|
|
||||||
--------------------------*/
|
|
||||||
$--datepicker-font-color: $--color-text-regular !default;
|
|
||||||
/// color|1|Color|0
|
|
||||||
$--datepicker-off-font-color: $--color-text-placeholder !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--datepicker-header-font-color: $--color-text-regular !default;
|
|
||||||
$--datepicker-icon-color: $--color-text-primary !default;
|
|
||||||
$--datepicker-border-color: $--disabled-border-base !default;
|
|
||||||
$--datepicker-inner-border-color: #e4e4e4 !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--datepicker-inrange-background-color: $--border-color-extra-light !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--datepicker-inrange-hover-background-color: $--border-color-extra-light !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--datepicker-active-color: $--color-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--datepicker-hover-font-color: $--color-primary !default;
|
|
||||||
$--datepicker-cell-hover-color: #fff !default;
|
|
||||||
|
|
||||||
/* Loading
|
|
||||||
--------------------------*/
|
|
||||||
/// height||Other|4
|
|
||||||
$--loading-spinner-size: 42px !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--loading-fullscreen-spinner-size: 50px !default;
|
|
||||||
|
|
||||||
/* Scrollbar
|
|
||||||
--------------------------*/
|
|
||||||
$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default;
|
|
||||||
$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;
|
|
||||||
|
|
||||||
/* Carousel
|
|
||||||
--------------------------*/
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--carousel-arrow-font-size: 12px !default;
|
|
||||||
$--carousel-arrow-size: 36px !default;
|
|
||||||
$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
|
|
||||||
$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
|
|
||||||
/// width||Other|4
|
|
||||||
$--carousel-indicator-width: 30px !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--carousel-indicator-height: 2px !default;
|
|
||||||
$--carousel-indicator-padding-horizontal: 4px !default;
|
|
||||||
$--carousel-indicator-padding-vertical: 12px !default;
|
|
||||||
$--carousel-indicator-out-color: $--border-color-hover !default;
|
|
||||||
|
|
||||||
/* Collapse
|
|
||||||
--------------------------*/
|
|
||||||
/// color||Color|0
|
|
||||||
$--collapse-border-color: $--border-color-lighter !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--collapse-header-height: 48px !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--collapse-header-background-color: $--color-white !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--collapse-header-font-color: $--color-text-primary !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--collapse-header-font-size: 12px !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--collapse-content-background-color: $--color-white !default;
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--collapse-content-font-size: 12px !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--collapse-content-font-color: $--color-text-primary !default;
|
|
||||||
|
|
||||||
/* Transfer
|
|
||||||
--------------------------*/
|
|
||||||
$--transfer-border-color: $--border-color-lighter !default;
|
|
||||||
$--transfer-border-radius: $--border-radius-base !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--transfer-panel-width: 200px !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--transfer-panel-header-height: 40px !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--transfer-panel-header-background-color: $--background-color-base !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--transfer-panel-footer-height: 40px !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--transfer-panel-body-height: 246px !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--transfer-item-height: 30px !default;
|
|
||||||
/// height||Other|4
|
|
||||||
$--transfer-filter-height: 32px !default;
|
|
||||||
|
|
||||||
/* Header
|
|
||||||
--------------------------*/
|
|
||||||
$--header-padding: 0 20px !default;
|
|
||||||
|
|
||||||
/* Footer
|
|
||||||
--------------------------*/
|
|
||||||
$--footer-padding: 0 20px !default;
|
|
||||||
|
|
||||||
/* Main
|
|
||||||
--------------------------*/
|
|
||||||
$--main-padding: 20px !default;
|
|
||||||
|
|
||||||
/* Timeline
|
|
||||||
--------------------------*/
|
|
||||||
$--timeline-node-size-normal: 12px !default;
|
|
||||||
$--timeline-node-size-large: 14px !default;
|
|
||||||
$--timeline-node-color: $--border-color-light !default;
|
|
||||||
|
|
||||||
/* Backtop
|
|
||||||
--------------------------*/
|
|
||||||
/// color||Color|0
|
|
||||||
$--backtop-background-color: $--color-white !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--backtop-font-color: $--color-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--backtop-hover-background-color: $--border-color-extra-light !default;
|
|
||||||
|
|
||||||
/* Link
|
|
||||||
--------------------------*/
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--link-font-size: $--font-size-base !default;
|
|
||||||
/// fontWeight||Font|1
|
|
||||||
$--link-font-weight: $--font-weight-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--link-default-font-color: $--color-text-regular !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--link-default-active-color: $--color-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--link-disabled-font-color: $--color-text-placeholder !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--link-primary-font-color: $--color-primary !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--link-success-font-color: $--color-success !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--link-warning-font-color: $--color-warning !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--link-danger-font-color: $--color-danger !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--link-info-font-color: $--color-info !default;
|
|
||||||
/* Calendar
|
|
||||||
--------------------------*/
|
|
||||||
/// border||Other|4
|
|
||||||
$--calendar-border: $--table-border !default;
|
|
||||||
/// color||Other|4
|
|
||||||
$--calendar-selected-background-color: #F2F8FE !default;
|
|
||||||
$--calendar-cell-width: 85px !default;
|
|
||||||
|
|
||||||
/* Form
|
|
||||||
-------------------------- */
|
|
||||||
/// fontSize||Font|1
|
|
||||||
$--form-label-font-size: $--font-size-base !default;
|
|
||||||
|
|
||||||
/* Avatar
|
|
||||||
--------------------------*/
|
|
||||||
/// color||Color|0
|
|
||||||
$--avatar-font-color: #fff !default;
|
|
||||||
/// color||Color|0
|
|
||||||
$--avatar-background-color: #C0C4CC !default;
|
|
||||||
/// fontSize||Font Size|1
|
|
||||||
$--avatar-text-font-size: 12px !default;
|
|
||||||
/// fontSize||Font Size|1
|
|
||||||
$--avatar-icon-font-size: 14px !default;
|
|
||||||
/// borderRadius||Border|2
|
|
||||||
$--avatar-border-radius: $--border-radius-base !default;
|
|
||||||
/// size|1|Avatar Size|3
|
|
||||||
$--avatar-large-size: 40px !default;
|
|
||||||
/// size|1|Avatar Size|3
|
|
||||||
$--avatar-medium-size: 36px !default;
|
|
||||||
/// size|1|Avatar Size|3
|
|
||||||
$--avatar-small-size: 28px !default;
|
|
||||||
|
|
||||||
/* Empty
|
|
||||||
-------------------------- */
|
|
||||||
$--empty-padding: 40px 0 !default;
|
|
||||||
$--empty-image-width: 160px !default;
|
|
||||||
$--empty-description-margin-top: 20px !default;
|
|
||||||
$--empty-bottom-margin-top: 20px !default;
|
|
||||||
|
|
||||||
/* Skeleton
|
|
||||||
--------------------------*/
|
|
||||||
$--skeleton-color: #f2f2f2 !default;
|
|
||||||
$--skeleton-to-color: #e6e6e6 !default;
|
|
||||||
|
|
||||||
/* Svg
|
|
||||||
--------------- */
|
|
||||||
$--svg-monochrome-grey: #DCDDE0 !default;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* icon font path, required */
|
|
||||||
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
|
||||||
|
|
||||||
|
|
||||||
@import "~element-ui/packages/theme-chalk/src/index";
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
.el-tabs {
|
|
||||||
.el-tabs__nav-wrap::after {
|
|
||||||
height: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tabs__nav-scroll {
|
|
||||||
padding-left: 20px;
|
|
||||||
|
|
||||||
.el-tabs__item {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 45px;
|
|
||||||
height: 45px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.el-message-box__message {
|
|
||||||
white-space: pre-line;
|
|
||||||
}
|
|
||||||
|
|
||||||
body .el-tabs__content {
|
|
||||||
overflow: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
body .el-popover {
|
|
||||||
min-width: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination .el-pagination.is-background .btn-prev,
|
|
||||||
.pagination .el-pagination.is-background .btn-next,
|
|
||||||
.pagination .el-pagination.is-background .el-pager li {
|
|
||||||
background: #fff;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-carousel {
|
|
||||||
.el-carousel__arrow {
|
|
||||||
width: 40 px;
|
|
||||||
height: 40 px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
body {
|
|
||||||
/* 定义一些主题色及基础样式 */
|
|
||||||
font-family: PingFang SC, Arial, Hiragino Sans GB, Microsoft YaHei, sans-serif;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
background-color: $--background-color-base;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $--color-text-primary;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
*, :after, :before {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
button, input {
|
|
||||||
font-family: PingFang SC, Arial, Hiragino Sans GB, Microsoft YaHei, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul,li,ol {
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 去除number类型input框加减号
|
|
||||||
/* 谷歌 */
|
|
||||||
input::-webkit-outer-spin-button,
|
|
||||||
input::-webkit-inner-spin-button {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
/* 火狐 */
|
|
||||||
input{
|
|
||||||
-moz-appearance:textfield;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: unset;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
/* Color
|
|
||||||
-------------------------- */
|
|
||||||
/// color|1|Brand Color|0
|
|
||||||
$--color-primary: #FF2C3C !default;
|
|
||||||
/// color|1|Background Color|4
|
|
||||||
$--color-white: #FFFFFF !default;
|
|
||||||
/// color|1|Background Color|4
|
|
||||||
$--color-black: #333333 !default;
|
|
||||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
|
|
||||||
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
|
|
||||||
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
|
|
||||||
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
|
|
||||||
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
|
|
||||||
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
|
|
||||||
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
|
|
||||||
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
|
|
||||||
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
|
|
||||||
|
|
||||||
/// color|1|Font Color|2
|
|
||||||
$--color-text-primary: #333333 !default;
|
|
||||||
/// color|1|Font Color|2
|
|
||||||
$--color-text-regular: #666666 !default;
|
|
||||||
/// color|1|Font Color|2
|
|
||||||
$--color-text-secondary: #999999 !default;
|
|
||||||
/// color|1|Font Color|2
|
|
||||||
$--color-text-placeholder: #999999 !default;
|
|
||||||
/// color|1|Border Color|3
|
|
||||||
$--border-color-base: #E5E5E5E5 !default;
|
|
||||||
/// color|1|Border Color|3
|
|
||||||
$--border-color-light: #f2f2f2f2!default;
|
|
||||||
/// color|1|Functional Color|1
|
|
||||||
$--color-success: #67c23a !default;
|
|
||||||
/// color|1|Functional Color|1
|
|
||||||
$--color-warning: #FB9400 !default;
|
|
||||||
/// color|1|Functional Color|1
|
|
||||||
$--color-danger: #F56C6C !default;
|
|
||||||
/// color|1|Functional Color|1
|
|
||||||
$--color-info: #909399 !default;
|
|
||||||
// Background
|
|
||||||
/// color|1|Background Color|4
|
|
||||||
$--background-color-base: #F5F7F9 !default;
|
|
||||||
|
|
||||||
/* Border
|
|
||||||
-------------------------- */
|
|
||||||
$--border-width-base: 1px !default;
|
|
||||||
$--border-style-base: solid !default;
|
|
||||||
$--border-color-hover: $--color-primary!default;
|
|
||||||
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
|
|
||||||
|
|
||||||
$--font-size-base: 14px !default;
|
|
||||||
|
|
@ -1,539 +0,0 @@
|
||||||
/* Logo 字体 */
|
|
||||||
@font-face {
|
|
||||||
font-family: "iconfont logo";
|
|
||||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
|
||||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
|
||||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
|
||||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
|
||||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
font-family: "iconfont logo";
|
|
||||||
font-size: 160px;
|
|
||||||
font-style: normal;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* tabs */
|
|
||||||
.nav-tabs {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-tabs .nav-more {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
height: 42px;
|
|
||||||
line-height: 42px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tabs {
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tabs li {
|
|
||||||
cursor: pointer;
|
|
||||||
width: 100px;
|
|
||||||
height: 40px;
|
|
||||||
line-height: 40px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 16px;
|
|
||||||
border-bottom: 2px solid transparent;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
margin-bottom: -1px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#tabs .active {
|
|
||||||
border-bottom-color: #f00;
|
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-container .content {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 页面布局 */
|
|
||||||
.main {
|
|
||||||
padding: 30px 100px;
|
|
||||||
width: 960px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main .logo {
|
|
||||||
color: #333;
|
|
||||||
text-align: left;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
line-height: 1;
|
|
||||||
height: 110px;
|
|
||||||
margin-top: -50px;
|
|
||||||
overflow: hidden;
|
|
||||||
*zoom: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main .logo a {
|
|
||||||
font-size: 160px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.helps {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.helps pre {
|
|
||||||
padding: 20px;
|
|
||||||
margin: 10px 0;
|
|
||||||
border: solid 1px #e7e1cd;
|
|
||||||
background-color: #fffdef;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon_lists {
|
|
||||||
width: 100% !important;
|
|
||||||
overflow: hidden;
|
|
||||||
*zoom: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon_lists li {
|
|
||||||
width: 100px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
margin-right: 20px;
|
|
||||||
text-align: center;
|
|
||||||
list-style: none !important;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon_lists li .code-name {
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon_lists .icon {
|
|
||||||
display: block;
|
|
||||||
height: 100px;
|
|
||||||
line-height: 100px;
|
|
||||||
font-size: 42px;
|
|
||||||
margin: 10px auto;
|
|
||||||
color: #333;
|
|
||||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
|
||||||
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
|
||||||
transition: font-size 0.25s linear, width 0.25s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon_lists .icon:hover {
|
|
||||||
font-size: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon_lists .svg-icon {
|
|
||||||
/* 通过设置 font-size 来改变图标大小 */
|
|
||||||
width: 1em;
|
|
||||||
/* 图标和文字相邻时，垂直对齐 */
|
|
||||||
vertical-align: -0.15em;
|
|
||||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
|
||||||
fill: currentColor;
|
|
||||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
|
||||||
normalize.css 中也包含这行 */
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon_lists li .name,
|
|
||||||
.icon_lists li .code-name {
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* markdown 样式 */
|
|
||||||
.markdown {
|
|
||||||
color: #666;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown img {
|
|
||||||
vertical-align: middle;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h1 {
|
|
||||||
color: #404040;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 40px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h2,
|
|
||||||
.markdown h3,
|
|
||||||
.markdown h4,
|
|
||||||
.markdown h5,
|
|
||||||
.markdown h6 {
|
|
||||||
color: #404040;
|
|
||||||
margin: 1.6em 0 0.6em 0;
|
|
||||||
font-weight: 500;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h1 {
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h2 {
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h3 {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h4 {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h5 {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h6 {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown hr {
|
|
||||||
height: 1px;
|
|
||||||
border: 0;
|
|
||||||
background: #e9e9e9;
|
|
||||||
margin: 16px 0;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown p {
|
|
||||||
margin: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>p,
|
|
||||||
.markdown>blockquote,
|
|
||||||
.markdown>.highlight,
|
|
||||||
.markdown>ol,
|
|
||||||
.markdown>ul {
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown ul>li {
|
|
||||||
list-style: circle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>ul li,
|
|
||||||
.markdown blockquote ul>li {
|
|
||||||
margin-left: 20px;
|
|
||||||
padding-left: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>ul li p,
|
|
||||||
.markdown>ol li p {
|
|
||||||
margin: 0.6em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown ol>li {
|
|
||||||
list-style: decimal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>ol li,
|
|
||||||
.markdown blockquote ol>li {
|
|
||||||
margin-left: 20px;
|
|
||||||
padding-left: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown code {
|
|
||||||
margin: 0 3px;
|
|
||||||
padding: 0 5px;
|
|
||||||
background: #eee;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown strong,
|
|
||||||
.markdown b {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0px;
|
|
||||||
empty-cells: show;
|
|
||||||
border: 1px solid #e9e9e9;
|
|
||||||
width: 95%;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>table th {
|
|
||||||
white-space: nowrap;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>table th,
|
|
||||||
.markdown>table td {
|
|
||||||
border: 1px solid #e9e9e9;
|
|
||||||
padding: 8px 16px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>table th {
|
|
||||||
background: #F7F7F7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown blockquote {
|
|
||||||
font-size: 90%;
|
|
||||||
color: #999;
|
|
||||||
border-left: 4px solid #e9e9e9;
|
|
||||||
padding-left: 0.8em;
|
|
||||||
margin: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown blockquote p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown .anchor {
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown .waiting {
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown h1:hover .anchor,
|
|
||||||
.markdown h2:hover .anchor,
|
|
||||||
.markdown h3:hover .anchor,
|
|
||||||
.markdown h4:hover .anchor,
|
|
||||||
.markdown h5:hover .anchor,
|
|
||||||
.markdown h6:hover .anchor {
|
|
||||||
opacity: 1;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown>br,
|
|
||||||
.markdown>p>br {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.hljs {
|
|
||||||
display: block;
|
|
||||||
background: white;
|
|
||||||
padding: 0.5em;
|
|
||||||
color: #333333;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-comment,
|
|
||||||
.hljs-meta {
|
|
||||||
color: #969896;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-string,
|
|
||||||
.hljs-variable,
|
|
||||||
.hljs-template-variable,
|
|
||||||
.hljs-strong,
|
|
||||||
.hljs-emphasis,
|
|
||||||
.hljs-quote {
|
|
||||||
color: #df5000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-keyword,
|
|
||||||
.hljs-selector-tag,
|
|
||||||
.hljs-type {
|
|
||||||
color: #a71d5d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-literal,
|
|
||||||
.hljs-symbol,
|
|
||||||
.hljs-bullet,
|
|
||||||
.hljs-attribute {
|
|
||||||
color: #0086b3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-section,
|
|
||||||
.hljs-name {
|
|
||||||
color: #63a35c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-tag {
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-title,
|
|
||||||
.hljs-attr,
|
|
||||||
.hljs-selector-id,
|
|
||||||
.hljs-selector-class,
|
|
||||||
.hljs-selector-attr,
|
|
||||||
.hljs-selector-pseudo {
|
|
||||||
color: #795da3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-addition {
|
|
||||||
color: #55a532;
|
|
||||||
background-color: #eaffea;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-deletion {
|
|
||||||
color: #bd2c00;
|
|
||||||
background-color: #ffecec;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hljs-link {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 代码高亮 */
|
|
||||||
/* PrismJS 1.15.0
|
|
||||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
|
||||||
/**
|
|
||||||
* prism.js default theme for JavaScript, CSS and HTML
|
|
||||||
* Based on dabblet (http://dabblet.com)
|
|
||||||
* @author Lea Verou
|
|
||||||
*/
|
|
||||||
code[class*="language-"],
|
|
||||||
pre[class*="language-"] {
|
|
||||||
color: black;
|
|
||||||
background: none;
|
|
||||||
text-shadow: 0 1px white;
|
|
||||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
|
||||||
text-align: left;
|
|
||||||
white-space: pre;
|
|
||||||
word-spacing: normal;
|
|
||||||
word-break: normal;
|
|
||||||
word-wrap: normal;
|
|
||||||
line-height: 1.5;
|
|
||||||
|
|
||||||
-moz-tab-size: 4;
|
|
||||||
-o-tab-size: 4;
|
|
||||||
tab-size: 4;
|
|
||||||
|
|
||||||
-webkit-hyphens: none;
|
|
||||||
-moz-hyphens: none;
|
|
||||||
-ms-hyphens: none;
|
|
||||||
hyphens: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[class*="language-"]::-moz-selection,
|
|
||||||
pre[class*="language-"] ::-moz-selection,
|
|
||||||
code[class*="language-"]::-moz-selection,
|
|
||||||
code[class*="language-"] ::-moz-selection {
|
|
||||||
text-shadow: none;
|
|
||||||
background: #b3d4fc;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[class*="language-"]::selection,
|
|
||||||
pre[class*="language-"] ::selection,
|
|
||||||
code[class*="language-"]::selection,
|
|
||||||
code[class*="language-"] ::selection {
|
|
||||||
text-shadow: none;
|
|
||||||
background: #b3d4fc;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media print {
|
|
||||||
|
|
||||||
code[class*="language-"],
|
|
||||||
pre[class*="language-"] {
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Code blocks */
|
|
||||||
pre[class*="language-"] {
|
|
||||||
padding: 1em;
|
|
||||||
margin: .5em 0;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
:not(pre)>code[class*="language-"],
|
|
||||||
pre[class*="language-"] {
|
|
||||||
background: #f5f2f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inline code */
|
|
||||||
:not(pre)>code[class*="language-"] {
|
|
||||||
padding: .1em;
|
|
||||||
border-radius: .3em;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.comment,
|
|
||||||
.token.prolog,
|
|
||||||
.token.doctype,
|
|
||||||
.token.cdata {
|
|
||||||
color: slategray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.punctuation {
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.namespace {
|
|
||||||
opacity: .7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.property,
|
|
||||||
.token.tag,
|
|
||||||
.token.boolean,
|
|
||||||
.token.number,
|
|
||||||
.token.constant,
|
|
||||||
.token.symbol,
|
|
||||||
.token.deleted {
|
|
||||||
color: #905;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.selector,
|
|
||||||
.token.attr-name,
|
|
||||||
.token.string,
|
|
||||||
.token.char,
|
|
||||||
.token.builtin,
|
|
||||||
.token.inserted {
|
|
||||||
color: #690;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.operator,
|
|
||||||
.token.entity,
|
|
||||||
.token.url,
|
|
||||||
.language-css .token.string,
|
|
||||||
.style .token.string {
|
|
||||||
color: #9a6e3a;
|
|
||||||
background: hsla(0, 0%, 100%, .5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.atrule,
|
|
||||||
.token.attr-value,
|
|
||||||
.token.keyword {
|
|
||||||
color: #07a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.function,
|
|
||||||
.token.class-name {
|
|
||||||
color: #DD4A68;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.regex,
|
|
||||||
.token.important,
|
|
||||||
.token.variable {
|
|
||||||
color: #e90;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.important,
|
|
||||||
.token.bold {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.italic {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.entity {
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
|
|
@ -1,579 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8"/>
|
|
||||||
<title>iconfont Demo</title>
|
|
||||||
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
|
|
||||||
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
|
|
||||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
|
||||||
<link rel="stylesheet" href="demo.css">
|
|
||||||
<link rel="stylesheet" href="iconfont.css">
|
|
||||||
<script src="iconfont.js"></script>
|
|
||||||
<!-- jQuery -->
|
|
||||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
|
||||||
<!-- 代码高亮 -->
|
|
||||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
|
||||||
<style>
|
|
||||||
.main .logo {
|
|
||||||
margin-top: 0;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main .logo a {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main .logo .sub-title {
|
|
||||||
margin-left: 0.5em;
|
|
||||||
font-size: 22px;
|
|
||||||
color: #fff;
|
|
||||||
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="main">
|
|
||||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
|
||||||
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
|
||||||
|
|
||||||
</a></h1>
|
|
||||||
<div class="nav-tabs">
|
|
||||||
<ul id="tabs" class="dib-box">
|
|
||||||
<li class="dib active"><span>Unicode</span></li>
|
|
||||||
<li class="dib"><span>Font class</span></li>
|
|
||||||
<li class="dib"><span>Symbol</span></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2399990" target="_blank" class="nav-more">查看项目</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="tab-container">
|
|
||||||
<div class="content unicode" style="display: block;">
|
|
||||||
<ul class="icon_lists dib-box">
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">微信</div>
|
|
||||||
<div class="code-name">&#xe637;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">微信</div>
|
|
||||||
<div class="code-name">&#xe607;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">YUAN</div>
|
|
||||||
<div class="code-name">&#xe785;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">comment</div>
|
|
||||||
<div class="code-name">&#xe8e8;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">微信</div>
|
|
||||||
<div class="code-name">&#xe8bb;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">icon_order</div>
|
|
||||||
<div class="code-name">&#xe64e;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">shouhou</div>
|
|
||||||
<div class="code-name">&#xe64b;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">peisong</div>
|
|
||||||
<div class="code-name">&#xe64c;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">fuwu</div>
|
|
||||||
<div class="code-name">&#xe64d;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">自营</div>
|
|
||||||
<div class="code-name">&#xe64a;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">正品</div>
|
|
||||||
<div class="code-name">&#xe648;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">top</div>
|
|
||||||
<div class="code-name">&#xe646;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">coupons</div>
|
|
||||||
<div class="code-name">&#xe74a;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">service</div>
|
|
||||||
<div class="code-name">&#xe764;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">survey</div>
|
|
||||||
<div class="code-name">&#xe767;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">collection</div>
|
|
||||||
<div class="code-name">&#xe79d;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont"></span>
|
|
||||||
<div class="name">cart-Empty</div>
|
|
||||||
<div class="code-name">&#xe7b2;</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
<div class="article markdown">
|
|
||||||
<h2 id="unicode-">Unicode 引用</h2>
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
|
||||||
<ul>
|
|
||||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
|
||||||
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
|
||||||
</ul>
|
|
||||||
<blockquote>
|
|
||||||
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
|
||||||
</blockquote>
|
|
||||||
<p>Unicode 使用步骤如下：</p>
|
|
||||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
|
||||||
<pre><code class="language-css"
|
|
||||||
>@font-face {
|
|
||||||
font-family: 'iconfont';
|
|
||||||
src: url('iconfont.woff2?t=1635478222086') format('woff2'),
|
|
||||||
url('iconfont.woff?t=1635478222086') format('woff'),
|
|
||||||
url('iconfont.ttf?t=1635478222086') format('truetype');
|
|
||||||
}
|
|
||||||
</code></pre>
|
|
||||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
|
||||||
<pre><code class="language-css"
|
|
||||||
>.iconfont {
|
|
||||||
font-family: "iconfont" !important;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
</code></pre>
|
|
||||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
|
||||||
<pre>
|
|
||||||
<code class="language-html"
|
|
||||||
><span class="iconfont">&#x33;</span>
|
|
||||||
</code></pre>
|
|
||||||
<blockquote>
|
|
||||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
|
||||||
</blockquote>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content font-class">
|
|
||||||
<ul class="icon_lists dib-box">
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-weixin1"></span>
|
|
||||||
<div class="name">
|
|
||||||
微信
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-weixin1
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-weixin2"></span>
|
|
||||||
<div class="name">
|
|
||||||
微信
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-weixin2
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-YUAN"></span>
|
|
||||||
<div class="name">
|
|
||||||
YUAN
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-YUAN
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-comment"></span>
|
|
||||||
<div class="name">
|
|
||||||
comment
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-comment
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-weixin"></span>
|
|
||||||
<div class="name">
|
|
||||||
微信
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-weixin
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-icon_order"></span>
|
|
||||||
<div class="name">
|
|
||||||
icon_order
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-icon_order
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-shouhou"></span>
|
|
||||||
<div class="name">
|
|
||||||
shouhou
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-shouhou
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-peisong"></span>
|
|
||||||
<div class="name">
|
|
||||||
peisong
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-peisong
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-fuwu"></span>
|
|
||||||
<div class="name">
|
|
||||||
fuwu
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-fuwu
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-ziying"></span>
|
|
||||||
<div class="name">
|
|
||||||
自营
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-ziying
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-zhengpin"></span>
|
|
||||||
<div class="name">
|
|
||||||
正品
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-zhengpin
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-top"></span>
|
|
||||||
<div class="name">
|
|
||||||
top
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-top
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-coupons"></span>
|
|
||||||
<div class="name">
|
|
||||||
coupons
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-coupons
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-service"></span>
|
|
||||||
<div class="name">
|
|
||||||
service
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-service
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-survey"></span>
|
|
||||||
<div class="name">
|
|
||||||
survey
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-survey
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-collection"></span>
|
|
||||||
<div class="name">
|
|
||||||
collection
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-collection
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<span class="icon iconfont icon-cart-Empty"></span>
|
|
||||||
<div class="name">
|
|
||||||
cart-Empty
|
|
||||||
</div>
|
|
||||||
<div class="code-name">.icon-cart-Empty
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
<div class="article markdown">
|
|
||||||
<h2 id="font-class-">font-class 引用</h2>
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
|
||||||
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
|
||||||
<ul>
|
|
||||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
|
||||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
|
||||||
</ul>
|
|
||||||
<p>使用步骤如下：</p>
|
|
||||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
|
||||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
|
||||||
</code></pre>
|
|
||||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
|
||||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
|
||||||
</code></pre>
|
|
||||||
<blockquote>
|
|
||||||
<p>"
|
|
||||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
|
||||||
</blockquote>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content symbol">
|
|
||||||
<ul class="icon_lists dib-box">
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-weixin1"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">微信</div>
|
|
||||||
<div class="code-name">#icon-weixin1</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-weixin2"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">微信</div>
|
|
||||||
<div class="code-name">#icon-weixin2</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-YUAN"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">YUAN</div>
|
|
||||||
<div class="code-name">#icon-YUAN</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-comment"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">comment</div>
|
|
||||||
<div class="code-name">#icon-comment</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-weixin"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">微信</div>
|
|
||||||
<div class="code-name">#icon-weixin</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-icon_order"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">icon_order</div>
|
|
||||||
<div class="code-name">#icon-icon_order</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-shouhou"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">shouhou</div>
|
|
||||||
<div class="code-name">#icon-shouhou</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-peisong"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">peisong</div>
|
|
||||||
<div class="code-name">#icon-peisong</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-fuwu"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">fuwu</div>
|
|
||||||
<div class="code-name">#icon-fuwu</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-ziying"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">自营</div>
|
|
||||||
<div class="code-name">#icon-ziying</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-zhengpin"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">正品</div>
|
|
||||||
<div class="code-name">#icon-zhengpin</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-top"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">top</div>
|
|
||||||
<div class="code-name">#icon-top</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-coupons"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">coupons</div>
|
|
||||||
<div class="code-name">#icon-coupons</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-service"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">service</div>
|
|
||||||
<div class="code-name">#icon-service</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-survey"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">survey</div>
|
|
||||||
<div class="code-name">#icon-survey</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-collection"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">collection</div>
|
|
||||||
<div class="code-name">#icon-collection</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="dib">
|
|
||||||
<svg class="icon svg-icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-cart-Empty"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="name">cart-Empty</div>
|
|
||||||
<div class="code-name">#icon-cart-Empty</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
<div class="article markdown">
|
|
||||||
<h2 id="symbol-">Symbol 引用</h2>
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
|
||||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
|
||||||
<ul>
|
|
||||||
<li>支持多色图标了，不再受单色限制。</li>
|
|
||||||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
|
||||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
|
||||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
|
||||||
</ul>
|
|
||||||
<p>使用步骤如下：</p>
|
|
||||||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
|
||||||
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
|
||||||
</code></pre>
|
|
||||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
|
||||||
<pre><code class="language-html"><style>
|
|
||||||
.icon {
|
|
||||||
width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
vertical-align: -0.15em;
|
|
||||||
fill: currentColor;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</code></pre>
|
|
||||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
|
||||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
|
||||||
<use xlink:href="#icon-xxx"></use>
|
|
||||||
</svg>
|
|
||||||
</code></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
$(document).ready(function () {
|
|
||||||
$('.tab-container .content:first').show()
|
|
||||||
|
|
||||||
$('#tabs li').click(function (e) {
|
|
||||||
var tabContent = $('.tab-container .content')
|
|
||||||
var index = $(this).index()
|
|
||||||
|
|
||||||
if ($(this).hasClass('active')) {
|
|
||||||
return
|
|
||||||
} else {
|
|
||||||
$('#tabs li').removeClass('active')
|
|
||||||
$(this).addClass('active')
|
|
||||||
|
|
||||||
tabContent.hide().eq(index).fadeIn()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,83 +0,0 @@
|
||||||
@font-face {
|
|
||||||
font-family: "iconfont"; /* Project id 2399990 */
|
|
||||||
src: url('iconfont.woff2?t=1635478222086') format('woff2'),
|
|
||||||
url('iconfont.woff?t=1635478222086') format('woff'),
|
|
||||||
url('iconfont.ttf?t=1635478222086') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconfont {
|
|
||||||
font-family: "iconfont" !important;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-weixin1:before {
|
|
||||||
content: "\e637";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-weixin2:before {
|
|
||||||
content: "\e607";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-YUAN:before {
|
|
||||||
content: "\e785";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-comment:before {
|
|
||||||
content: "\e8e8";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-weixin:before {
|
|
||||||
content: "\e8bb";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-icon_order:before {
|
|
||||||
content: "\e64e";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-shouhou:before {
|
|
||||||
content: "\e64b";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-peisong:before {
|
|
||||||
content: "\e64c";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-fuwu:before {
|
|
||||||
content: "\e64d";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-ziying:before {
|
|
||||||
content: "\e64a";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-zhengpin:before {
|
|
||||||
content: "\e648";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-top:before {
|
|
||||||
content: "\e646";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-coupons:before {
|
|
||||||
content: "\e74a";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-service:before {
|
|
||||||
content: "\e764";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-survey:before {
|
|
||||||
content: "\e767";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-collection:before {
|
|
||||||
content: "\e79d";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-cart-Empty:before {
|
|
||||||
content: "\e7b2";
|
|
||||||
}
|
|
||||||
|
|
||||||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -1,128 +0,0 @@
|
||||||
{
|
|
||||||
"id": "2399990",
|
|
||||||
"name": "likeshop_pc_shop",
|
|
||||||
"font_family": "iconfont",
|
|
||||||
"css_prefix_text": "icon-",
|
|
||||||
"description": "",
|
|
||||||
"glyphs": [
|
|
||||||
{
|
|
||||||
"icon_id": "6684308",
|
|
||||||
"name": "微信",
|
|
||||||
"font_class": "weixin1",
|
|
||||||
"unicode": "e637",
|
|
||||||
"unicode_decimal": 58935
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon_id": "15933094",
|
|
||||||
"name": "微信",
|
|
||||||
"font_class": "weixin2",
|
|
||||||
"unicode": "e607",
|
|
||||||
"unicode_decimal": 58887
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon_id": "4765744",
|
|
||||||
"name": "YUAN",
|
|
||||||
"font_class": "YUAN",
|
|
||||||
"unicode": "e785",
|
|
||||||
"unicode_decimal": 59269
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon_id": "6598316",
|
|
||||||
"name": "comment",
|
|
||||||
"font_class": "comment",
|
|
||||||
"unicode": "e8e8",
|
|
||||||
"unicode_decimal": 59624
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon_id": "11372717",
|
|
||||||
"name": "微信",
|
|
||||||
"font_class": "weixin",
|
|
||||||
"unicode": "e8bb",
|
|
||||||
"unicode_decimal": 59579
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon_id": "20318900",
|
|
||||||
"name": "icon_order",
|
|
||||||
"font_class": "icon_order",
|
|
||||||
"unicode": "e64e",
|
|
||||||
"unicode_decimal": 58958
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon_id": "20215028",
|
|
||||||
"name": "shouhou",
|
|
||||||
"font_class": "shouhou",
|
|
||||||
"unicode": "e64b",
|
|
||||||
"unicode_decimal": 58955
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon_id": "20215029",
|
|
||||||
"name": "peisong",
|
|
||||||
"font_class": "peisong",
|
|
||||||
"unicode": "e64c",
|
|
||||||
"unicode_decimal": 58956
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon_id": "20215030",
|
|
||||||
"name": "fuwu",
|
|
||||||
"font_class": "fuwu",
|
|
||||||
"unicode": "e64d",
|
|
||||||
"unicode_decimal": 58957
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon_id": "20179589",
|
|
||||||
"name": "自营",
|
|
||||||
"font_class": "ziying",
|
|
||||||
"unicode": "e64a",
|
|
||||||
"unicode_decimal": 58954
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon_id": "20179548",
|
|
||||||
"name": "正品",
|
|
||||||
"font_class": "zhengpin",
|
|
||||||
"unicode": "e648",
|
|
||||||
"unicode_decimal": 58952
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon_id": "20179252",
|
|
||||||
"name": "top",
|
|
||||||
"font_class": "top",
|
|
||||||
"unicode": "e646",
|
|
||||||
"unicode_decimal": 58950
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon_id": "11488015",
|
|
||||||
"name": "coupons",
|
|
||||||
"font_class": "coupons",
|
|
||||||
"unicode": "e74a",
|
|
||||||
"unicode_decimal": 59210
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon_id": "11488128",
|
|
||||||
"name": "service",
|
|
||||||
"font_class": "service",
|
|
||||||
"unicode": "e764",
|
|
||||||
"unicode_decimal": 59236
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon_id": "11488143",
|
|
||||||
"name": "survey",
|
|
||||||
"font_class": "survey",
|
|
||||||
"unicode": "e767",
|
|
||||||
"unicode_decimal": 59239
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon_id": "11494511",
|
|
||||||
"name": "collection",
|
|
||||||
"font_class": "collection",
|
|
||||||
"unicode": "e79d",
|
|
||||||
"unicode_decimal": 59293
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"icon_id": "12011694",
|
|
||||||
"name": "cart-Empty",
|
|
||||||
"font_class": "cart-Empty",
|
|
||||||
"unicode": "e7b2",
|
|
||||||
"unicode_decimal": 59314
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
<?xml version="1.0" standalone="no"?>
|
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
|
||||||
<!--
|
|
||||||
2013-9-30: Created.
|
|
||||||
-->
|
|
||||||
<svg>
|
|
||||||
<metadata>
|
|
||||||
Created by iconfont
|
|
||||||
</metadata>
|
|
||||||
<defs>
|
|
||||||
|
|
||||||
<font id="iconfont" horiz-adv-x="1024" >
|
|
||||||
<font-face
|
|
||||||
font-family="iconfont"
|
|
||||||
font-weight="500"
|
|
||||||
font-stretch="normal"
|
|
||||||
units-per-em="1024"
|
|
||||||
ascent="896"
|
|
||||||
descent="-128"
|
|
||||||
/>
|
|
||||||
<missing-glyph />
|
|
||||||
|
|
||||||
<glyph glyph-name="icon_order" unicode="" d="M810.666667-42.666667H213.333333a85.333333 85.333333 0 0 0-85.333333 85.333334V725.333333a85.333333 85.333333 0 0 0 85.333333 85.333334h597.333334a85.333333 85.333333 0 0 0 85.333333-85.333334v-682.666666a85.333333 85.333333 0 0 0-85.333333-85.333334zM234.666667 746.666667a42.666667 42.666667 0 0 1-42.666667-42.666667v-640a42.666667 42.666667 0 0 1 42.666667-42.666667h554.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v640a42.666667 42.666667 0 0 1-42.666667 42.666667zM298.666667 597.333333h426.666666v-64H298.666667zM298.666667 426.666667h426.666666v-64H298.666667zM298.666667 256h426.666666v-64H298.666667z" horiz-adv-x="1024" />
|
|
||||||
|
|
||||||
|
|
||||||
<glyph glyph-name="shouhou" unicode="" d="M511.969692-127.958633a508.733026 508.733026 0 0 0-199.258206 40.220259 509.449782 509.449782 0 0 0-162.703642 109.704646 508.343929 508.343929 0 0 0-109.704646 162.7446A508.180099 508.180099 0 0 0 0.001024 384.010035a507.872918 507.872918 0 0 0 40.281695 199.237726 508.323451 508.323451 0 0 0 109.704646 162.703643 509.449782 509.449782 0 0 0 162.703642 109.704646A508.773983 508.773983 0 0 0 511.969692 895.978702a508.773983 508.773983 0 0 0 199.258205-40.220258 510.698985 510.698985 0 0 0 162.7446-109.704646 509.593133 509.593133 0 0 0 109.704646-162.703643A507.872918 507.872918 0 0 0 1023.938359 384.010035a508.180099 508.180099 0 0 0-40.281695-199.299163 509.695527 509.695527 0 0 0-109.704646-162.7446 510.596591 510.596591 0 0 0-162.7446-109.704646A508.733026 508.733026 0 0 0 511.969692-127.958633z m0 1003.458588a488.356673 488.356673 0 0 1-191.312452-38.622916 490.302154 490.302154 0 0 1-156.273316-105.322194 490.896037 490.896037 0 0 1-105.363152-156.21188A488.766248 488.766248 0 0 1 20.479771 384.010035a488.991514 488.991514 0 0 1 38.602437-191.312452 490.957473 490.957473 0 0 1 105.363152-156.232359 490.322632 490.322632 0 0 1 156.273316-105.342673A488.336194 488.336194 0 0 1 511.969692-107.479886a488.336194 488.336194 0 0 1 191.312451 38.622916 489.54444 489.54444 0 0 1 156.232359 105.342673 490.404547 490.404547 0 0 1 105.322194 156.232359A488.971035 488.971035 0 0 1 1003.459612 384.010035a488.72529 488.72529 0 0 1-38.602437 191.271494 490.404547 490.404547 0 0 1-105.322194 156.21188 490.138324 490.138324 0 0 1-156.232359 105.322194A488.356673 488.356673 0 0 1 511.969692 875.499955zM511.99017 670.671531a291.207778 291.207778 0 1 1 286.702454-291.187299 291.207778 291.207778 0 0 1-286.702454 291.187299z m75.566576-336.035755c13.946027 0 25.188858-7.5157 25.188858-16.813051s-11.263311-16.83353-25.188858-16.83353h-53.244742v-57.34049a17.243105 17.243105 0 1 0-33.667059 0v57.34049H436.403116c-13.925548 0-25.188858 7.556658-25.188858 16.854009s11.263311 16.813051 25.188858 16.813051h64.241829v33.523708H436.403116c-13.925548 0-25.188858 7.5157-25.188858 16.854009s11.263311 16.813051 25.188858 16.813051h64.241829v13.413579a33.912805 33.912805 0 0 0-9.911714 7.003731l-70.201143 70.549283c-9.604532 9.604532-12.123418 22.526621-5.713571 28.956948s19.372894 3.809047 28.875033-5.795486l70.221623-70.549282 0.757713-0.757714a30.431418 30.431418 0 0 0 2.764631 3.051334l62.071081 62.050602c9.788841 9.850277 23.140984 12.512514 29.694183 5.959315s3.952398-19.864384-5.959315-29.714661l-62.050603-62.050603a37.168925 37.168925 0 0 0-7.106125-5.570219 22.669973 22.669973 0 0 0 0.348139-3.952398v-12.594429h53.244741c13.946027 0 25.188858-7.5157 25.188859-16.813051s-11.263311-16.854009-25.188859-16.854009h-53.244741v-33.523708h53.244741z m0 0" horiz-adv-x="1024" />
|
|
||||||
|
|
||||||
|
|
||||||
<glyph glyph-name="peisong" unicode="" d="M512.050592-127.958633a508.733026 508.733026 0 0 0-199.258205 40.220259 509.449782 509.449782 0 0 0-162.703643 109.704646 508.343929 508.343929 0 0 0-109.704646 162.7446A508.180099 508.180099 0 0 0 0.081925 384.010035a507.872918 507.872918 0 0 0 40.281695 199.237726 508.323451 508.323451 0 0 0 109.704646 162.703643 509.449782 509.449782 0 0 0 162.703642 109.704646A508.773983 508.773983 0 0 0 512.050592 895.978702a508.773983 508.773983 0 0 0 199.258206-40.220258 510.698985 510.698985 0 0 0 162.7446-109.704646 509.593133 509.593133 0 0 0 109.704646-162.703643A507.872918 507.872918 0 0 0 1024.01926 384.010035a508.180099 508.180099 0 0 0-40.281695-199.299163 509.695527 509.695527 0 0 0-109.704646-162.7446 510.596591 510.596591 0 0 0-162.7446-109.704646A508.733026 508.733026 0 0 0 512.050592-127.958633z m0 1003.458588a488.356673 488.356673 0 0 1-191.312451-38.622916 490.302154 490.302154 0 0 1-156.273316-105.322194 490.896037 490.896037 0 0 1-105.363152-156.21188A488.766248 488.766248 0 0 1 20.560672 384.010035a488.991514 488.991514 0 0 1 38.602437-191.312452 490.957473 490.957473 0 0 1 105.363152-156.232359 490.322632 490.322632 0 0 1 156.273316-105.342673A488.336194 488.336194 0 0 1 512.050592-107.479886a488.336194 488.336194 0 0 1 191.312452 38.622916 489.54444 489.54444 0 0 1 156.232359 105.342673 490.404547 490.404547 0 0 1 105.322194 156.232359A488.971035 488.971035 0 0 1 1003.540513 384.010035a488.72529 488.72529 0 0 1-38.602437 191.271494 490.404547 490.404547 0 0 1-105.322195 156.21188 490.138324 490.138324 0 0 1-156.232358 105.322194A488.356673 488.356673 0 0 1 512.050592 875.499955zM838.481815 392.549672a17.468371 17.468371 0 0 1-2.887503 9.113042l-97.540271 146.382082a17.447892 17.447892 0 0 1-14.335123 7.659051h-131.86265a17.32502 17.32502 0 0 1-17.304541-17.32502v-282.258566a17.345498 17.345498 0 0 1 17.345499-17.325019h35.469189a79.232271 79.232271 0 0 1 158.444063 0h35.407753a17.365977 17.365977 0 0 1 17.32502 17.325019v136.388453z m-184.80021 4.710112V502.909638h66.82215l70.42641-105.649854z m52.814687-198.009002a39.605896 39.605896 0 1 0 39.585418 39.605896 39.646854 39.646854 0 0 0-39.585418-39.605896zM525.054597 608.518535H227.785109A22.997633 22.997633 0 0 1 204.807956 585.520902v-323.666591a22.997633 22.997633 0 0 1 22.977153-23.018112h56.193681a79.232271 79.232271 0 0 1 158.444064 0h82.611264a22.997633 22.997633 0 0 1 22.997632 22.997633V585.541381A22.997633 22.997633 0 0 1 525.034118 608.539013z m-161.782099-409.267753a39.605896 39.605896 0 1 0 39.626375 39.605896 39.646854 39.646854 0 0 0-39.626375-39.605896z m0 0" horiz-adv-x="1024" />
|
|
||||||
|
|
||||||
|
|
||||||
<glyph glyph-name="fuwu" unicode="" d="M511.977065-127.958633a508.733026 508.733026 0 0 0-199.258206 40.220259 509.449782 509.449782 0 0 0-162.703642 109.704646 508.343929 508.343929 0 0 0-109.704646 162.7446A508.180099 508.180099 0 0 0 0.008397 384.010035a507.872918 507.872918 0 0 0 40.281695 199.237726 508.323451 508.323451 0 0 0 109.704646 162.703643 509.449782 509.449782 0 0 0 162.703643 109.704646A508.773983 508.773983 0 0 0 511.977065 895.978702a508.773983 508.773983 0 0 0 199.258205-40.220258 510.698985 510.698985 0 0 0 162.7446-109.704646 509.593133 509.593133 0 0 0 109.704646-162.703643A507.872918 507.872918 0 0 0 1023.945732 384.010035a508.180099 508.180099 0 0 0-40.281694-199.299163 509.695527 509.695527 0 0 0-109.704646-162.7446 510.596591 510.596591 0 0 0-162.744601-109.704646A508.733026 508.733026 0 0 0 511.977065-127.958633z m0 1003.458588a488.356673 488.356673 0 0 1-191.312452-38.622916 490.302154 490.302154 0 0 1-156.273316-105.322194 490.896037 490.896037 0 0 1-105.363152-156.21188A488.766248 488.766248 0 0 1 20.487144 384.010035a488.991514 488.991514 0 0 1 38.602438-191.312452 490.957473 490.957473 0 0 1 105.363151-156.232359 490.322632 490.322632 0 0 1 156.273316-105.342673A488.336194 488.336194 0 0 1 511.977065-107.479886a488.336194 488.336194 0 0 1 191.312451 38.622916 489.54444 489.54444 0 0 1 156.232359 105.342673 490.404547 490.404547 0 0 1 105.322194 156.232359A488.971035 488.971035 0 0 1 1003.466986 384.010035a488.72529 488.72529 0 0 1-38.602438 191.271494 490.404547 490.404547 0 0 1-105.322194 156.21188 490.138324 490.138324 0 0 1-156.232359 105.322194A488.356673 488.356673 0 0 1 511.977065 875.499955zM517.649678 98.290561H304.322573c-33.380357 0-39.892599 7.372349-37.721851 41.182759a187.564841 187.564841 0 0 0 163.829973 167.802851 918.267002 918.267002 0 0 0 176.117222 0 187.360054 187.360054 0 0 0 163.461356-171.263759c1.31064-29.919449-5.201602-37.291798-35.551104-37.291798-72.412848-0.860107-144.395643-0.430054-216.788013-0.430053z m150.457352 402.796468a153.5906 153.5906 0 0 0-153.058153-151.747513 150.191128 150.191128 0 0 0-146.545912 153.918261 153.119589 153.119589 0 0 0 159.549916 146.975965 144.272771 144.272771 0 0 0 140.054149-149.146713z m0 0M694.524613 481.816529c2.150268 108.107304-80.358602 196.595968-179.74196 192.868836a173.454985 173.454985 0 0 1-127.459719-63.115497 195.449159 195.449159 0 0 1-44.070263-141.651491 119.104391 119.104391 0 0 0-4.751069-29.776098 103.171926 103.171926 0 0 0-31.53727 7.802403 56.910437 56.910437 0 0 0-7.761445 85.662597 118.776731 118.776731 0 0 1 23.755346 35.284881 205.995713 205.995713 0 0 0 391.000711 2.744152c5.201602-12.819695 17.734595-21.994174 23.775824-34.363337a107.267675 107.267675 0 0 0 18.14417-52.691815 68.439971 68.439971 0 0 0-30.71812-41.694729c-21.175024-13.290707-32.765995-2.744152-31.53727 23.36625 0.430054 5.508783 0.430054 10.546555 0.880586 15.584327z m0 0" horiz-adv-x="1024" />
|
|
||||||
|
|
||||||
|
|
||||||
<glyph glyph-name="ziying" unicode="" d="M512.012907-127.958633a508.733026 508.733026 0 0 0-199.258205 40.220259 509.449782 509.449782 0 0 0-162.703643 109.704646 508.343929 508.343929 0 0 0-109.704646 162.7446A508.180099 508.180099 0 0 0 0.044239 384.010035a507.872918 507.872918 0 0 0 40.281695 199.237726 508.323451 508.323451 0 0 0 109.704646 162.703643 509.449782 509.449782 0 0 0 162.703643 109.704646A508.773983 508.773983 0 0 0 512.012907 895.978702a508.773983 508.773983 0 0 0 199.258205-40.220258 510.698985 510.698985 0 0 0 162.7446-109.704646 509.593133 509.593133 0 0 0 109.704646-162.703643A507.872918 507.872918 0 0 0 1023.981574 384.010035a508.180099 508.180099 0 0 0-40.281694-199.299163 509.695527 509.695527 0 0 0-109.704646-162.7446 510.596591 510.596591 0 0 0-162.7446-109.704646A508.733026 508.733026 0 0 0 512.012907-127.958633z m0 1003.458588a488.356673 488.356673 0 0 1-191.312452-38.622916 490.302154 490.302154 0 0 1-156.273316-105.322194 490.896037 490.896037 0 0 1-105.363152-156.21188A488.766248 488.766248 0 0 1 20.522986 384.010035a488.991514 488.991514 0 0 1 38.602438-191.312452 490.957473 490.957473 0 0 1 105.363151-156.232359 490.322632 490.322632 0 0 1 156.273317-105.342673A488.336194 488.336194 0 0 1 512.012907-107.479886a488.336194 488.336194 0 0 1 191.312452 38.622916 489.54444 489.54444 0 0 1 156.232358 105.342673 490.404547 490.404547 0 0 1 105.322195 156.232359A488.971035 488.971035 0 0 1 1003.502828 384.010035a488.72529 488.72529 0 0 1-38.602438 191.271494 490.404547 490.404547 0 0 1-105.322194 156.21188 490.138324 490.138324 0 0 1-156.232359 105.322194A488.356673 488.356673 0 0 1 512.012907 875.499955zM754.174087 471.351889v1.044416a8.191499 8.191499 0 0 1-1.003459 3.297079l-33.400836 115.479652A55.026392 55.026392 0 0 1 665.316805 629.652601H361.227895a52.302719 52.302719 0 0 1-52.405113-37.394191L271.838166 473.993648a24.103485 24.103485 0 0 1-0.511969-2.744152 110.585232 110.585232 0 0 1-5.140165-34.097114c0-40.138344 10.771821-72.597157 44.152177-91.294253a95.656226 95.656226 0 0 1 47.797395-12.102939 98.605165 98.605165 0 0 1 77.553014 38.479565 97.663143 97.663143 0 0 1 77.061524-38.479565 96.680163 96.680163 0 0 1 76.549555 38.479565 98.543729 98.543729 0 0 1 77.553014-38.479565 99.485751 99.485751 0 0 1 48.800853 12.102939c32.909346 19.802948 43.660688 51.688357 43.660688 91.847179a103.663416 103.663416 0 0 1-5.160644 33.564666z m-17.263584-175.523338a19.229543 19.229543 0 0 1-18.738053 19.843906 14.53991 14.53991 0 0 1-5.22208-1.126331 110.585232 110.585232 0 0 0-44.766541-8.191499 108.742145 108.742145 0 0 0-73.928275 27.482478 118.30572 118.30572 0 0 0-77.553014-30.861471 113.923268 113.923268 0 0 0-78.085461 27.564393 117.670879 117.670879 0 0 0-78.638388-29.202693 110.810498 110.810498 0 0 0-44.254571 9.911714c-0.511969 0-1.044416 0.552926-1.576864 0.552926-1.023937 0.532447-2.047875 0.532447-2.6008 1.105852a27.113861 27.113861 0 0 1-4.09575 0.532447 19.229543 19.229543 0 0 1-18.738053-19.823426v-106.366611a49.148992 49.148992 0 0 1 47.797395-50.705377h352.500667a49.558567 49.558567 0 0 1 47.899788 50.684899z m0 0" horiz-adv-x="1024" />
|
|
||||||
|
|
||||||
|
|
||||||
<glyph glyph-name="zhengpin" unicode="" d="M512.030111-127.958633a508.733026 508.733026 0 0 0-199.258205 40.220259 509.449782 509.449782 0 0 0-162.703643 109.704646 508.343929 508.343929 0 0 0-109.704646 162.7446A508.180099 508.180099 0 0 0 0.061444 384.010035a507.872918 507.872918 0 0 0 40.281694 199.237726 508.323451 508.323451 0 0 0 109.704647 162.703643 509.449782 509.449782 0 0 0 162.703642 109.704646A508.773983 508.773983 0 0 0 512.030111 895.978702a508.773983 508.773983 0 0 0 199.258206-40.220258 510.698985 510.698985 0 0 0 162.7446-109.704646 509.593133 509.593133 0 0 0 109.704646-162.703643A507.872918 507.872918 0 0 0 1023.998779 384.010035a508.180099 508.180099 0 0 0-40.281695-199.299163 509.695527 509.695527 0 0 0-109.704646-162.7446 510.596591 510.596591 0 0 0-162.7446-109.704646A508.733026 508.733026 0 0 0 512.030111-127.958633z m0 1003.458588a488.356673 488.356673 0 0 1-191.312451-38.622916 490.302154 490.302154 0 0 1-156.273317-105.322194 490.896037 490.896037 0 0 1-105.363151-156.21188A488.766248 488.766248 0 0 1 20.54019 384.010035a488.991514 488.991514 0 0 1 38.602438-191.312452 490.957473 490.957473 0 0 1 105.363152-156.232359 490.322632 490.322632 0 0 1 156.273316-105.342673A488.336194 488.336194 0 0 1 512.030111-107.479886a488.336194 488.336194 0 0 1 191.312452 38.622916 489.54444 489.54444 0 0 1 156.232358 105.342673 490.404547 490.404547 0 0 1 105.322195 156.232359A488.971035 488.971035 0 0 1 1003.520032 384.010035a488.72529 488.72529 0 0 1-38.602438 191.271494 490.404547 490.404547 0 0 1-105.322194 156.21188 490.138324 490.138324 0 0 1-156.232358 105.322194A488.356673 488.356673 0 0 1 512.030111 875.499955zM723.903225 348.45893a219.716473 219.716473 0 0 1 23.284335 98.420857A225.266214 225.266214 0 0 1 520.54927 670.302913a225.020469 225.020469 0 0 1-226.699726-223.423126 220.740411 220.740411 0 0 1 23.284335-98.420857l-91.867658-156.826242s58.405386-11.816237 117.445612-23.939655l78.740782-87.915259 84.63866 144.354685c4.914899 0 9.522617-0.65532 14.335122-0.65532s9.502138 0.32766 14.335123 0.65532l84.63866-144.354685 78.740781 87.915259c59.060705 12.143897 117.445612 23.939655 117.445613 23.939655z m-203.353955-84.311a184.615902 184.615902 0 0 0-184.30872 184.697817 184.615902 184.615902 0 0 0 184.30872 184.697816 184.595423 184.595423 0 0 0 184.30872-184.697816 184.595423 184.595423 0 0 0-184.30872-184.697817z m-147.303625 184.697817a147.446976 147.446976 0 0 1 147.303625-147.610807 147.446976 147.446976 0 0 1 147.303625 147.631285 147.446976 147.446976 0 0 1-147.303625 147.631285 147.446976 147.446976 0 0 1-147.303625-147.631285z m0 0" horiz-adv-x="1024" />
|
|
||||||
|
|
||||||
|
|
||||||
<glyph glyph-name="top" unicode="" d="M349.793933-127.947165a52.835251 52.835251 0 0 0-52.835251 52.835251v325.940664H140.196492a52.835251 52.835251 0 0 0-36.984676 90.718126l372.013003 360.811929a52.835251 52.835251 0 0 0 73.388163 0l371.907332-360.811929a52.835251 52.835251 0 0 0-36.984675-90.718126h-156.65652v-325.940664a52.835251 52.835251 0 0 0-52.835251-52.835251zM87.308406 896m52.835251 0l739.693514 0q52.835251 0 52.835251-52.835251l0 0q0-52.835251-52.835251-52.835251l-739.693514 0q-52.835251 0-52.835251 52.835251l0 0q0 52.835251 52.835251 52.835251Z" horiz-adv-x="1024" />
|
|
||||||
|
|
||||||
|
|
||||||
<glyph glyph-name="coupons" unicode="" d="M148.010667 290.709333c50.069333 0 90.666667 40.874667 90.666666 91.285334 0 49.962667-39.893333 90.538667-89.344 91.264V618.666667a64 64 0 0 0 64 64h597.333334a64 64 0 0 0 64-64l-0.021334-145.450667-3.050666-0.064c-48.021333-2.304-86.272-42.24-86.272-91.157333 0-49.962667 39.872-90.56 89.322666-91.285334V149.333333a64 64 0 0 0-64-64H213.333333a64 64 0 0 0-64 64v141.397334l-1.322666-0.021334zM213.333333 241.216V149.333333h597.333334v91.861334a155.370667 155.370667 0 0 0-89.344 140.8A154.837333 154.837333 0 0 0 810.666667 522.432V618.666667H213.333333v-95.893334a155.370667 155.370667 0 0 0 89.322667-140.8 155.370667 155.370667 0 0 0-84.266667-138.282666l-5.056-2.496zM384 298.666667h68.010667v-85.333334H384v85.333334z m0 128h68.010667v-85.333334H384v85.333334z m0 128h68.010667v-85.333334H384v85.333334z" horiz-adv-x="1024" />
|
|
||||||
|
|
||||||
|
|
||||||
<glyph glyph-name="service" unicode="" d="M673.194667 482.026667h78.72c-14.890667 116.053333-116.629333 205.824-239.914667 205.824-123.306667 0-225.024-89.792-239.914667-205.824h78.72v-264.661334H234.666667a85.333333 85.333333 0 0 0-85.333334 85.333334v93.994666a85.376 85.376 0 0 0 60.693334 81.706667l0.917333 0.256C224.490667 628.842667 354.090667 746.666667 512 746.666667c157.888 0 287.509333-117.802667 301.056-268.010667l0.917333-0.256A85.376 85.376 0 0 0 874.666667 396.693333v-93.994666a85.333333 85.333333 0 0 0-85.333334-85.333334l-55.722666 0.021334v-40.384a106.709333 106.709333 0 0 0-74.368-101.696A78.506667 78.506667 0 0 0 584.704 21.333333h-115.178667a78.421333 78.421333 0 0 0 0 156.821334h115.178667c27.050667 0 50.901333-13.696 64.981333-34.517334a63.744 63.744 0 0 1 23.381334 45.76l0.128 3.754667v288.853333zM584.704 114.133333h-115.178667a14.421333 14.421333 0 0 1 0-28.821333h115.178667a14.421333 14.421333 0 0 1 0 28.821333zM286.805333 418.026667H234.666667a21.333333 21.333333 0 0 1-21.333334-21.333334v-93.994666a21.333333 21.333333 0 0 1 21.333334-21.333334h52.138666v136.661334z m502.528 0h-52.138666v-136.661334H789.333333a21.333333 21.333333 0 0 1 21.333334 21.333334v93.994666a21.333333 21.333333 0 0 1-21.333334 21.333334z" horiz-adv-x="1024" />
|
|
||||||
|
|
||||||
|
|
||||||
<glyph glyph-name="survey" unicode="" d="M830.784 406.698667l45.098667-45.397334-322.282667-320-14.656 14.762667 14.741333-14.890667h-45.013333v45.376l-0.149333 0.149334 322.261333 320zM746.666667 725.333333a64 64 0 0 0 64-64v-192l-64-64V661.333333H277.333333v-554.666666h170.666667l-64-64h-106.666667a64 64 0 0 0-64 64V661.333333a64 64 0 0 0 64 64h469.333334z m-198.058667-448v-64h-67.434667l-0.021333 64h67.456z m-3.968 316.330667c43.562667-8.768 95.36-50.304 95.36-110.741333 0-60.437333-49.365333-83.328-67.050667-94.634667-16.426667-10.517333-23.317333-22.506667-24.234666-35.306667l-0.106667-2.965333V320h-67.456v54.592c0 21.248 6.848 36.117333 25.941333 49.28l3.989334 2.624 37.888 25.216c24.170667 16.277333 23.829333 48.917333 8.874666 63.36a67.925333 67.925333 0 0 1-59.434666 15.232c-42.154667-8.277333-46.933333-38.08-47.189334-66.922667v-16.085333H384c0 56.064 6.421333 81.472 36.352 113.578667 33.493333 35.882667 80.704 41.621333 124.288 32.789333z" horiz-adv-x="1024" />
|
|
||||||
|
|
||||||
|
|
||||||
<glyph glyph-name="collection" unicode="" d="M490.261333 722.56a49.066667 49.066667 0 0 0 64.064-19.178667l1.664-3.093333 87.850667-177.813333 196.352-28.501334a49.066667 49.066667 0 0 0 29.717333-81.066666l-2.538666-2.645334L725.333333 272l33.536-195.349333a49.066667 49.066667 0 0 0-68.010666-53.269334l-3.157334 1.514667L512 117.141333l-175.701333-92.266666a49.066667 49.066667 0 0 0-71.637334 48.426666l0.469334 3.328L298.666667 271.978667 156.629333 410.24a49.066667 49.066667 0 0 0 23.893334 83.114667l3.285333 0.597333 196.352 28.501333 87.850667 177.813334a49.066667 49.066667 0 0 0 22.250666 22.272z m-67.626666-258.581333l-199.658667-28.992 144.469333-140.650667-34.133333-198.741333L512 189.44l178.688-93.845333-34.133333 198.741333 144.469333 140.650667-199.658667 28.992L512 644.842667l-89.386667-180.864z" horiz-adv-x="1024" />
|
|
||||||
|
|
||||||
|
|
||||||
<glyph glyph-name="cart-Empty" unicode="" d="M330.667 128a53.333 53.333 0 1 0 0-106.667 53.333 53.333 0 0 0 0 106.667z m384 0a53.333 53.333 0 1 0 0-106.667 53.333 53.333 0 0 0 0 106.667zM94.763 736h54.741a96 96 0 0 0 92.907-71.787l1.024-4.394 13.205-62.486h0.213L299.733 392l32.491-157.333h402.219l61.653 298.666H313.813l-13.376 64h495.68a64 64 0 0 0 62.678-76.949L797.14 221.717a64 64 0 0 0-62.698-51.05H332.224a64 64 0 0 0-62.677 51.05L208.96 515.136l-0.405-0.085-27.734 131.562a32 32 0 0 1-28.309 25.238l-2.987 0.149H94.741v64h54.742z" horiz-adv-x="1024" />
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</font>
|
|
||||||
</defs></svg>
|
|
||||||
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,16 +0,0 @@
|
||||||
#!/bin/bash
|
|
||||||
# 文件原路径
|
|
||||||
srcPath="./dist"
|
|
||||||
# 发布路径文件夹
|
|
||||||
releasePath="../server/public/pc"
|
|
||||||
|
|
||||||
|
|
||||||
#删除发布目录下的PC文件
|
|
||||||
rm -r $releasePath
|
|
||||||
echo "已删除 ==> $releasePath 下的目录文件"
|
|
||||||
mkdir $releasePath
|
|
||||||
echo "已新建 ==> $releasePath 目录"
|
|
||||||
|
|
||||||
# 复制打包目录内的文件到发布目录
|
|
||||||
cp -r $srcPath/* $releasePath
|
|
||||||
echo "已复制 $srcPath/* ==> $releasePath"
|
|
||||||
|
|
@ -1,133 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="activity-area m-t-16" v-if="list.length">
|
|
||||||
<div class="title flex row-between">
|
|
||||||
<div class="font-size-20">{{ title }}</div>
|
|
||||||
<nuxt-link :to="url" class="more lighter"
|
|
||||||
>更多 <i class="el-icon-arrow-right"></i
|
|
||||||
></nuxt-link>
|
|
||||||
</div>
|
|
||||||
<div class="activity-goods m-t-16">
|
|
||||||
<client-only>
|
|
||||||
<swiper ref="headerSwiper" :options="swiperOptions">
|
|
||||||
<swiper-slide
|
|
||||||
class="swiper-item"
|
|
||||||
v-for="(item, index) in swiperSize"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<div class="goods-list flex row-between">
|
|
||||||
<nuxt-link
|
|
||||||
class="goods-item"
|
|
||||||
:to="`/goods_details/${gitem.id}`"
|
|
||||||
v-for="(gitem, gindex) in getSwiperList(index)"
|
|
||||||
:key="gindex"
|
|
||||||
>
|
|
||||||
<div class="goods-img">
|
|
||||||
<el-image
|
|
||||||
lazy
|
|
||||||
:src="gitem.image"
|
|
||||||
fit="cover"
|
|
||||||
alt=""
|
|
||||||
></el-image>
|
|
||||||
</div>
|
|
||||||
<div class="name line-2 m-t-10">{{ gitem.name }}</div>
|
|
||||||
<div class="price flex col-baseline m-t-10">
|
|
||||||
<div class="primary m-r-8">
|
|
||||||
<price-formate
|
|
||||||
:price="gitem.min_price"
|
|
||||||
:first-size="16"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="muted sm line-through ">
|
|
||||||
<price-formate
|
|
||||||
:price="gitem.market_price"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="muted xs m-t-10">
|
|
||||||
{{ gitem.sales_total }}人购买
|
|
||||||
</div>
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
</swiper-slide>
|
|
||||||
</swiper>
|
|
||||||
</client-only>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
url: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
list: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
swiperOptions: {
|
|
||||||
direction: 'vertical',
|
|
||||||
initialSlide: 0,
|
|
||||||
height: 280,
|
|
||||||
autoplay: true,
|
|
||||||
},
|
|
||||||
pageSize: 3,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
swiperSize() {
|
|
||||||
return Math.ceil(this.list.length / this.pageSize)
|
|
||||||
},
|
|
||||||
getSwiperList() {
|
|
||||||
return (index) => {
|
|
||||||
return this.list.slice(
|
|
||||||
index * this.pageSize,
|
|
||||||
(index + 1) * this.pageSize
|
|
||||||
)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.activity-area {
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background-color: #fff;
|
|
||||||
::v-deep .swiper-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 280px;
|
|
||||||
}
|
|
||||||
.goods-list {
|
|
||||||
.goods-item {
|
|
||||||
width: 31.5%;
|
|
||||||
.goods-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 0;
|
|
||||||
padding-top: 100%;
|
|
||||||
position: relative;
|
|
||||||
.el-image {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.name {
|
|
||||||
line-height: 20px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="ad-item" @click.stop="goPage(item)">
|
|
||||||
<el-image :src="item.image" fit="cover" style="width: 100%; height: 100%"></el-image>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { paramsToStr } from "~/utils/tools";
|
|
||||||
export default {
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
item: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
goPage(item) {
|
|
||||||
let { link_type, link, params } = item;
|
|
||||||
switch (link_type) {
|
|
||||||
case 3:
|
|
||||||
window.open(item.link);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
if (["/goods_details"].includes(link)) {
|
|
||||||
link += `/${params.id}`;
|
|
||||||
} else {
|
|
||||||
link += paramsToStr(params);
|
|
||||||
}
|
|
||||||
this.$router.push({
|
|
||||||
path: link,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.ad-item {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,181 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="address-add">
|
|
||||||
<el-dialog :title="aid ? '修改地址' : '添加地址'" top="30vh" :visible.sync="showDialog" width="700px" @closed="onClosed">
|
|
||||||
<el-form inline ref="form" :model="address" label-width="100px" :rules="rules">
|
|
||||||
<el-form-item label="收货人：" prop="contact">
|
|
||||||
<el-input size="small" v-model="address.contact" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系方式：" prop="telephone">
|
|
||||||
<el-input size="small" v-model="address.telephone" />
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="所在地区：" prop="region">
|
|
||||||
<el-cascader :options="options" v-model="address.region" @change="handleChange" placeholder="请选择省市区"
|
|
||||||
clearable size="small">
|
|
||||||
</el-cascader>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="详细地址：" prop="address">
|
|
||||||
<el-input type="textarea" placeholder="请输入详细地址，如街道、门牌号等" v-model="address.address" :rows="3"
|
|
||||||
resize="none">
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<div>
|
|
||||||
<el-form-item label=" ">
|
|
||||||
<el-checkbox :true-label="1" :false-label="0" v-model="address.is_default">设为默认</el-checkbox>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<div slot="footer" class="dialog-footer">
|
|
||||||
<el-button type="primary" @click="submitForm">保存地址</el-button>
|
|
||||||
<el-button @click="showDialog = false">取消</el-button>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import regionData from "~/utils/area";
|
|
||||||
// @event success 修改/添加成功
|
|
||||||
// @event change 详细地址更改
|
|
||||||
export default {
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
aid: {
|
|
||||||
type: [Number, String],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showDialog: false,
|
|
||||||
options: regionData,
|
|
||||||
address: {
|
|
||||||
is_default: true,
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
contact: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: "请输入收货人",
|
|
||||||
trigger: "change",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
telephone: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: "请输入联系方式",
|
|
||||||
trigger: "change",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
address: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: "请输入详细地址",
|
|
||||||
trigger: "change",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
region: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
validator: (rule, value, callback) => {
|
|
||||||
if (!value || !value.length > 0) {
|
|
||||||
return callback(new Error("请选择省市区"));
|
|
||||||
} else {
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onClosed() {
|
|
||||||
this.address = {
|
|
||||||
region: [],
|
|
||||||
};
|
|
||||||
this.$refs.form.resetFields();
|
|
||||||
},
|
|
||||||
async getOneAddress() {
|
|
||||||
const { data, code } = await this.$get("user_address/detail", {
|
|
||||||
params: { id: this.aid },
|
|
||||||
});
|
|
||||||
if (code == 1) {
|
|
||||||
const { province_id, city_id, district_id, is_default } = data;
|
|
||||||
data.region = [province_id, city_id, district_id];
|
|
||||||
data.is_default = Boolean(is_default);
|
|
||||||
this.address = data;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleChange(val) {
|
|
||||||
console.log(val);
|
|
||||||
this.address.province_id = val[0];
|
|
||||||
this.address.city_id = val[1];
|
|
||||||
this.address.district_id = val[2];
|
|
||||||
},
|
|
||||||
submitForm() {
|
|
||||||
this.$refs.form.validate(async (valid) => {
|
|
||||||
if (valid) {
|
|
||||||
let address = JSON.parse(JSON.stringify(this.address));
|
|
||||||
delete address.region;
|
|
||||||
const { code, msg } = this.aid
|
|
||||||
? await this.$post("user_address/update", {
|
|
||||||
...address,
|
|
||||||
id: this.aid,
|
|
||||||
})
|
|
||||||
: await this.$post("user_address/add", address);
|
|
||||||
if (code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: msg,
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
this.showDialog = false;
|
|
||||||
this.$emit("success");
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value(val) {
|
|
||||||
this.showDialog = val;
|
|
||||||
},
|
|
||||||
showDialog(val) {
|
|
||||||
if (val) {
|
|
||||||
if (this.aid) {
|
|
||||||
this.getOneAddress();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.$emit("input", val);
|
|
||||||
},
|
|
||||||
aid(val) {
|
|
||||||
if (val) {
|
|
||||||
this.getOneAddress();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.address-add {
|
|
||||||
.el-cascader {
|
|
||||||
width: 468px;
|
|
||||||
}
|
|
||||||
.el-textarea {
|
|
||||||
width: 468px;
|
|
||||||
}
|
|
||||||
.dialog-footer {
|
|
||||||
text-align: center;
|
|
||||||
.el-button {
|
|
||||||
width: 160px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,147 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="address-list">
|
|
||||||
<el-dialog title="更换地址" :visible.sync="showDialog" width="900px">
|
|
||||||
<div class="list black">
|
|
||||||
<div
|
|
||||||
:class="['item m-b-16', { active: item.id == selectId }]"
|
|
||||||
v-for="(item, index) in addressList"
|
|
||||||
:key="index"
|
|
||||||
@click="selectId = item.id"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<span class="weigth-500">{{ item.contact }}</span>
|
|
||||||
{{ item.telephone }}
|
|
||||||
<el-tag
|
|
||||||
size="mini"
|
|
||||||
type="warning"
|
|
||||||
effect="dark"
|
|
||||||
v-if="item.is_default"
|
|
||||||
>默认</el-tag
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="lighter m-t-8">
|
|
||||||
{{ item.province }} {{ item.city }} {{ item.district }}
|
|
||||||
{{ item.address }}
|
|
||||||
</div>
|
|
||||||
<div class="oprate lighter flex">
|
|
||||||
<div
|
|
||||||
class="m-r-16"
|
|
||||||
@click.stop="
|
|
||||||
editId = item.id
|
|
||||||
showAddressAdd = true
|
|
||||||
"
|
|
||||||
>
|
|
||||||
修改
|
|
||||||
</div>
|
|
||||||
<div @click.stop="setDefault(item.id)">设为默认</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div slot="footer" class="dialog-footer">
|
|
||||||
<el-button type="primary" @click="onConfirm">确认</el-button>
|
|
||||||
<el-button @click="showDialog = false">取消</el-button>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
<address-add
|
|
||||||
v-model="showAddressAdd"
|
|
||||||
:aid="editId"
|
|
||||||
@success="getAddress"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showDialog: false,
|
|
||||||
showAddressAdd: false,
|
|
||||||
addressList: [],
|
|
||||||
selectId: 0,
|
|
||||||
editId: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
async getAddress() {
|
|
||||||
const { code, data } = await this.$get('user_address/lists')
|
|
||||||
if (code == 1) {
|
|
||||||
this.addressList = data
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async setDefault(id) {
|
|
||||||
const { code, data, msg } = await this.$post(
|
|
||||||
'user_address/setDefault',
|
|
||||||
{
|
|
||||||
id,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
if (code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: msg,
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
this.getAddress()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onConfirm() {
|
|
||||||
this.$emit('confirm', this.selectId)
|
|
||||||
this.showDialog = false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value(val) {
|
|
||||||
this.showDialog = val
|
|
||||||
if (val == true) {
|
|
||||||
this.getAddress()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
showDialog(val) {
|
|
||||||
this.$emit('input', val)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.address-list {
|
|
||||||
::v-deep .el-dialog__body {
|
|
||||||
height: 460px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
.list {
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 800px;
|
|
||||||
.item {
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 16px 20px;
|
|
||||||
height: 100px;
|
|
||||||
padding-right: 150px;
|
|
||||||
border: 1px solid $--border-color-base;
|
|
||||||
border-radius: 2px;
|
|
||||||
&.active {
|
|
||||||
border-color: $--color-primary;
|
|
||||||
}
|
|
||||||
.oprate {
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
bottom: 9px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dialog-footer {
|
|
||||||
text-align: center;
|
|
||||||
.el-button {
|
|
||||||
width: 160px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,160 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="after-sales-list">
|
|
||||||
<div class="m-b-20" v-for="(items) in lists" :key="items.order_id">
|
|
||||||
|
|
||||||
<div class="after-sales-header m-t-30 flex row-between" style="border:0">
|
|
||||||
<div class="flex row-around">
|
|
||||||
<div class="lighter sm flex" style="margin-right:100px">
|
|
||||||
<img style="width:20px;height: 20px" class="m-r-5" :src="items.shop_logo" alt="">
|
|
||||||
{{items.shop_name}}
|
|
||||||
</div>
|
|
||||||
<div class="lighter sm" v-if="type == 'normal'">
|
|
||||||
申请时间：{{items.create_time}}
|
|
||||||
</div>
|
|
||||||
<div class="lighter sm" style="margin-left: 110px" v-else>
|
|
||||||
下单时间：{{items.after_sale.status_text}}
|
|
||||||
</div>
|
|
||||||
<div class="lighter sm" style="margin-left: 110px" v-if="type == 'normal'">
|
|
||||||
订单编号：{{items.after_sale.sn}}
|
|
||||||
</div>
|
|
||||||
<div class="lighter sm" style="margin-left: 110px" v-else>
|
|
||||||
退款编号：{{items.after_sale.sn}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="primary sm" style="margin-right: 12px">
|
|
||||||
{{items.after_sale.type_text}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="after-sales-content" :class="{shadow: type != 'normal', border: type == 'normal'}">
|
|
||||||
<div class="goods-item flex row-between" v-for="(item, index) in items.order_goods" :key="index">
|
|
||||||
<div class="flex">
|
|
||||||
<el-image style="width: 72px;height: 72px" :src="item.image" />
|
|
||||||
<div class="goods-info">
|
|
||||||
<div class="goods-name noraml line1">
|
|
||||||
{{item.goods_name}}
|
|
||||||
</div>
|
|
||||||
<div class="muted sm m-t-8 m-b-8">
|
|
||||||
{{item.spec_value_str}}
|
|
||||||
</div>
|
|
||||||
<price-formate :price="item.goods_price" showSubscript color="#FF2C3C" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex row-right" :style="{width: type != 'apply' ? null : '340px'}">
|
|
||||||
<el-button class="apply-btn row-center mr20 sm"
|
|
||||||
|
|
||||||
@click.stop="goPage(items.order_id, item.item_id)" v-if="type == 'normal'" size="small">申请售后
|
|
||||||
</el-button>
|
|
||||||
<el-button class="apply-btn row-center mr20 sm" v-if="type != 'normal'" size="small"
|
|
||||||
@click="goToDetail(items.after_sale.after_sale_id)">查看详情</el-button>
|
|
||||||
|
|
||||||
<el-button class="apply-btn row-center mr20 sm" v-if="type == 'apply'" size="small"
|
|
||||||
@click.stop="cancelApply(items.after_sale.after_sale_id)">撤销申请</el-button>
|
|
||||||
|
|
||||||
<el-button class="apply-btn row-center mr20 sm" v-if="items.after_sale.status==2" size="small"
|
|
||||||
@click.stop="showInput(items.after_sale.after_sale_id)">填写快递单号</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { AfterSaleType } from "@/utils/type";
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: AfterSaleType.NORMAL,
|
|
||||||
},
|
|
||||||
lists: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
goToDetail(id) {
|
|
||||||
switch (this.type) {
|
|
||||||
case AfterSaleType.NORMAL:
|
|
||||||
this.$router.push("/goods_details/" + id);
|
|
||||||
break;
|
|
||||||
case AfterSaleType.HANDLING:
|
|
||||||
case AfterSaleType.FINISH:
|
|
||||||
this.$router.push(
|
|
||||||
"/user/after_sales/after_sale_details?afterSaleId=" + id
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
goPage(orderId, itemId) {
|
|
||||||
this.$router.push(
|
|
||||||
"/user/after_sales/apply_sale?order_id=" +
|
|
||||||
orderId +
|
|
||||||
"&item_id=" +
|
|
||||||
itemId
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
showInput(e) {
|
|
||||||
this.$emit("show", e);
|
|
||||||
},
|
|
||||||
|
|
||||||
async cancelApply(afterSaleId) {
|
|
||||||
let res = await this.$post("after_sale/cancel", {
|
|
||||||
id: afterSaleId,
|
|
||||||
});
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: res.msg,
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
this.$emit("refresh");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.after-sales-list {
|
|
||||||
.after-sales-header {
|
|
||||||
border: 1px solid #e5e5e5;
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
padding: 13px 16px;
|
|
||||||
}
|
|
||||||
.after-sales-content {
|
|
||||||
.goods-item {
|
|
||||||
padding: 10px 20px;
|
|
||||||
.goods-info {
|
|
||||||
margin-left: 10px;
|
|
||||||
width: 500px;
|
|
||||||
}
|
|
||||||
.apply-btn {
|
|
||||||
border: 1px solid #cccccc;
|
|
||||||
border-radius: 2px;
|
|
||||||
width: 100px;
|
|
||||||
height: 32px;
|
|
||||||
align-self: flex-start;
|
|
||||||
&:nth-of-type(2n) {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
&:nth-of-type(3) {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
&:nth-of-type(4) {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shadow {
|
|
||||||
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.08);
|
|
||||||
}
|
|
||||||
.border {
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,144 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="comment-list">
|
|
||||||
<div class="comment-con">
|
|
||||||
<template v-if="commentList.length">
|
|
||||||
<div
|
|
||||||
class="item flex"
|
|
||||||
v-for="(item, index) in commentList"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<div class="avatar m-r-8">
|
|
||||||
<img :src="item.avatar" alt="" />
|
|
||||||
</div>
|
|
||||||
<div class="content flex-1">
|
|
||||||
<div>{{ item.nickname }}</div>
|
|
||||||
<div class="lighter" style="margin: 5px 0 10px">
|
|
||||||
<span>{{ item.create_time }}</span>
|
|
||||||
<span>|</span>
|
|
||||||
<span>规格：{{ item.spec_value_str }}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{{ item.comment }}
|
|
||||||
</div>
|
|
||||||
<div class="comment-imglist flex">
|
|
||||||
<div
|
|
||||||
class="item"
|
|
||||||
v-for="(img, index) in item.image"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<el-image
|
|
||||||
:preview-src-list="item.image"
|
|
||||||
:src="img"
|
|
||||||
style="height: 100%; width: 100%"
|
|
||||||
fit="contain"
|
|
||||||
></el-image>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex reply m-t-16" v-if="item.reply">
|
|
||||||
<div class="primary flex-none">商家回复：</div>
|
|
||||||
<div class="lighter">
|
|
||||||
{{ item.reply }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="pagination flex row-center"
|
|
||||||
style="padding: 38px 0"
|
|
||||||
v-if="count"
|
|
||||||
>
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
hide-on-single-page
|
|
||||||
layout="prev, pager, next"
|
|
||||||
:total="count"
|
|
||||||
:page-size="10"
|
|
||||||
@current-change="changePage"
|
|
||||||
>
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<null-data
|
|
||||||
v-else
|
|
||||||
:img="require('~/static/images/news_null.png')"
|
|
||||||
text="暂无评价~"
|
|
||||||
></null-data>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
list: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
type: Number,
|
|
||||||
goodsId: [String, Number],
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
commentList: [],
|
|
||||||
count: 0,
|
|
||||||
page: 1,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.getCommentList()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async getCommentList() {
|
|
||||||
const { data, code } = await this.$get('goods_comment/lists', {
|
|
||||||
params: {
|
|
||||||
type: this.type,
|
|
||||||
goods_id: this.goodsId,
|
|
||||||
page_size: 10,
|
|
||||||
page_no: this.page,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
if (code == 1) {
|
|
||||||
this.commentList = data.lists
|
|
||||||
this.count = data.count
|
|
||||||
}
|
|
||||||
},
|
|
||||||
changePage(current) {
|
|
||||||
this.page = current
|
|
||||||
this.getCommentList()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.comment-list {
|
|
||||||
.comment-con {
|
|
||||||
& > .item {
|
|
||||||
padding: 20px;
|
|
||||||
border-bottom: 1px dashed #e5e5e5;
|
|
||||||
align-items: flex-start;
|
|
||||||
.avatar {
|
|
||||||
img {
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.comment-imglist {
|
|
||||||
margin-top: 10px;
|
|
||||||
.item {
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.reply {
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
align-items: flex-start;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,107 +0,0 @@
|
||||||
<template>
|
|
||||||
<div v-if="time >= 0">
|
|
||||||
<client-only>
|
|
||||||
<slot v-if="isSlot"></slot>
|
|
||||||
<span v-else>{{ formateTime }}</span>
|
|
||||||
</client-only>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { parseTimeData, parseFormat } from '~/utils/parseTime'
|
|
||||||
export default {
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
isSlot: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
time: {
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
format: {
|
|
||||||
type: String,
|
|
||||||
default: 'hh:mm:ss',
|
|
||||||
},
|
|
||||||
autoStart: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
time: {
|
|
||||||
immediate: true,
|
|
||||||
handler(value) {
|
|
||||||
if (value) {
|
|
||||||
this.reset()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
timeObj: {},
|
|
||||||
formateTime: 0,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {},
|
|
||||||
computed: {},
|
|
||||||
methods: {
|
|
||||||
createTimer(fn) {
|
|
||||||
return setTimeout(fn, 100)
|
|
||||||
},
|
|
||||||
isSameSecond(time1, time2) {
|
|
||||||
return Math.floor(time1) === Math.floor(time2)
|
|
||||||
},
|
|
||||||
start() {
|
|
||||||
if (this.counting) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.counting = true
|
|
||||||
this.endTime = Date.now() + this.remain * 1000
|
|
||||||
this.setTimer()
|
|
||||||
},
|
|
||||||
setTimer() {
|
|
||||||
this.tid = this.createTimer(() => {
|
|
||||||
let remain = this.getRemain()
|
|
||||||
if (!this.isSameSecond(remain, this.remain) || remain === 0) {
|
|
||||||
this.setRemain(remain)
|
|
||||||
}
|
|
||||||
if (this.remain !== 0) {
|
|
||||||
this.setTimer()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getRemain() {
|
|
||||||
return Math.max(this.endTime - Date.now(), 0)
|
|
||||||
},
|
|
||||||
pause() {
|
|
||||||
this.counting = false
|
|
||||||
clearTimeout(this.tid)
|
|
||||||
},
|
|
||||||
reset() {
|
|
||||||
this.pause()
|
|
||||||
this.remain = this.time
|
|
||||||
this.setRemain(this.remain)
|
|
||||||
if (this.autoStart) {
|
|
||||||
this.start()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setRemain(remain) {
|
|
||||||
const { format } = this
|
|
||||||
this.remain = remain
|
|
||||||
const timeData = parseTimeData(remain)
|
|
||||||
this.formateTime = parseFormat(format, timeData)
|
|
||||||
this.$emit('change', timeData)
|
|
||||||
if (remain === 0) {
|
|
||||||
this.pause()
|
|
||||||
this.$emit('finish')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,243 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="coupons-list flex">
|
|
||||||
<template v-for="(item, index) in couponsList">
|
|
||||||
<div v-show="item.isShow" class="item" :key="index" @click.capture="onHandle(item.id, item.is_get)">
|
|
||||||
<div :class="[
|
|
||||||
'info white',
|
|
||||||
{ gray: type == 2 || type == 1 || item.is_get },
|
|
||||||
]">
|
|
||||||
<div class="info-hd flex">
|
|
||||||
<div>
|
|
||||||
<price-formate :price="item.money" :first-size="38" :second-size="38" />
|
|
||||||
</div>
|
|
||||||
<div class="m-l-8 flex1">
|
|
||||||
<div class="line1">{{ item.name }}</div>
|
|
||||||
<div class="xs line1">{{ item.condition_type_desc }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="info-time xs">{{ item.user_time_desc }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="tips flex row-between" @click.stop="onShowTips(index)">
|
|
||||||
<div class="muted xs">{{ item.use_scene_desc }}</div>
|
|
||||||
<div v-if="item.use_goods_type != 1 && (type == 1 || type == 2 || type == 0)">
|
|
||||||
<i :class="
|
|
||||||
showTips[index] ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
|
|
||||||
"></i>
|
|
||||||
<div class="tips-con xs lighter" v-if="item.use_scene_desc != '全场通用' && showTips[index]">
|
|
||||||
{{ item.use_goods_desc }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="primary sm" v-if="type == 3 && !item.is_get">
|
|
||||||
立即领取
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<img v-if="item.is_get" class="receice" src="~/static/images/coupons_img_receive.png" alt="" />
|
|
||||||
<div class="choose xs" v-if="type == 4 && id == item.id">已选择</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div class="more muted" v-if="showMore && list.length > 4" @click="changeShow">
|
|
||||||
{{ isMore ? '收起' : '更多' }}
|
|
||||||
<i :class="isMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
mapActions
|
|
||||||
} from "vuex";
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
list: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: Number,
|
|
||||||
},
|
|
||||||
showMore: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showTips: [],
|
|
||||||
couponsList: [],
|
|
||||||
id: "",
|
|
||||||
isMore: false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions(["getPublicData"]),
|
|
||||||
onHandle(id, isGet) {
|
|
||||||
this.id = id;
|
|
||||||
const {
|
|
||||||
type
|
|
||||||
} = this;
|
|
||||||
switch (type) {
|
|
||||||
case 0:
|
|
||||||
// 可使用
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
break;
|
|
||||||
// 使用
|
|
||||||
case 2:
|
|
||||||
break;
|
|
||||||
//不可以用
|
|
||||||
case 3:
|
|
||||||
// 领券
|
|
||||||
if(!isGet) {
|
|
||||||
this.getCoupon();
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 4:
|
|
||||||
//使用
|
|
||||||
if (this.selectId == id) {
|
|
||||||
this.id = "";
|
|
||||||
}
|
|
||||||
this.$emit("use", this.id);
|
|
||||||
this.selectId = this.id;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async getCoupon() {
|
|
||||||
const {
|
|
||||||
msg,
|
|
||||||
code
|
|
||||||
} = await this.$post("coupon/getCoupon", {
|
|
||||||
coupon_id: this.id,
|
|
||||||
});
|
|
||||||
if (code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: msg,
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
this.getPublicData();
|
|
||||||
this.$emit("reflash");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onShowTips(index) {
|
|
||||||
const {
|
|
||||||
showTips
|
|
||||||
} = this;
|
|
||||||
|
|
||||||
this.showTips[index] = showTips[index] ? 0 : 1;
|
|
||||||
// 拷贝数组
|
|
||||||
this.showTips = Object.assign([], this.showTips);
|
|
||||||
},
|
|
||||||
changeShow() {
|
|
||||||
this.isMore = !this.isMore;
|
|
||||||
this.list.forEach((item, index) => {
|
|
||||||
item.isShow = true;
|
|
||||||
if (!this.isMore && index >= 4) {
|
|
||||||
item.isShow = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.couponsList = [...this.list];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
list: {
|
|
||||||
handler: function(val) {
|
|
||||||
if (val.length) {
|
|
||||||
// 默认选中第一张
|
|
||||||
if (this.type == 4) {
|
|
||||||
this.id = val[0].id;
|
|
||||||
this.selectId = this.id;
|
|
||||||
this.$emit("use", this.id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let arr = val.map((item) => {
|
|
||||||
return 0;
|
|
||||||
});
|
|
||||||
this.showTips = arr;
|
|
||||||
this.list.forEach((item, index) => {
|
|
||||||
item.isShow = true;
|
|
||||||
if (this.showMore) {
|
|
||||||
if (index >= 4) {
|
|
||||||
item.isShow = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.couponsList = this.list;
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
deep: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.coupons-list {
|
|
||||||
padding: 0 18px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.item {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
margin-right: 16px;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.info {
|
|
||||||
padding: 0 10px;
|
|
||||||
background: url("~/static/images/bg_coupon_s.png") no-repeat;
|
|
||||||
width: 240px;
|
|
||||||
height: 80px;
|
|
||||||
background-size: 100%;
|
|
||||||
|
|
||||||
&.gray {
|
|
||||||
background-image: url("~/static/images/bg_coupon.png");
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hd {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips {
|
|
||||||
position: relative;
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
height: 30px;
|
|
||||||
padding: 0 8px;
|
|
||||||
|
|
||||||
.tips-con {
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
position: absolute;
|
|
||||||
top: 30px;
|
|
||||||
padding: 10px;
|
|
||||||
z-index: 99;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.receice {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 58px;
|
|
||||||
height: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.choose {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
background-color: #ffe72c;
|
|
||||||
color: $--color-primary;
|
|
||||||
padding: 1px 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.more {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
right: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,209 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="deliver-search-container">
|
|
||||||
<el-dialog :visible.sync="showDialog" top="30vh" width="900px" title="物流查询">
|
|
||||||
<div class="deliver-box">
|
|
||||||
<div class="deliver-recode-box flex">
|
|
||||||
<div class="recode-img">
|
|
||||||
<el-image style="width: 100%; height: 100%" fit="cover" :src="deliverOrder.image" />
|
|
||||||
<div class="float-count flex row-center">共{{deliverOrder.count}}件商品</div>
|
|
||||||
</div>
|
|
||||||
<div class="recode-info-container m-l-10">
|
|
||||||
<div class="flex">
|
|
||||||
<div class="recode-label">物流状态：</div>
|
|
||||||
<div class="primary lg" style="font-weight: 500">{{deliverOrder.tips}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex" style="margin: 6px 0;">
|
|
||||||
<div class="recode-label">快递公司：</div>
|
|
||||||
<div >{{deliverOrder.shipping_name}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="recode-label">快递单号：</div>
|
|
||||||
<div>{{deliverOrder.invoice_no}}</div>
|
|
||||||
<div class="copy-btn primary flex row-center" @click="onCopy">复制</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="deliver-flow-box m-t-16">
|
|
||||||
<el-timeline>
|
|
||||||
<!-- 收货 -->
|
|
||||||
<el-timeline-item
|
|
||||||
v-if="deliverFinish.tips"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<div class="flex lg">
|
|
||||||
<div class="m-r-8" style="font-weight: 500">
|
|
||||||
{{deliverTake.contacts}}
|
|
||||||
</div>
|
|
||||||
<div style="font-weight: 500">{{deliverTake.mobile}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="lighter m-t-8">{{deliverTake.address}}</div>
|
|
||||||
</div>
|
|
||||||
</el-timeline-item>
|
|
||||||
<!-- 交易状态 -->
|
|
||||||
<el-timeline-item
|
|
||||||
v-if="deliverFinish.tips"
|
|
||||||
:timestamp="deliverFinish.time"
|
|
||||||
>
|
|
||||||
<div class="time-line-title">{{deliverFinish.title}}</div>
|
|
||||||
<div>{{deliverFinish.tips}}</div>
|
|
||||||
</el-timeline-item>
|
|
||||||
<!-- 跟踪物流 -->
|
|
||||||
<el-timeline-item
|
|
||||||
v-if="delivery.traces && delivery.traces.length"
|
|
||||||
:timestamp="delivery.time"
|
|
||||||
>
|
|
||||||
<div class="time-line-title m-b-8">{{delivery.title}}</div>
|
|
||||||
<el-timeline-item
|
|
||||||
v-for="(item, index) in delivery.traces"
|
|
||||||
:key="index"
|
|
||||||
:timestamp="item[0]"
|
|
||||||
>
|
|
||||||
<div class="muted">{{item[1]}}</div>
|
|
||||||
</el-timeline-item>
|
|
||||||
</el-timeline-item>
|
|
||||||
<!-- 完成 -->
|
|
||||||
<el-timeline-item
|
|
||||||
v-if="deliverShipment.tips"
|
|
||||||
:timestamp="deliverShipment.time"
|
|
||||||
>
|
|
||||||
<div class="time-line-title">{{deliverShipment.title}}</div>
|
|
||||||
<div>{{deliverShipment.tips}}</div>
|
|
||||||
</el-timeline-item>
|
|
||||||
<!-- 下单 -->
|
|
||||||
<el-timeline-item
|
|
||||||
v-if="deliverBuy.tips"
|
|
||||||
:timestamp="deliverBuy.time"
|
|
||||||
>
|
|
||||||
<div class="time-line-title">{{deliverBuy.title}}</div>
|
|
||||||
<div>{{deliverBuy.tips}}</div>
|
|
||||||
</el-timeline-item>
|
|
||||||
</el-timeline>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
aid: {
|
|
||||||
type: Number | String
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showDialog: false,
|
|
||||||
deliverBuy: {},
|
|
||||||
delivery: {},
|
|
||||||
deliverFinish: {},
|
|
||||||
deliverOrder: {},
|
|
||||||
deliverShipment: {},
|
|
||||||
deliverTake: {},
|
|
||||||
timeLineArray: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value(val) {
|
|
||||||
console.log(val, 'val')
|
|
||||||
this.showDialog = val;
|
|
||||||
},
|
|
||||||
showDialog(val) {
|
|
||||||
if(val) {
|
|
||||||
if(this.aid) {
|
|
||||||
this.timeLineArray = []
|
|
||||||
this.getDeliverTraces();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.$emit("input", val);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async getDeliverTraces() {
|
|
||||||
let data = {
|
|
||||||
id: this.aid
|
|
||||||
}
|
|
||||||
let res = await this.$get("order/orderTraces", {params: data});
|
|
||||||
if(res.code == 1) {
|
|
||||||
let {buy, delivery, finish, order, shipment, take} = res.data
|
|
||||||
this.deliverBuy = buy;
|
|
||||||
this.delivery = delivery;
|
|
||||||
this.deliverFinish = finish;
|
|
||||||
this.deliverOrder = order;
|
|
||||||
this.deliverShipment = shipment;
|
|
||||||
this.deliverTake = take;
|
|
||||||
this.timeLineArray.push(this.deliverFinish);
|
|
||||||
this.timeLineArray.push(this.delivery);
|
|
||||||
this.timeLineArray.push(this.deliverShipment);
|
|
||||||
this.timeLineArray.push(this.deliverBuy);
|
|
||||||
console.log(this.timeLineArray)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onCopy() {
|
|
||||||
// this.deliverOrder.invoice_no;
|
|
||||||
let oInput = document.createElement('input');
|
|
||||||
oInput.value = this.deliverOrder.invoice_no;
|
|
||||||
document.body.appendChild(oInput);
|
|
||||||
oInput.select();
|
|
||||||
document.execCommand("Copy");
|
|
||||||
this.$message.success("复制成功");
|
|
||||||
oInput.remove();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.deliver-search-container {
|
|
||||||
.deliver-box {
|
|
||||||
.deliver-recode-box {
|
|
||||||
padding: 10px 20px;
|
|
||||||
background-color: #F2F2F2;
|
|
||||||
.recode-img {
|
|
||||||
position: relative;
|
|
||||||
width: 72px;
|
|
||||||
height: 72px;
|
|
||||||
.float-count {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
height: 20px;
|
|
||||||
width: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
color: white;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.recode-info-container {
|
|
||||||
flex: 1;
|
|
||||||
.recode-label {
|
|
||||||
width: 70px;
|
|
||||||
}
|
|
||||||
.copy-btn {
|
|
||||||
height: 20px;
|
|
||||||
min-width: 42px;
|
|
||||||
border: 1px solid $--color-primary;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-left: 8px;
|
|
||||||
border-radius: 60px;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.deliver-flow-box {
|
|
||||||
padding-left: 15px;
|
|
||||||
}
|
|
||||||
.time-line-title {
|
|
||||||
font-weight: 500px;
|
|
||||||
font-size: 16px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,257 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="evaluation-list">
|
|
||||||
<div class="list1" v-if="type == 1">
|
|
||||||
<div class="item flex" v-for="(item, index) in list" :key="index">
|
|
||||||
<div class="goods">
|
|
||||||
<!-- 店铺信息 -->
|
|
||||||
<div class="flex shop-info">
|
|
||||||
<div class="flex" style="margin-right: 100px;">
|
|
||||||
|
|
||||||
<div class="m-r-8" style="width: 16px; height: 16px;">
|
|
||||||
<el-image :src="item.shop.logo" style="height: 100%; width: 100%" fit="contain">
|
|
||||||
</el-image>
|
|
||||||
</div>
|
|
||||||
<div class="xs">
|
|
||||||
{{item.shop.name}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="xs muted" style="margin-right: 100px;">
|
|
||||||
下单时间：{{item.create_time}}
|
|
||||||
</div>
|
|
||||||
<div class="xs muted">
|
|
||||||
订单编号：{{item.order_sn}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="goods-all">
|
|
||||||
<div class="goods-item flex" v-for="(zitem, zindex) in item.order_goods_un_comment">
|
|
||||||
<nuxt-link :to="`/goods_details/${zitem.goods_id}`">
|
|
||||||
<el-image class="goods-img" :src="zitem.goods_item.image" alt="" />
|
|
||||||
</nuxt-link>
|
|
||||||
<div class="goods-info flex-col flex-1">
|
|
||||||
<div class="goods-name flex row-between" style="align-items: flex-start;">
|
|
||||||
<div class="line1" style="width: 600px">
|
|
||||||
{{ zitem.goods_name }}
|
|
||||||
</div>
|
|
||||||
<div class="operate flex row-end">
|
|
||||||
<nuxt-link :to="`/user/evaluation/evaluate?id=${zitem.id}`"
|
|
||||||
class="btn sm flex row-center white">去评价</nuxt-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="sm lighter m-b-8">{{zitem.goods_item.spec_value_str}}</div>
|
|
||||||
<!-- 价格 -->
|
|
||||||
<div class="primary">
|
|
||||||
<price-formate :price="zitem.goods_price" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="list2 flex-col" v-if="type == 2">
|
|
||||||
<div class="item flex" v-for="(item, index) in list" :key="index">
|
|
||||||
<div class="user">
|
|
||||||
<el-image :src="userInfo.avatar" style="height: 44px; width: 44px; border-radius: 50%;"></el-image>
|
|
||||||
</div>
|
|
||||||
<div class="">
|
|
||||||
<div class="user_name m-b-5" style="font-size: 14px; color: #101010;">
|
|
||||||
{{ userInfo.nickname }}
|
|
||||||
</div>
|
|
||||||
<div class="muted sm">评价时间：{{ item.create_time }}</div>
|
|
||||||
<!-- 用户评价 -->
|
|
||||||
<div class="m-t-10">
|
|
||||||
{{ item.comment }}
|
|
||||||
</div>
|
|
||||||
<!-- 用户展示商品图片 -->
|
|
||||||
<div class="comment-imglist flex">
|
|
||||||
<div class="item" v-for="(img, index) in item.goods_comment_image_arr" :key="index">
|
|
||||||
<el-image :preview-src-list="item.goods_comment_image_arr" :src="img"
|
|
||||||
style="height: 100%; width: 100%" fit="contain">
|
|
||||||
</el-image>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 商家回复 -->
|
|
||||||
<div class="flex reply mt16" v-if="item.reply">
|
|
||||||
<div class="primary">商家回复：</div>
|
|
||||||
<div class="lighter">
|
|
||||||
{{ item.reply }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 商品信息 -->
|
|
||||||
<nuxt-link :to="`/goods_details/${item.goods.id}`">
|
|
||||||
<div class="goods flex m-t-16">
|
|
||||||
<el-image class="goods-img" :src="item.goods.image" alt="" />
|
|
||||||
<div class="goods-info m-l-10">
|
|
||||||
<div class="flex m-b-8">
|
|
||||||
<div class="flex" style="width: 451px;">
|
|
||||||
<div class="xs line-1 m-r-5">{{item.goods.name}}</div>
|
|
||||||
<div class="xs">{{item.goods_item.spec_value_str}}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex">
|
|
||||||
<el-image :src="item.shop_logo" style="height: 16px; width: 16px" fit="contain">
|
|
||||||
</el-image>
|
|
||||||
<div class="m-l-5 xs">
|
|
||||||
{{item.shop_name}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="m-t-8 primary">
|
|
||||||
<price-formate :price="item.order_goods.total_pay_price" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nuxt-link>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
list: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
|
|
||||||
userInfo: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
lists: [{
|
|
||||||
image: "fdasf",
|
|
||||||
goods_name: "hsdfsafsa",
|
|
||||||
id: " ",
|
|
||||||
spec_value_str: " spec_value_str",
|
|
||||||
goods_price: '100',
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.evaluation-list {
|
|
||||||
padding: 0 10px;
|
|
||||||
|
|
||||||
.list1 {
|
|
||||||
.shop-info {
|
|
||||||
padding: 10px 16px;
|
|
||||||
background-color: #F6F6F6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
|
|
||||||
|
|
||||||
.item-hd {
|
|
||||||
height: 40px;
|
|
||||||
background: #f2f2f2;
|
|
||||||
padding: 0 20px;
|
|
||||||
|
|
||||||
.status {
|
|
||||||
width: 300px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
align-items: stretch;
|
|
||||||
|
|
||||||
.goods {
|
|
||||||
padding-bottom: 16px;
|
|
||||||
|
|
||||||
.goods-all {
|
|
||||||
border: 1px solid #e5e5e5;
|
|
||||||
padding-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-item {
|
|
||||||
padding: 0 16px 16px 16px;
|
|
||||||
|
|
||||||
.goods-img {
|
|
||||||
margin-right: 10px;
|
|
||||||
width: 72px;
|
|
||||||
height: 72px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.operate {
|
|
||||||
width: 200px;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
background-color: $--color-primary;
|
|
||||||
width: 104px;
|
|
||||||
height: 32px;
|
|
||||||
border: 1px solid $--border-base;
|
|
||||||
border-radius: 2px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list2 {
|
|
||||||
.user {
|
|
||||||
margin-right: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&>.item {
|
|
||||||
width: 920px;
|
|
||||||
padding: 15px 0px;
|
|
||||||
border-bottom: 1px dashed #e5e5e5;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
img {
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-imglist {
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.item {
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply {
|
|
||||||
background-color: #F6F6F6;
|
|
||||||
align-items: flex-start;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods {
|
|
||||||
width: 922px;
|
|
||||||
background-color: #F6F6F6;
|
|
||||||
padding: 14px;
|
|
||||||
|
|
||||||
.goods-img {
|
|
||||||
width: 72px;
|
|
||||||
height: 72px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,113 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="goods-list flex flex-wrap">
|
|
||||||
<nuxt-link :to="`/goods_details/${item.id||item.goods_id}`" class="goods-item bg-white"
|
|
||||||
:style="{ marginRight: (index + 1) % num == 0 ? 0 : '14px' }" v-for="(item, index) in list" :key="index">
|
|
||||||
<el-image class="goods-img" lazy :src="item.image||item.goods_image" alt=""></el-image>
|
|
||||||
<div class="name line-2">{{ item.name||item.goods_name }}</div>
|
|
||||||
<div class="seckill flex row-between" v-if="type == 'seckill'">
|
|
||||||
<div class="primary flex">
|
|
||||||
秒杀价
|
|
||||||
<price-formate :price="item.seckill_price" :first-size="18" />
|
|
||||||
</div>
|
|
||||||
<div :class="['btn bg-primary white', {'not-start' : status == 0, end: status == 2}]">{{getSeckillText}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex row-between flex-wrap" v-else>
|
|
||||||
|
|
||||||
<div class="price flex col-baseline">
|
|
||||||
<div class="primary m-r-8">
|
|
||||||
<price-formate :price="item.min_price || item.price" :first-size="16" />
|
|
||||||
</div>
|
|
||||||
<div class="muted sm line-through">
|
|
||||||
<price-formate :price="item.market_price" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="muted xs">{{ item.sales_total || item.sales_sum || 0}}人购买</div>
|
|
||||||
</div>
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
list: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
num: {
|
|
||||||
type: Number,
|
|
||||||
default: 5,
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
type: Number,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
list: {
|
|
||||||
immediate: true,
|
|
||||||
handler: function (val) {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
getSeckillText() {
|
|
||||||
switch (this.status) {
|
|
||||||
case 0:
|
|
||||||
return "未开始";
|
|
||||||
case 1:
|
|
||||||
return "立即抢购";
|
|
||||||
case 2:
|
|
||||||
return "已结束";
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.goods-list {
|
|
||||||
align-items: stretch;
|
|
||||||
.goods-item {
|
|
||||||
display: block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 224px;
|
|
||||||
height: 310px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
padding: 12px 12px 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
.goods-img {
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
.name {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
height: 40px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
.seckill {
|
|
||||||
.btn {
|
|
||||||
padding: 4px 12px;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
&.not-start {
|
|
||||||
border-color: $--color-primary;
|
|
||||||
color: $--color-primary;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
&.end {
|
|
||||||
background-color: #e5e5e5;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,197 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="seckill card" v-if="goodsList.length">
|
|
||||||
<div class="seckill-header flex">
|
|
||||||
<div class="title font-size-20">限时秒杀</div>
|
|
||||||
<div class="flex-1 flex">
|
|
||||||
<i
|
|
||||||
class="
|
|
||||||
el-icon-alarm-clock
|
|
||||||
primary
|
|
||||||
font-size-24
|
|
||||||
m-l-20 m-r-10
|
|
||||||
"
|
|
||||||
></i>
|
|
||||||
<count-down
|
|
||||||
:time="countTime"
|
|
||||||
:is-slot="true"
|
|
||||||
@change="onChangeDate"
|
|
||||||
@finish="refresh"
|
|
||||||
>
|
|
||||||
<div class="flex row-center count-down xs">
|
|
||||||
<div class="item white">{{ timeData.hours }}时</div>
|
|
||||||
<div class="white" style="margin: 0 4px">:</div>
|
|
||||||
<div class="item white">{{ timeData.minutes }}分</div>
|
|
||||||
<div class="white" style="margin: 0 4px">:</div>
|
|
||||||
<div class="item white">{{ timeData.seconds }}秒</div>
|
|
||||||
</div>
|
|
||||||
</count-down>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nuxt-link to="/seckill" class="more lighter"
|
|
||||||
>更多 <i class="el-icon-arrow-right"></i
|
|
||||||
></nuxt-link>
|
|
||||||
</div>
|
|
||||||
<div class="seckill-list m-t-16">
|
|
||||||
<el-carousel :interval="3000" arrow="never" height="320px" indicator-position="outside">
|
|
||||||
<el-carousel-item
|
|
||||||
v-for="(item, index) in swiperSize"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<div class="goods-list flex">
|
|
||||||
<nuxt-link
|
|
||||||
class="goods-item"
|
|
||||||
:to="`/goods_details/${gitem.goods_id}`"
|
|
||||||
v-for="(gitem, gindex) in getSwiperList(index)"
|
|
||||||
:key="gindex"
|
|
||||||
>
|
|
||||||
<div class="goods-img">
|
|
||||||
<el-image
|
|
||||||
:src="gitem.goods_image"
|
|
||||||
fit="cover"
|
|
||||||
alt=""
|
|
||||||
></el-image>
|
|
||||||
</div>
|
|
||||||
<div class="name line-2 m-t-10">
|
|
||||||
{{ gitem.goods_name }}
|
|
||||||
</div>
|
|
||||||
<div class="price flex col-baseline">
|
|
||||||
<div class="primary m-r-8">
|
|
||||||
<price-formate
|
|
||||||
:price="gitem.seckill_price"
|
|
||||||
:first-size="16"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="muted sm line-through">
|
|
||||||
<price-formate
|
|
||||||
:price="gitem.seckill_total"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="muted xs m-t-10">
|
|
||||||
{{ gitem.seckill_total }}人购买
|
|
||||||
</div>
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
</el-carousel-item>
|
|
||||||
</el-carousel>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
list: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
active: -1,
|
|
||||||
goodsList: [],
|
|
||||||
countTime: 0,
|
|
||||||
timeData: {},
|
|
||||||
pageSize: 5,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
refresh() {
|
|
||||||
this.$emit('refreshhome')
|
|
||||||
},
|
|
||||||
onChangeDate(e) {
|
|
||||||
let timeData = {}
|
|
||||||
for (let prop in e) {
|
|
||||||
if (prop !== 'milliseconds')
|
|
||||||
timeData[prop] = ('0' + e[prop]).slice(-2)
|
|
||||||
}
|
|
||||||
this.timeData = timeData
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
list: {
|
|
||||||
handler(val) {
|
|
||||||
// 抢购中
|
|
||||||
let index = val.findIndex((item) => item.status == 1)
|
|
||||||
if (index == -1) {
|
|
||||||
// 未开始
|
|
||||||
index = val.findIndex((item) => item.status == 0)
|
|
||||||
}
|
|
||||||
if (index == -1) {
|
|
||||||
// 全部结束选中最后一个
|
|
||||||
index = val.length - 1
|
|
||||||
}
|
|
||||||
this.active = index
|
|
||||||
this.goodsList = val[index].goods
|
|
||||||
this.countTime = val[index].end_time_int - Date.now() / 1000
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
swiperSize() {
|
|
||||||
console.log(Math.ceil(this.goodsList.length / this.pageSize))
|
|
||||||
return Math.ceil(this.goodsList.length / this.pageSize)
|
|
||||||
},
|
|
||||||
getSwiperList() {
|
|
||||||
return (index) => {
|
|
||||||
return this.goodsList.slice(
|
|
||||||
index * this.pageSize,
|
|
||||||
(index + 1) * this.pageSize
|
|
||||||
)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.seckill {
|
|
||||||
.seckill-header {
|
|
||||||
.count-down {
|
|
||||||
.item {
|
|
||||||
width: 38px;
|
|
||||||
height: 20px;
|
|
||||||
background: $--color-primary;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 20px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
::v-deep .el-carousel__indicator {
|
|
||||||
& .el-carousel__button {
|
|
||||||
background-color: #E5E5E5;
|
|
||||||
}
|
|
||||||
&.is-active .el-carousel__button{
|
|
||||||
background-color: $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.goods-list {
|
|
||||||
.goods-item {
|
|
||||||
width: 216px;
|
|
||||||
& ~ .goods-item {
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
.goods-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 0;
|
|
||||||
padding-top: 100%;
|
|
||||||
position: relative;
|
|
||||||
::v-deep .el-image {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.name {
|
|
||||||
line-height: 20px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,120 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="input-express">
|
|
||||||
<el-dialog title="填写快递单号" :visible.sync="showDialog" width="926px">
|
|
||||||
<el-form inline ref="inputForm" label-width="100px" :model="form" :rules="rules">
|
|
||||||
<el-form-item label="物流公司：" prop="business">
|
|
||||||
<el-input size="small" v-model="form.business" placeholder="请输入物流公司名称" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="快递单号：" prop="number">
|
|
||||||
<el-input size="small" v-model="form.number" placeholder="请输入快递单号" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="备注说明：" prop="desc">
|
|
||||||
<el-input style="width: 632px" type="textarea" v-model="form.desc" placeholder="请输入详细内容，选填"
|
|
||||||
resize="none" rows="5" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="上传凭证：" prop="upload">
|
|
||||||
<div class="xs muted">请上传快递单号凭证，选填</div>
|
|
||||||
<upload isSlot :file-list="fileList" @success="uploadSuccess" :limit="3">
|
|
||||||
<div class="column-center" style="height: 100%">
|
|
||||||
<i class="el-icon-camera xs" style="font-size: 24px" />
|
|
||||||
</div>
|
|
||||||
</upload>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div slot="footer" class="dialog-footer">
|
|
||||||
<el-button type="primary" @click="submitForm">确定</el-button>
|
|
||||||
<el-button @click="showDialog = false">取消</el-button>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showDialog: false,
|
|
||||||
form: {
|
|
||||||
// 物流公司
|
|
||||||
business: "",
|
|
||||||
// 快递单号
|
|
||||||
number: "",
|
|
||||||
// 详细内容
|
|
||||||
desc: "",
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
business: [{ required: true, message: "请输入物流公司" }],
|
|
||||||
number: [{ required: true, message: "请输入快递单号" }],
|
|
||||||
},
|
|
||||||
fileList: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
aid: {
|
|
||||||
type: [String, Number],
|
|
||||||
default: -1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
submitForm() {
|
|
||||||
console.log(this.$refs);
|
|
||||||
this.$refs["inputForm"].validate(async (valid) => {
|
|
||||||
if (valid) {
|
|
||||||
let fileList = [];
|
|
||||||
this.fileList.forEach((item) => {
|
|
||||||
fileList.push(item.response.data);
|
|
||||||
});
|
|
||||||
let data = {
|
|
||||||
id: this.aid,
|
|
||||||
express_name: this.form.business,
|
|
||||||
invoice_no: this.form.number,
|
|
||||||
express_remark: this.form.desc,
|
|
||||||
express_image:
|
|
||||||
fileList.length <= 0 ? "" : fileList[0].base_url,
|
|
||||||
};
|
|
||||||
let res = await this.$post("after_sale/express", data);
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: "提交成功",
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
this.showDialog = false;
|
|
||||||
this.$emit("success");
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
uploadSuccess(e) {
|
|
||||||
let fileList = Object.assign([], e);
|
|
||||||
this.fileList = fileList;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value(val) {
|
|
||||||
this.showDialog = val;
|
|
||||||
},
|
|
||||||
showDialog(val) {
|
|
||||||
this.$emit("input", val);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.input-express {
|
|
||||||
.dialog-footer {
|
|
||||||
text-align: center;
|
|
||||||
.el-button {
|
|
||||||
width: 160px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
<template>
|
|
||||||
<aside class="aside-nav bg-white">
|
|
||||||
<div class="nav">
|
|
||||||
<div class="title lg">订单中心</div>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<nuxt-link to="/user/order">我的订单</nuxt-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<nuxt-link to="/user/evaluation">评价中心</nuxt-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<nuxt-link to="/user/after_sales">退款/售后</nuxt-link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="nav">
|
|
||||||
<div class="title lg">我的资产</div>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<nuxt-link to="/user/coupons"
|
|
||||||
>优惠券 ({{ publicData.coupon_num }})</nuxt-link
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<nuxt-link to="/user/user_wallet">我的钱包</nuxt-link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div class="nav">
|
|
||||||
<div class="title lg">我的服务</div>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<nuxt-link to="/user/collection">我的收藏</nuxt-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<nuxt-link to="/user/address">地址管理</nuxt-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<nuxt-link to="/user/profile">个人资料</nuxt-link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapState } from 'vuex'
|
|
||||||
export default {
|
|
||||||
created() {},
|
|
||||||
computed: {
|
|
||||||
...mapState(['publicData']),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.aside-nav {
|
|
||||||
width: 160px;
|
|
||||||
min-height: 680px;
|
|
||||||
padding: 20px 0;
|
|
||||||
margin-right: 16px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.nav {
|
|
||||||
.title {
|
|
||||||
padding: 14px 32px;
|
|
||||||
font-weight:bold;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
li {
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
padding: 10px 32px;
|
|
||||||
font-weight:bold;
|
|
||||||
&.nuxt-link-active {
|
|
||||||
position: relative;
|
|
||||||
color: $--color-primary;
|
|
||||||
background-color: #ffeeef;
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
width: 2px;
|
|
||||||
height: 30px;
|
|
||||||
left: 0;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background-color: $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,178 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="category" @mouseenter="showCate = true" @mouseleave="leaveCate">
|
|
||||||
<el-button @click="$router.push('/category')" type="primary" class="title">
|
|
||||||
<div class="flex lg">
|
|
||||||
<i class="el-icon-s-fold"></i>
|
|
||||||
<div class="m-l-8">全部商品分类</div>
|
|
||||||
</div>
|
|
||||||
</el-button>
|
|
||||||
<div class="category-con bg-white" v-show="category.length && showCate">
|
|
||||||
<ul class="category-one">
|
|
||||||
<li
|
|
||||||
v-for="(item, index) in category"
|
|
||||||
:key="index"
|
|
||||||
:class="{ active: index === selectIndex }"
|
|
||||||
@mouseenter="enterCate(index)"
|
|
||||||
>
|
|
||||||
<nuxt-link
|
|
||||||
class="flex row-between"
|
|
||||||
:to="`/category?id=${item.id}`"
|
|
||||||
>
|
|
||||||
<span class="line-1">{{ item.name }}</span>
|
|
||||||
<i
|
|
||||||
v-if="item.sons.length"
|
|
||||||
class="el-icon-arrow-right"
|
|
||||||
></i
|
|
||||||
></nuxt-link>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="category-float bg-white"
|
|
||||||
v-show="showCateFloat && cateTwo.length"
|
|
||||||
>
|
|
||||||
<div class="float-con">
|
|
||||||
<div
|
|
||||||
class="m-t-16"
|
|
||||||
v-for="(item, index) in cateTwo"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<div class="category-two weight-500 m-b-15">
|
|
||||||
<nuxt-link :to="`/category?id=${item.id}`">{{
|
|
||||||
item.name
|
|
||||||
}}</nuxt-link>
|
|
||||||
</div>
|
|
||||||
<div class="category-three flex flex-wrap">
|
|
||||||
<div
|
|
||||||
class="item"
|
|
||||||
v-for="(titem, idx) in item.sons"
|
|
||||||
:key="idx"
|
|
||||||
>
|
|
||||||
<nuxt-link
|
|
||||||
:to="`/category?id=${titem.id}`"
|
|
||||||
class="flex"
|
|
||||||
>
|
|
||||||
<el-image
|
|
||||||
style="width: 48px; height: 48px;display:none"
|
|
||||||
:src="titem.image"
|
|
||||||
fit="contain"
|
|
||||||
></el-image>
|
|
||||||
<span class="m-l-8">{{
|
|
||||||
titem.name
|
|
||||||
}}</span>
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapState } from 'vuex'
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
cateTwo: [],
|
|
||||||
showCateFloat: false,
|
|
||||||
showCate: false,
|
|
||||||
selectIndex: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
console.log(this.category)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
enterCate(index) {
|
|
||||||
this.cateTwo = this.category[index].sons
|
|
||||||
this.showCateFloat = true
|
|
||||||
this.selectIndex = index
|
|
||||||
},
|
|
||||||
leaveCate() {
|
|
||||||
this.$route.path != '/' && (this.showCate = false)
|
|
||||||
this.selectIndex = ''
|
|
||||||
this.showCateFloat = false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
$route: {
|
|
||||||
immediate: true,
|
|
||||||
handler: function (val) {
|
|
||||||
this.showCate = val.path == '/' ? true : false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapState(['category']),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.category {
|
|
||||||
position: relative;
|
|
||||||
.title {
|
|
||||||
padding: 12px 20px;
|
|
||||||
flex: none;
|
|
||||||
width: 160px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
.category-con {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 999;
|
|
||||||
height: 440px;
|
|
||||||
padding: 10px 0;
|
|
||||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
.category-one {
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
display: none; /*隐藏滚动条*/
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
& > a {
|
|
||||||
height: 42px;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
&.active {
|
|
||||||
background-color: #ffeeef;
|
|
||||||
a {
|
|
||||||
color: #ff2c3c;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.category-float {
|
|
||||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
position: absolute;
|
|
||||||
left: 160px;
|
|
||||||
top: 0;
|
|
||||||
width: 880px;
|
|
||||||
height: 440px;
|
|
||||||
padding: 0 24px;
|
|
||||||
overflow-y: auto;
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
display: none; /*隐藏滚动条*/
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #ff2c3c;
|
|
||||||
}
|
|
||||||
.float-con {
|
|
||||||
.category-three {
|
|
||||||
border-bottom: 1px dashed $--border-color-base;
|
|
||||||
.item {
|
|
||||||
width: 20%;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,144 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="float-nav bg-white flex-col col-center">
|
|
||||||
<div class="nav-list">
|
|
||||||
<nuxt-link to="/shop_cart" class="item flex-col col-center lighter">
|
|
||||||
<el-badge :value="publicData.cart_num" type="primary">
|
|
||||||
<span class="iconfont icon-cart-Empty"></span>
|
|
||||||
</el-badge>
|
|
||||||
<div class="sm">购物车</div>
|
|
||||||
</nuxt-link>
|
|
||||||
<nuxt-link
|
|
||||||
class="item flex-col col-center lighter"
|
|
||||||
to="/user/coupons"
|
|
||||||
>
|
|
||||||
<el-badge :value="publicData.coupon_num" type="primary">
|
|
||||||
<span class="iconfont icon-coupons"></span>
|
|
||||||
</el-badge>
|
|
||||||
<div class="sm">优惠券</div>
|
|
||||||
</nuxt-link>
|
|
||||||
<nuxt-link
|
|
||||||
class="item flex-col col-center lighter"
|
|
||||||
to="/user/order"
|
|
||||||
>
|
|
||||||
<span class="iconfont icon-icon_order"></span>
|
|
||||||
<div class="sm">订单</div>
|
|
||||||
</nuxt-link>
|
|
||||||
<nuxt-link
|
|
||||||
class="item flex-col col-center lighter"
|
|
||||||
to="/user/collection"
|
|
||||||
>
|
|
||||||
<span class="iconfont icon-collection"></span>
|
|
||||||
<div class="sm">收藏</div>
|
|
||||||
</nuxt-link>
|
|
||||||
<nuxt-link
|
|
||||||
class="item flex-col col-center lighter"
|
|
||||||
to="/help_center"
|
|
||||||
>
|
|
||||||
<span class="iconfont icon-survey"></span>
|
|
||||||
<div class="sm">帮助</div>
|
|
||||||
</nuxt-link>
|
|
||||||
<el-popover placement="left" width="165" trigger="hover">
|
|
||||||
<div
|
|
||||||
style="text-align: center; margin: 0"
|
|
||||||
class="flex-col col-center"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
style="width: 100px; height: 100px"
|
|
||||||
:src="server.image"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<div class="sm m-t-8">{{ server.phone }}</div>
|
|
||||||
<div class="sm m-t-10">
|
|
||||||
在线时间：{{ server.business_time }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item flex-col col-center lighter" slot="reference">
|
|
||||||
<span class="iconfont icon-service"></span>
|
|
||||||
<div class="sm">客服</div>
|
|
||||||
</div>
|
|
||||||
</el-popover>
|
|
||||||
</div>
|
|
||||||
<div class="back-top">
|
|
||||||
<span class="iconfont icon-top" @click="scrollTop"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapState } from 'vuex'
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
server: {},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.getService()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async getService() {
|
|
||||||
const { data, code } = await this.$get(
|
|
||||||
'setting/getPlatformCustomerService'
|
|
||||||
)
|
|
||||||
if (code == 1) {
|
|
||||||
this.server = data
|
|
||||||
}
|
|
||||||
},
|
|
||||||
scrollTop() {
|
|
||||||
cancelAnimationFrame(this.timer)
|
|
||||||
const self = this
|
|
||||||
this.timer = requestAnimationFrame(function fn() {
|
|
||||||
var oTop =
|
|
||||||
document.body.scrollTop ||
|
|
||||||
document.documentElement.scrollTop
|
|
||||||
if (oTop > 0) {
|
|
||||||
scrollTo(0, oTop - 250)
|
|
||||||
self.timer = requestAnimationFrame(fn)
|
|
||||||
} else {
|
|
||||||
cancelAnimationFrame(self.timer)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapState(['publicData']),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.float-nav {
|
|
||||||
height: 100vh;
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 60px;
|
|
||||||
z-index: 999;
|
|
||||||
box-shadow: -3px 1px 2px rgba(0, 0, 0, 0.04);
|
|
||||||
.nav-list {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 120px;
|
|
||||||
.item {
|
|
||||||
padding: 10px 4px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
color: $--color-primary;
|
|
||||||
}
|
|
||||||
.iconfont {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
::v-deep .el-badge__content {
|
|
||||||
height: 16px;
|
|
||||||
line-height: 16px;
|
|
||||||
padding: 0 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.back-top {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="footer-container">
|
|
||||||
<div class="footer-box flex row-center">
|
|
||||||
<div class="server-box flex row-between">
|
|
||||||
<div class="flex" v-for="(item, index) in lists" :key="index">
|
|
||||||
<i
|
|
||||||
:class="`white iconfont ${item.icon}`"
|
|
||||||
style="font-size: 50px"
|
|
||||||
/>
|
|
||||||
<div class="m-l-8 xxl name">{{ item.name }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<footer class="footer-wrap flex row-center">
|
|
||||||
<a class="white" target="_blank" :href="config.icp_link"
|
|
||||||
>{{ config.copyright_info }} {{ config.icp_number }}</a
|
|
||||||
>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapState } from 'vuex'
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
lists: [
|
|
||||||
{
|
|
||||||
name: '自营商城',
|
|
||||||
icon: 'icon-ziying',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '正品保障',
|
|
||||||
icon: 'icon-zhengpin',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '专属服务',
|
|
||||||
icon: 'icon-fuwu',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '售后无忧',
|
|
||||||
icon: 'icon-peisong',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '极速配送',
|
|
||||||
icon: 'icon-shouhou',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapState(['config']),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.footer-container {
|
|
||||||
margin-top: 38px;
|
|
||||||
.footer-box {
|
|
||||||
height: 120px;
|
|
||||||
background-color: #222;
|
|
||||||
min-width: 1180px;
|
|
||||||
.server-box {
|
|
||||||
width: 1180px;
|
|
||||||
padding: 36px 40px;
|
|
||||||
border-bottom: 1px solid #707070;
|
|
||||||
.name {
|
|
||||||
color: #e5e5e5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.footer-wrap {
|
|
||||||
min-width: 1180px;
|
|
||||||
background-color: #222;
|
|
||||||
height: 60px;
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,368 +0,0 @@
|
||||||
<template>
|
|
||||||
<header>
|
|
||||||
<div class="header-wrap">
|
|
||||||
<div class="header-con xs">
|
|
||||||
<div class="wrapper1180 flex row-between">
|
|
||||||
<div class="flex" style="height: 100%">
|
|
||||||
<template
|
|
||||||
v-if="
|
|
||||||
publicData.article && publicData.article.length
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
style="
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
margin-right: 10px;
|
|
||||||
"
|
|
||||||
src="~/static/images/header_notice.png"
|
|
||||||
/>
|
|
||||||
<client-only>
|
|
||||||
<swiper
|
|
||||||
ref="headerSwiper"
|
|
||||||
:options="swiperOptions"
|
|
||||||
>
|
|
||||||
<swiper-slide
|
|
||||||
class="swiper-item"
|
|
||||||
v-for="(
|
|
||||||
item, index
|
|
||||||
) in publicData.article"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<nuxt-link
|
|
||||||
class="flex-col row-center"
|
|
||||||
style="height: 100%"
|
|
||||||
:to="
|
|
||||||
'/news_list/news_list_detail?id=' +
|
|
||||||
item.id
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="line1">
|
|
||||||
{{ item.title }}
|
|
||||||
</div>
|
|
||||||
</nuxt-link>
|
|
||||||
</swiper-slide>
|
|
||||||
</swiper>
|
|
||||||
</client-only>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div class="user flex flex-none">
|
|
||||||
<div v-if="publicData.name">
|
|
||||||
您好，欢迎来到 {{ publicData.name }}！
|
|
||||||
</div>
|
|
||||||
<ul class="flex flex-none">
|
|
||||||
<li v-if="publicData.nickname">
|
|
||||||
<el-popover placement="bottom" trigger="hover">
|
|
||||||
<div class="user-nav">
|
|
||||||
<nuxt-link
|
|
||||||
class="lighter xs item"
|
|
||||||
to="/user/user_wallet"
|
|
||||||
>我的钱包</nuxt-link
|
|
||||||
>
|
|
||||||
<nuxt-link
|
|
||||||
class="lighter xs item"
|
|
||||||
to="/user/coupons"
|
|
||||||
>优惠券({{
|
|
||||||
publicData.coupon_num
|
|
||||||
}})</nuxt-link
|
|
||||||
>
|
|
||||||
<nuxt-link
|
|
||||||
class="lighter xs item"
|
|
||||||
to="/user/collection"
|
|
||||||
>我的收藏</nuxt-link
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="lighter xs item"
|
|
||||||
@click="onLogout"
|
|
||||||
>
|
|
||||||
退出登录
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<nuxt-link
|
|
||||||
slot="reference"
|
|
||||||
to="/user/profile"
|
|
||||||
>
|
|
||||||
{{ publicData.nickname }}
|
|
||||||
<i class="el-icon-arrow-down"></i>
|
|
||||||
</nuxt-link>
|
|
||||||
</el-popover>
|
|
||||||
</li>
|
|
||||||
<li v-else>
|
|
||||||
<nuxt-link to="/account/login">登录</nuxt-link>
|
|
||||||
｜
|
|
||||||
<nuxt-link to="/account/register"
|
|
||||||
>注册</nuxt-link
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<nuxt-link to="/user/order">我的订单</nuxt-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<nuxt-link to="/user/profile"
|
|
||||||
>个人中心</nuxt-link
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<nuxt-link to="/help_center"
|
|
||||||
>帮助中心</nuxt-link
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<nuxt-link to="/store_settled"
|
|
||||||
>商家入驻</nuxt-link
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<nuxt-link to="/about_us"
|
|
||||||
>关于我们</nuxt-link
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<!-- <li
|
|
||||||
id="tel-phone-block"
|
|
||||||
v-if="
|
|
||||||
publicData.mnp_qr_code ||
|
|
||||||
publicData.oa_qr_code
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<nuxt-link to="/"
|
|
||||||
>手机端
|
|
||||||
<i class="el-icon-arrow-down"></i>
|
|
||||||
</nuxt-link>
|
|
||||||
<div class="float-code flex bg-white">
|
|
||||||
<div
|
|
||||||
class="flex-col col-center bg-white"
|
|
||||||
v-if="publicData.mnp_qr_code"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
style="width: 100px; height: 100px"
|
|
||||||
:src="publicData.mnp_qr_code"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<div class="lighter m-t-10">
|
|
||||||
官方小程序
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li> -->
|
|
||||||
<li>
|
|
||||||
<nuxt-link to="/">返回官网</nuxt-link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="header-main bg-white">
|
|
||||||
<div class="wrapper1180">
|
|
||||||
<div class="search-wrap flex row-between">
|
|
||||||
<nuxt-link to="/" class="flex row-center">
|
|
||||||
<img
|
|
||||||
:src="config.shop_login_logo"
|
|
||||||
class="logo"
|
|
||||||
alt="logo"
|
|
||||||
/>
|
|
||||||
</nuxt-link>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="search flex">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
v-model="name"
|
|
||||||
placeholder="请输入要搜索的商品名称"
|
|
||||||
@keyup.enter="toSearch"
|
|
||||||
/>
|
|
||||||
<el-button
|
|
||||||
class="search-btn"
|
|
||||||
type="primary"
|
|
||||||
@click="toSearch"
|
|
||||||
>
|
|
||||||
搜索
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
<el-button type="primary" plain class="cart">
|
|
||||||
<nuxt-link to="/shop_cart"
|
|
||||||
>购物车({{
|
|
||||||
publicData.cart_num
|
|
||||||
}})</nuxt-link
|
|
||||||
>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { directive } from 'vue-awesome-swiper'
|
|
||||||
import { mapState, mapMutations, mapActions } from 'vuex'
|
|
||||||
export default {
|
|
||||||
directives: {
|
|
||||||
swiper: directive,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
name: '',
|
|
||||||
swiperOptions: {
|
|
||||||
direction: 'vertical',
|
|
||||||
// autoHeight: true,
|
|
||||||
height: 40,
|
|
||||||
initialSlide: 0,
|
|
||||||
autoplay: true,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
...mapMutations(['logout']),
|
|
||||||
...mapActions(['getPublicData']),
|
|
||||||
toSearch() {
|
|
||||||
if (!this.name) return this.$message.error('请输入商品名称')
|
|
||||||
this.$router.push({
|
|
||||||
path: '/search_goodsList',
|
|
||||||
query: {
|
|
||||||
name: this.name,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
},
|
|
||||||
onLogout() {
|
|
||||||
this.logout()
|
|
||||||
this.$message({
|
|
||||||
message: '退出成功',
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
setTimeout(() => location.reload(), 1500)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
$route: {
|
|
||||||
immediate: true,
|
|
||||||
handler: function (val) {
|
|
||||||
console.log(val)
|
|
||||||
if (val.path == '/goods_list') {
|
|
||||||
this.name = val.query.name
|
|
||||||
} else {
|
|
||||||
this.name = ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapState(['publicData', 'config']),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.header-wrap {
|
|
||||||
min-width: 1180px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1000;
|
|
||||||
::v-deep .swiper-container {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 400px;
|
|
||||||
}
|
|
||||||
.swiper-item {
|
|
||||||
color: #ccc;
|
|
||||||
height: 17px;
|
|
||||||
}
|
|
||||||
.header-con {
|
|
||||||
background-color: #101010;
|
|
||||||
height: 40px;
|
|
||||||
color: #f2f2f2;
|
|
||||||
> div {
|
|
||||||
height: 100%;
|
|
||||||
color: #cccccc;
|
|
||||||
a {
|
|
||||||
color: #cccccc;
|
|
||||||
&:hover {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
li {
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#tel-phone-block {
|
|
||||||
position: relative;
|
|
||||||
&:hover .float-code {
|
|
||||||
display: flex;
|
|
||||||
box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
|
|
||||||
}
|
|
||||||
.float-code {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
padding: 22px 16px;
|
|
||||||
background-color: white;
|
|
||||||
top: 24px;
|
|
||||||
right: -20px;
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
width: 8px;
|
|
||||||
box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
|
|
||||||
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
|
|
||||||
right: 35px;
|
|
||||||
top: -4px;
|
|
||||||
height: 8px;
|
|
||||||
background-color: #fff;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.header-main {
|
|
||||||
.search-wrap {
|
|
||||||
height: 80px;
|
|
||||||
.logo {
|
|
||||||
height: 48px;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
.search {
|
|
||||||
width: 460px;
|
|
||||||
height: 42px;
|
|
||||||
overflow: hidden;
|
|
||||||
input {
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 4px 0 0 4px;
|
|
||||||
border: 1px solid $--color-primary;
|
|
||||||
border-right-width: 0;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
.search-btn {
|
|
||||||
width: 82px;
|
|
||||||
height: 42px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 0 4px 4px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.cart {
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 4px;
|
|
||||||
width: 108px;
|
|
||||||
height: 42px;
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.user-nav {
|
|
||||||
.item {
|
|
||||||
text-align: center;
|
|
||||||
line-height: 34px;
|
|
||||||
display: block;
|
|
||||||
cursor: pointer;
|
|
||||||
&:not(:last-child) {
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
color: $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,82 +0,0 @@
|
||||||
<template>
|
|
||||||
<nav>
|
|
||||||
<div class="header-nav bg-white">
|
|
||||||
<div class="nav-wrap flex">
|
|
||||||
<category />
|
|
||||||
<ul class="nav flex">
|
|
||||||
<li class="item">
|
|
||||||
<nuxt-link to="/">首页</nuxt-link>
|
|
||||||
</li>
|
|
||||||
<!-- <li class="item">
|
|
||||||
<nuxt-link to="/demand_list">我的需求</nuxt-link>
|
|
||||||
</li>
|
|
||||||
<li class="item">
|
|
||||||
<nuxt-link to="/seckill">限时秒杀</nuxt-link>
|
|
||||||
</li> -->
|
|
||||||
<li class="item">
|
|
||||||
<nuxt-link to="/goods_list/1">热销榜单</nuxt-link>
|
|
||||||
</li>
|
|
||||||
<!-- <li class="item">
|
|
||||||
<nuxt-link to="/goods_list/2">新品推荐</nuxt-link>
|
|
||||||
</li>
|
|
||||||
<li class="item">
|
|
||||||
<nuxt-link to="/shop_street">店铺街</nuxt-link>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="item">
|
|
||||||
<nuxt-link to="/get_coupons">领券中心</nuxt-link>
|
|
||||||
</li>
|
|
||||||
<li class="item">
|
|
||||||
<nuxt-link to="/news_list">商城资讯</nuxt-link>
|
|
||||||
</li>
|
|
||||||
<li class="item">
|
|
||||||
<nuxt-link to="/help_center">帮助中心</nuxt-link>
|
|
||||||
</li> -->
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapState } from 'vuex'
|
|
||||||
import Category from './category'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
Category,
|
|
||||||
},
|
|
||||||
created() {},
|
|
||||||
computed: {
|
|
||||||
...mapState(['publicData']),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.header-nav {
|
|
||||||
border-top: 1px solid $--background-color-base;
|
|
||||||
.nav-wrap {
|
|
||||||
width: 1180px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.nav {
|
|
||||||
overflow-x: auto;
|
|
||||||
overflow-y: hidden;
|
|
||||||
.item {
|
|
||||||
a {
|
|
||||||
padding: 12px 15px;
|
|
||||||
margin: 0 10px;
|
|
||||||
color: #101010;
|
|
||||||
font-size: 16px;
|
|
||||||
white-space: nowrap;
|
|
||||||
&:hover {
|
|
||||||
color: $--color-primary;
|
|
||||||
}
|
|
||||||
&.nuxt-link-exact-active {
|
|
||||||
color: $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="bg-white flex-col col-center null-data">
|
|
||||||
<img :style="imgStyle" class="img-null" :src="img" alt="" />
|
|
||||||
<div class="muted mt8">{{ text }}</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
img: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
type: String,
|
|
||||||
default: '暂无数据',
|
|
||||||
},
|
|
||||||
imgStyle: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.null-data {
|
|
||||||
padding: 100px;
|
|
||||||
.img-null {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,309 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="number-box">
|
|
||||||
<div
|
|
||||||
@click.stop.prevent="btnTouchStart('minus')"
|
|
||||||
:class="{ minus: true, disabled: disabled || inputVal <= min }"
|
|
||||||
:style="{
|
|
||||||
background: bgColor,
|
|
||||||
height: inputHeight + 'px',
|
|
||||||
color: color,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<div :style="{ fontSize: size + 'px' }">-</div>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
:disabled="disabledInput || disabled"
|
|
||||||
:class="{ 'number-input': true, 'input-disabled': disabled }"
|
|
||||||
v-model="inputVal"
|
|
||||||
@blur="onBlur"
|
|
||||||
@focus="onFocus"
|
|
||||||
type="text"
|
|
||||||
:style="{
|
|
||||||
color: color,
|
|
||||||
fontSize: size + 'px',
|
|
||||||
background: bgColor,
|
|
||||||
height: inputHeight + 'px',
|
|
||||||
width: inputWidth + 'px',
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="plus"
|
|
||||||
@click.stop.prevent="btnTouchStart('plus')"
|
|
||||||
:class="{ disabled: disabled || inputVal >= max }"
|
|
||||||
:style="{
|
|
||||||
background: bgColor,
|
|
||||||
height: inputHeight + 'px',
|
|
||||||
color: color,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<div :style="{ fontSize: size + 'px' }">+</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
// 预显示的数字
|
|
||||||
value: {
|
|
||||||
type: Number,
|
|
||||||
default: 1,
|
|
||||||
},
|
|
||||||
// 背景颜色
|
|
||||||
bgColor: {
|
|
||||||
type: String,
|
|
||||||
default: ' #F2F3F5',
|
|
||||||
},
|
|
||||||
// 最小值
|
|
||||||
min: {
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
// 最大值
|
|
||||||
max: {
|
|
||||||
type: Number,
|
|
||||||
default: 99999,
|
|
||||||
},
|
|
||||||
// 步进值，每次加或减的值
|
|
||||||
step: {
|
|
||||||
type: Number,
|
|
||||||
default: 1,
|
|
||||||
},
|
|
||||||
// 是否禁用加减操作
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
// input的字体大小，单位px
|
|
||||||
size: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: 14,
|
|
||||||
},
|
|
||||||
// input宽度，单位px
|
|
||||||
inputWidth: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: 64,
|
|
||||||
},
|
|
||||||
//字体颜色
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: '#333',
|
|
||||||
},
|
|
||||||
// input高度，单位px
|
|
||||||
inputHeight: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: 32,
|
|
||||||
},
|
|
||||||
// index索引，用于列表中使用，让用户知道是哪个numberbox发生了变化，一般使用for循环出来的index值即可
|
|
||||||
index: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
// 是否禁用输入框，与disabled作用于输入框时，为OR的关系，即想要禁用输入框，又可以加减的话
|
|
||||||
// 设置disabled为false，disabledInput为true即可
|
|
||||||
disabledInput: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
|
|
||||||
// 是否只能输入大于或等于0的整数(正整数)
|
|
||||||
positiveInteger: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
asyncChange: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value(v1, v2) {
|
|
||||||
if (!this.changeFromInner) {
|
|
||||||
this.inputVal = v1
|
|
||||||
this.$nextTick(function () {
|
|
||||||
this.changeFromInner = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
inputVal(v1, v2) {
|
|
||||||
if (v1 == '') return
|
|
||||||
let value = 0
|
|
||||||
let tmp = /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(v1)
|
|
||||||
if (tmp && v1 >= this.min && v1 <= this.max) value = v1
|
|
||||||
else value = v2
|
|
||||||
if (this.positiveInteger) {
|
|
||||||
if (v1 < 0 || String(v1).indexOf('.') !== -1) {
|
|
||||||
value = v2
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.inputVal = v2
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (this.asyncChange) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 发出change事件
|
|
||||||
this.handleChange(value, 'change')
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
inputVal: 1, // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态
|
|
||||||
timer: null, // 用作长按的定时器
|
|
||||||
changeFromInner: false, // 值发生变化，是来自内部还是外部
|
|
||||||
innerChangeTimer: null, // 内部定时器
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.inputVal = Number(this.value)
|
|
||||||
},
|
|
||||||
computed: {},
|
|
||||||
methods: {
|
|
||||||
btnTouchStart(callback) {
|
|
||||||
this[callback]()
|
|
||||||
},
|
|
||||||
minus() {
|
|
||||||
this.computeVal('minus')
|
|
||||||
},
|
|
||||||
plus() {
|
|
||||||
this.computeVal('plus')
|
|
||||||
},
|
|
||||||
calcPlus(num1, num2) {
|
|
||||||
let baseNum, baseNum1, baseNum2
|
|
||||||
try {
|
|
||||||
baseNum1 = num1.toString().split('.')[1].length
|
|
||||||
} catch (e) {
|
|
||||||
baseNum1 = 0
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
baseNum2 = num2.toString().split('.')[1].length
|
|
||||||
} catch (e) {
|
|
||||||
baseNum2 = 0
|
|
||||||
}
|
|
||||||
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2))
|
|
||||||
let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2
|
|
||||||
return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(
|
|
||||||
precision
|
|
||||||
)
|
|
||||||
},
|
|
||||||
calcMinus(num1, num2) {
|
|
||||||
let baseNum, baseNum1, baseNum2
|
|
||||||
try {
|
|
||||||
baseNum1 = num1.toString().split('.')[1].length
|
|
||||||
} catch (e) {
|
|
||||||
baseNum1 = 0
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
baseNum2 = num2.toString().split('.')[1].length
|
|
||||||
} catch (e) {
|
|
||||||
baseNum2 = 0
|
|
||||||
}
|
|
||||||
baseNum = Math.pow(10, Math.max(baseNum1, baseNum2))
|
|
||||||
let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2
|
|
||||||
return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(
|
|
||||||
precision
|
|
||||||
)
|
|
||||||
},
|
|
||||||
computeVal(type) {
|
|
||||||
if (this.disabled) return
|
|
||||||
let value = 0
|
|
||||||
// 减
|
|
||||||
if (type === 'minus') {
|
|
||||||
value = this.calcMinus(this.inputVal, this.step)
|
|
||||||
} else if (type === 'plus') {
|
|
||||||
value = this.calcPlus(this.inputVal, this.step)
|
|
||||||
}
|
|
||||||
// 判断是否小于最小值和大于最大值
|
|
||||||
if (value < this.min || value > this.max) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (this.asyncChange) {
|
|
||||||
this.$emit('change', value)
|
|
||||||
} else {
|
|
||||||
this.inputVal = value
|
|
||||||
this.handleChange(value, type)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 处理用户手动输入的情况
|
|
||||||
onBlur(event) {
|
|
||||||
let val = 0
|
|
||||||
let value = event.target.value
|
|
||||||
|
|
||||||
console.log(value)
|
|
||||||
if (!/(^\d+$)/.test(value)) {
|
|
||||||
val = this.min
|
|
||||||
} else {
|
|
||||||
val = +value
|
|
||||||
}
|
|
||||||
if (val > this.max) {
|
|
||||||
val = this.max
|
|
||||||
} else if (val < this.min) {
|
|
||||||
val = this.min
|
|
||||||
}
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.inputVal = val
|
|
||||||
})
|
|
||||||
this.handleChange(val, 'blur')
|
|
||||||
},
|
|
||||||
// 输入框获得焦点事件
|
|
||||||
onFocus() {
|
|
||||||
this.$emit('focus')
|
|
||||||
},
|
|
||||||
handleChange(value, type) {
|
|
||||||
if (this.disabled) return
|
|
||||||
// 清除定时器，避免造成混乱
|
|
||||||
if (this.innerChangeTimer) {
|
|
||||||
clearTimeout(this.innerChangeTimer)
|
|
||||||
this.innerChangeTimer = null
|
|
||||||
}
|
|
||||||
this.changeFromInner = true
|
|
||||||
this.innerChangeTimer = setTimeout(() => {
|
|
||||||
this.changeFromInner = false
|
|
||||||
}, 150)
|
|
||||||
this.$emit('input', Number(value))
|
|
||||||
this.$emit(type, {
|
|
||||||
value: Number(value),
|
|
||||||
index: this.index,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.number-box {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
.number-input {
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 6px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.plus,
|
|
||||||
.minus {
|
|
||||||
width: 32px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.plus {
|
|
||||||
border-radius: 0 2px 2px 0;
|
|
||||||
}
|
|
||||||
.minus {
|
|
||||||
border-radius: 2px 0 0 2px;
|
|
||||||
}
|
|
||||||
.disabled {
|
|
||||||
color: #c8c9cc !important;
|
|
||||||
background: #f7f8fa !important;
|
|
||||||
}
|
|
||||||
.input-disabled {
|
|
||||||
color: #c8c9cc !important;
|
|
||||||
background-color: #f2f3f5 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,366 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="order-list">
|
|
||||||
<div class="item m-b-16" v-for="item in list" :key="item.id">
|
|
||||||
<div class="item-hd flex">
|
|
||||||
<nuxt-link
|
|
||||||
class="flex-1 lighter sm line-1 m-r-20"
|
|
||||||
style="min-width: 0"
|
|
||||||
:to="`/shop_street_detail?id=${item.shop.id}`"
|
|
||||||
>
|
|
||||||
{{ item.shop.name }}
|
|
||||||
</nuxt-link>
|
|
||||||
<div class="flex-1 lighter sm">
|
|
||||||
下单时间：{{ item.create_time }}
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 lighter sm">
|
|
||||||
订单编号：{{ item.order_sn }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
:class="['status sm', { primary: item.order_status == 0 }]"
|
|
||||||
>
|
|
||||||
{{ getOrderStatus(item.order_status) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item-con">
|
|
||||||
<div class="flex" style="align-items: stretch;">
|
|
||||||
<div class="goods">
|
|
||||||
<nuxt-link
|
|
||||||
class="goods-item flex"
|
|
||||||
:to="`/goods_details/${goods.goods_id}`"
|
|
||||||
v-for="(goods, index) in item.order_goods"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<el-image class="goods-img" :src="goods.image" alt="" />
|
|
||||||
<div class="goods-info flex-1">
|
|
||||||
<div class="goods-name m-b-8 flex row-between">
|
|
||||||
<div class="line1" style="width: 350px">
|
|
||||||
<el-tag
|
|
||||||
size="mini"
|
|
||||||
effect="plain"
|
|
||||||
v-if="goods.is_seckill"
|
|
||||||
>秒杀</el-tag
|
|
||||||
>
|
|
||||||
{{ goods.goods_name }}
|
|
||||||
</div>
|
|
||||||
<div class="num">x{{ goods.goods_num }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="sm muted m-b-8">
|
|
||||||
{{ goods.spec_value }}
|
|
||||||
</div>
|
|
||||||
<div class="primary">
|
|
||||||
<price-formate :price="goods.goods_price" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="pay-price flex-col col-center row-center"
|
|
||||||
style="padding-left: 30px"
|
|
||||||
>
|
|
||||||
<div class="lighter">共{{ item.goods_count }}件商品</div>
|
|
||||||
<div class="lighter m-t-8 flex">
|
|
||||||
付款金额：
|
|
||||||
<span class="primary">
|
|
||||||
<price-formate
|
|
||||||
:price="item.order_amount"
|
|
||||||
:subscript-size="12"
|
|
||||||
:first-size="16"
|
|
||||||
:second-size="12"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="operate flex-col col-center row-center sm">
|
|
||||||
<nuxt-link
|
|
||||||
:to="`/payment?id=${item.id}&from=order`"
|
|
||||||
class="btn m-b-16 bg-primary flex row-center white sm"
|
|
||||||
v-if="item.pay_btn"
|
|
||||||
>
|
|
||||||
<span class="m-r-8">去付款</span>
|
|
||||||
<count-down
|
|
||||||
v-if="getCancelTime(item.order_cancel_time) > 0"
|
|
||||||
:time="getCancelTime(item.order_cancel_time)"
|
|
||||||
format="hh:mm:ss"
|
|
||||||
@finish="$emit('refresh')"
|
|
||||||
/>
|
|
||||||
</nuxt-link>
|
|
||||||
<div
|
|
||||||
class="btn m-b-10 primary flex row-center sm plain"
|
|
||||||
v-if="item.take_btn"
|
|
||||||
@click="handleOrder(2, item.id)"
|
|
||||||
>
|
|
||||||
确认收货
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="m-b-10 muted flex row-center sm"
|
|
||||||
v-if="item.delivery_btn"
|
|
||||||
@click="showDeliverDialog(item.id)"
|
|
||||||
>
|
|
||||||
物流查询
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="m-b-10 muted row-center sm"
|
|
||||||
v-if="item.cancel_btn"
|
|
||||||
@click="handleOrder(0, item.id)"
|
|
||||||
>
|
|
||||||
取消订单
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="m-b-10 muted row-center sm"
|
|
||||||
v-if="item.del_btn"
|
|
||||||
@click="handleOrder(1, item.id)"
|
|
||||||
>
|
|
||||||
删除订单
|
|
||||||
</div>
|
|
||||||
<nuxt-link
|
|
||||||
class="lighter"
|
|
||||||
:to="`/user/order/detail?id=${item.id}`"
|
|
||||||
>
|
|
||||||
<span>查看详情</span>
|
|
||||||
<!-- <i class="el-icon-arrow-right"></i> -->
|
|
||||||
</nuxt-link>
|
|
||||||
|
|
||||||
<el-upload
|
|
||||||
class="upload-demo"
|
|
||||||
:action="action"
|
|
||||||
:multiple="true"
|
|
||||||
:limit="10"
|
|
||||||
:headers="{token: $store.state.token}"
|
|
||||||
:show-file-list="false"
|
|
||||||
:on-success="onSuccess"
|
|
||||||
>
|
|
||||||
<el-button type="primary" size="mini" class="m-t-10 muted row-center sm uploadBtn"
|
|
||||||
v-if="item.pay_btn == 0 && item.del_btn != 1" @click="uploadContract(item.id)"
|
|
||||||
>上传合同</el-button>
|
|
||||||
</el-upload>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<deliver-search v-model="showDeliver" :aid="aid" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import config from "~/config/app";
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
list: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showDeliver: false,
|
|
||||||
aid: -1,
|
|
||||||
action: config.baseUrl + "/api/file/formimage",
|
|
||||||
baseUrl:config.baseUrl + '/',
|
|
||||||
uploadId:'',//上传的id
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
console.log(this.list)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleOrder(type, id) {
|
|
||||||
this.type = type
|
|
||||||
this.orderId = id
|
|
||||||
this.$confirm(this.getTipsText(type), {
|
|
||||||
title: '温馨提示',
|
|
||||||
center: true,
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
callback: (action) => {
|
|
||||||
if (action == 'confirm') {
|
|
||||||
this.postOrder()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
},
|
|
||||||
async postOrder() {
|
|
||||||
const { type, orderId } = this
|
|
||||||
let url = ''
|
|
||||||
switch (type) {
|
|
||||||
case 0:
|
|
||||||
url = 'order/cancel'
|
|
||||||
break
|
|
||||||
case 1:
|
|
||||||
url = 'order/del'
|
|
||||||
break
|
|
||||||
case 2:
|
|
||||||
url = 'order/confirm'
|
|
||||||
break
|
|
||||||
}
|
|
||||||
let { code, data, msg } = await this.$post(url, { id: orderId })
|
|
||||||
if (code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: msg,
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
this.$emit('refresh')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getTipsText(type) {
|
|
||||||
switch (type) {
|
|
||||||
case 0:
|
|
||||||
return '确认取消订单吗？'
|
|
||||||
case 1:
|
|
||||||
return '确认删除订单吗?'
|
|
||||||
case 2:
|
|
||||||
return '确认收货吗?'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
showDeliverDialog(id) {
|
|
||||||
console.log('showDeliverDialog')
|
|
||||||
this.aid = id
|
|
||||||
this.showDeliver = true
|
|
||||||
},
|
|
||||||
// 上传合同选中的id
|
|
||||||
uploadContract(id) {
|
|
||||||
this.uploadId = id;
|
|
||||||
console.log(this.uploadId)
|
|
||||||
},
|
|
||||||
|
|
||||||
async onSuccess(response, file, fileList) {
|
|
||||||
console.log(response, file, fileList)
|
|
||||||
let that = this;
|
|
||||||
if(fileList) {
|
|
||||||
let result = fileList.map(item => item.response.data.base_uri).join(',');
|
|
||||||
let params = {
|
|
||||||
order_id:that.uploadId,
|
|
||||||
path:result
|
|
||||||
}
|
|
||||||
let respond = await that.$post("order/contractUpload", params);
|
|
||||||
if (respond.code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: '上传成功，可进入详情查看',
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
getOrderStatus() {
|
|
||||||
return (status) => {
|
|
||||||
let text = ''
|
|
||||||
switch (status) {
|
|
||||||
case 0:
|
|
||||||
text = '待支付'
|
|
||||||
break
|
|
||||||
case 1:
|
|
||||||
text = '待发货'
|
|
||||||
break
|
|
||||||
case 2:
|
|
||||||
text = '待收货'
|
|
||||||
break
|
|
||||||
case 3:
|
|
||||||
text = '已完成'
|
|
||||||
break
|
|
||||||
case 4:
|
|
||||||
text = '订单已关闭'
|
|
||||||
break
|
|
||||||
}
|
|
||||||
return text
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getCancelTime() {
|
|
||||||
return (time) => time - Date.now() / 1000
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.order-list {
|
|
||||||
padding: 0 16px;
|
|
||||||
.item {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
.item-hd {
|
|
||||||
height: 40px;
|
|
||||||
border: 1px solid #e5e5e5;
|
|
||||||
background: #f2f2f2;
|
|
||||||
padding: 0 20px;
|
|
||||||
.status {
|
|
||||||
width: 100px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.item-con {
|
|
||||||
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.08);
|
|
||||||
align-items: stretch;
|
|
||||||
.goods {
|
|
||||||
padding: 17px 0;
|
|
||||||
width: 560px;
|
|
||||||
.goods-item {
|
|
||||||
padding: 10px 20px;
|
|
||||||
.goods-img {
|
|
||||||
flex: none;
|
|
||||||
margin-right: 10px;
|
|
||||||
width: 72px;
|
|
||||||
height: 72px;
|
|
||||||
}
|
|
||||||
.goods-name {
|
|
||||||
width: 100%;
|
|
||||||
.num {
|
|
||||||
padding: 0 42px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.pay-price {
|
|
||||||
width: 200px;
|
|
||||||
border-left: 1px solid #e5e5e5;
|
|
||||||
border-right: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
.operate {
|
|
||||||
width: 185px;
|
|
||||||
& > div {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
width: 120px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 2px;
|
|
||||||
&.plain {
|
|
||||||
border: 1px solid $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.uploadBtn {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.pre-box {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
border-top: 1px solid #e5e5e5;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pre-item {
|
|
||||||
width: 120rpx;
|
|
||||||
border-radius: 6rpx;
|
|
||||||
height: 120rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pre-item-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 120rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
// .item-con .el-upload-list {
|
|
||||||
// display: none;
|
|
||||||
// }
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,94 +0,0 @@
|
||||||
<template>
|
|
||||||
<span
|
|
||||||
:style="{ color, 'font-weight': weight }"
|
|
||||||
:class="(lineThrough ? 'line-through' : '') + 'price-format'"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-if="showSubscript"
|
|
||||||
:style="{
|
|
||||||
'font-size': subscriptSize + 'px',
|
|
||||||
'margin-right': '1px',
|
|
||||||
}"
|
|
||||||
>¥</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
:style="{ 'font-size': firstSize + 'px', 'margin-right': '1px' }"
|
|
||||||
>{{ priceSlice.first }}</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-if="priceSlice.second"
|
|
||||||
:style="{ 'font-size': secondSize + 'px' }"
|
|
||||||
>.{{ priceSlice.second }}</span
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
priceSlice: {},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
firstSize: {
|
|
||||||
type: Number,
|
|
||||||
default: 14,
|
|
||||||
},
|
|
||||||
secondSize: {
|
|
||||||
type: Number,
|
|
||||||
default: 14,
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
weight: {
|
|
||||||
type: [String, Number],
|
|
||||||
default: 400,
|
|
||||||
},
|
|
||||||
price: {
|
|
||||||
type: [String, Number],
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
showSubscript: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
subscriptSize: {
|
|
||||||
type: Number,
|
|
||||||
default: 14,
|
|
||||||
},
|
|
||||||
lineThrough: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.priceFormat()
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
price(val) {
|
|
||||||
this.priceFormat()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
priceFormat() {
|
|
||||||
let { price } = this
|
|
||||||
let priceSlice = {}
|
|
||||||
if (price !== null) {
|
|
||||||
price = String(price).split('.')
|
|
||||||
priceSlice.first = price[0]
|
|
||||||
priceSlice.second = price[1]
|
|
||||||
this.priceSlice = priceSlice
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.price-format {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
<template>
|
|
||||||
<nuxt-link
|
|
||||||
class="shop-item flex-col row-right"
|
|
||||||
:style="{
|
|
||||||
'background-image': `url(${cover})`,
|
|
||||||
}"
|
|
||||||
:to="`/shop_street_detail?id=${shopId}`"
|
|
||||||
>
|
|
||||||
<div class="bg-white shop-info text-center">
|
|
||||||
<el-image class="logo" :src="logo"></el-image>
|
|
||||||
<div class="m-t-12 line-1 lg">
|
|
||||||
<el-tag size="mini" v-if="type == 1">自营</el-tag> {{ name }}
|
|
||||||
</div>
|
|
||||||
<span class="xs muted sales"
|
|
||||||
>共{{ sales }}件商品</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</nuxt-link>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
cover: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
shopId: {
|
|
||||||
type: [String, Number],
|
|
||||||
},
|
|
||||||
logo: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: [String, Number],
|
|
||||||
},
|
|
||||||
name: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
sales: {
|
|
||||||
type: [String, Number],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.shop-item {
|
|
||||||
width: 270px;
|
|
||||||
height: 400px;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 6px;
|
|
||||||
|
|
||||||
.shop-info {
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 18px 15px;
|
|
||||||
.logo {
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
border-radius: 16px;
|
|
||||||
margin-top: -45px;
|
|
||||||
}
|
|
||||||
.sales {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 4px 10px;
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
margin-top: 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,108 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="v-upload">
|
|
||||||
<el-upload
|
|
||||||
list-type="picture-card"
|
|
||||||
:action="url + '/api/file/formimage'"
|
|
||||||
:limit="limit"
|
|
||||||
:on-success="success"
|
|
||||||
:on-error="error"
|
|
||||||
:on-remove="remove"
|
|
||||||
:on-change="onChange"
|
|
||||||
:headers="{ token: $store.state.token }"
|
|
||||||
:auto-upload="autoUpload"
|
|
||||||
accept="image/jpg,image/jpeg,image/png"
|
|
||||||
:before-upload="beforeAvatarUpload"
|
|
||||||
>
|
|
||||||
<slot v-if="isSlot"></slot>
|
|
||||||
<div v-else>
|
|
||||||
<div class="muted xs">上传图片</div>
|
|
||||||
</div>
|
|
||||||
</el-upload>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import config from '~/config/app'
|
|
||||||
export default {
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
limit: {
|
|
||||||
type: Number,
|
|
||||||
default: 1,
|
|
||||||
},
|
|
||||||
isSlot: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
autoUpload: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
onChange: {
|
|
||||||
type: Function,
|
|
||||||
default: () => {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
url: config.baseUrl,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {},
|
|
||||||
computed: {},
|
|
||||||
methods: {
|
|
||||||
success(res, file, fileList) {
|
|
||||||
if (!this.autoUpload) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.$message({
|
|
||||||
message: '上传成功',
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
this.$emit('success', fileList)
|
|
||||||
},
|
|
||||||
remove(file, fileList) {
|
|
||||||
this.$emit('remove', fileList)
|
|
||||||
},
|
|
||||||
error(res) {
|
|
||||||
this.$message({
|
|
||||||
message: '上传失败，请重新上传',
|
|
||||||
type: 'error',
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeAvatarUpload(file) {
|
|
||||||
var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
|
|
||||||
console.log('fdsadsf')
|
|
||||||
const extension = testmsg === 'jpg'
|
|
||||||
const extension2 = testmsg === 'png'
|
|
||||||
const extension4 = testmsg === 'jpeg'
|
|
||||||
if (!extension && !extension2) {
|
|
||||||
this.$message({
|
|
||||||
message: '上传文件只能是 jpg, jpeg, png格式!',
|
|
||||||
type: 'warning'
|
|
||||||
})
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
return extension || extension2 || extension4
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.v-upload {
|
|
||||||
.el-upload--picture-card {
|
|
||||||
width: 76px;
|
|
||||||
height: 76px;
|
|
||||||
line-height: 76px;
|
|
||||||
}
|
|
||||||
.el-upload-list--picture-card {
|
|
||||||
.el-upload-list__item {
|
|
||||||
width: 76px;
|
|
||||||
height: 76px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
|
|
||||||
// 本地访问域名
|
|
||||||
// const testUrl = "https://glh.dev.scdxtc.cn"
|
|
||||||
const testUrl = "https://www.gonglehui.com"
|
|
||||||
//线上域名
|
|
||||||
const productUrl = 'https://www.gonglehui.com'
|
|
||||||
const config = {
|
|
||||||
baseUrl: process.env.NODE_ENV == 'production' ? productUrl : testUrl
|
|
||||||
}
|
|
||||||
|
|
||||||
export default config
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="default-layout flex-col">
|
|
||||||
<ls-header></ls-header>
|
|
||||||
<main-nav />
|
|
||||||
<main class="content-container wrapper1180 flex-1">
|
|
||||||
<nuxt />
|
|
||||||
</main>
|
|
||||||
<ls-footer></ls-footer>
|
|
||||||
<float-nav></float-nav>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import LsHeader from '~/components/layout/header'
|
|
||||||
import LsFooter from '~/components/layout/footer'
|
|
||||||
import FloatNav from '~/components/layout/float-nav'
|
|
||||||
import MainNav from '~/components/layout/main-nav'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
LsHeader,
|
|
||||||
LsFooter,
|
|
||||||
FloatNav,
|
|
||||||
MainNav,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.default-layout {
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="error flex-col col-center">
|
|
||||||
<h1 class="mb16">抱歉，您访问的页面出错了</h1>
|
|
||||||
<div class="muted">您可能输错了网址，或该网页已被删除、不存在等</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.error {
|
|
||||||
padding-top: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="default-layout flex-col">
|
|
||||||
<div class="default-header">
|
|
||||||
<div class="haeder-con">
|
|
||||||
<nuxt-link to="/" v-if="config.shop_login_logo">
|
|
||||||
<img class="header-logo" :src="config.shop_login_logo" />
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="default-main flex-1">
|
|
||||||
<nuxt />
|
|
||||||
</div>
|
|
||||||
<ls-footer></ls-footer>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import LsFooter from '~/components/layout/footer'
|
|
||||||
import { mapState } from 'vuex'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
LsFooter,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
created() {},
|
|
||||||
computed: {
|
|
||||||
...mapState(['config']),
|
|
||||||
},
|
|
||||||
methods: {},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.default-layout {
|
|
||||||
min-height: 100vh;
|
|
||||||
.default-header {
|
|
||||||
padding: 22px 0;
|
|
||||||
background-color: white;
|
|
||||||
min-width: 1180px;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
.haeder-con {
|
|
||||||
width: 1180px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.header-logo {
|
|
||||||
height: 56px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.default-main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="default-layout flex-col">
|
|
||||||
<ls-header></ls-header>
|
|
||||||
<main class="content-container">
|
|
||||||
<nuxt />
|
|
||||||
</main>
|
|
||||||
<ls-footer></ls-footer>
|
|
||||||
<float-nav></float-nav>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import LsHeader from '~/components/layout/header'
|
|
||||||
import LsFooter from '~/components/layout/footer'
|
|
||||||
import FloatNav from '~/components/layout/float-nav'
|
|
||||||
import MainNav from '~/components/layout/main-nav'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
LsHeader,
|
|
||||||
LsFooter,
|
|
||||||
FloatNav,
|
|
||||||
MainNav,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.default-layout {
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="default-layout flex-col">
|
|
||||||
<ls-header></ls-header>
|
|
||||||
<main-nav />
|
|
||||||
<main class="content-container wrapper1180 flex flex-1">
|
|
||||||
<aslide-nav />
|
|
||||||
<div class="content bg-white flex-1">
|
|
||||||
<nuxt />
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<ls-footer></ls-footer>
|
|
||||||
<float-nav></float-nav>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import LsHeader from "~/components/layout/header";
|
|
||||||
import LsFooter from "~/components/layout/footer";
|
|
||||||
import AslideNav from "~/components/layout/aslide-nav";
|
|
||||||
import MainNav from '~/components/layout/main-nav'
|
|
||||||
import FloatNav from "~/components/layout/float-nav";
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
LsHeader,
|
|
||||||
LsFooter,
|
|
||||||
AslideNav,
|
|
||||||
FloatNav,
|
|
||||||
MainNav
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.default-layout {
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
.content-container {
|
|
||||||
padding: 24px 0;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
.content-container > .content {
|
|
||||||
min-height: 680px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
import Cookies from 'js-cookie'
|
|
||||||
|
|
||||||
const account = ['login', 'register', 'forget_pwd', "error"]
|
|
||||||
|
|
||||||
export default function({route, app, store}) {
|
|
||||||
const { fullPath } = route
|
|
||||||
const isAccount = account.some((item) => fullPath.includes(item))
|
|
||||||
const {isLogin} = store.getters
|
|
||||||
if(!isAccount && !isLogin) {
|
|
||||||
process.server ? app.$cookies.set('back_url', fullPath) : Cookies.set('back_url', fullPath)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,69 +0,0 @@
|
||||||
export default {
|
|
||||||
// Global page headers: https://go.nuxtjs.dev/config-head
|
|
||||||
head: {
|
|
||||||
title: '',
|
|
||||||
htmlAttrs: {
|
|
||||||
lang: 'zh'
|
|
||||||
},
|
|
||||||
meta: [
|
|
||||||
{charset: 'utf-8'},
|
|
||||||
{name: 'viewport', content: 'width=device-width, initial-scale=1'},
|
|
||||||
{hid: 'description', name: 'description', content: ''},
|
|
||||||
{name: 'format-detection', content: 'telephone=no'}
|
|
||||||
],
|
|
||||||
link: [
|
|
||||||
{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
ssr: false,
|
|
||||||
// Global CSS: https://go.nuxtjs.dev/config-css
|
|
||||||
css: [
|
|
||||||
'@/assets/css/element-variables.scss',
|
|
||||||
'@/assets/css/common.scss',
|
|
||||||
'@/assets/css/reset.scss',
|
|
||||||
'swiper/css/swiper.css',
|
|
||||||
'@/assets/css/element.scss',
|
|
||||||
'@/assets/fonts/iconfont.css'
|
|
||||||
],
|
|
||||||
|
|
||||||
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
|
|
||||||
plugins: [
|
|
||||||
'@/plugins/element-ui',
|
|
||||||
{src: '@/plugins/vue-awesome-swiper', mode: 'client'},
|
|
||||||
'@/plugins/axios',
|
|
||||||
'@/plugins/init',
|
|
||||||
],
|
|
||||||
|
|
||||||
// Auto import components: https://go.nuxtjs.dev/config-components
|
|
||||||
components: true,
|
|
||||||
|
|
||||||
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
|
|
||||||
buildModules: [],
|
|
||||||
|
|
||||||
// Modules: https://go.nuxtjs.dev/config-modules
|
|
||||||
modules: [
|
|
||||||
// https://go.nuxtjs.dev/axios
|
|
||||||
'@nuxtjs/axios',
|
|
||||||
'@nuxtjs/style-resources',
|
|
||||||
['cookie-universal-nuxt', { parseJSON: true }]
|
|
||||||
],
|
|
||||||
|
|
||||||
// Axios module configuration: https://go.nuxtjs.dev/config-axios
|
|
||||||
axios: {},
|
|
||||||
|
|
||||||
// Build Configuration: https://go.nuxtjs.dev/config-build
|
|
||||||
build: {
|
|
||||||
transpile: [/^element-ui/],
|
|
||||||
},
|
|
||||||
|
|
||||||
router: {
|
|
||||||
middleware: 'route', // 即每次路由跳转会调用该中间件
|
|
||||||
base: '/'
|
|
||||||
//多个中间件写法
|
|
||||||
// middleware: ['route']
|
|
||||||
},
|
|
||||||
|
|
||||||
styleResources: {
|
|
||||||
scss: "./assets/css/variables.scss"
|
|
||||||
},
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,34 +0,0 @@
|
||||||
{
|
|
||||||
"name": "LikeSopb2b2c",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"dev": "nuxt",
|
|
||||||
"build": "nuxt build",
|
|
||||||
"start": "nuxt start",
|
|
||||||
"generate": "nuxt generate"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@nuxtjs/axios": "^5.13.6",
|
|
||||||
"@nuxtjs/style-resources": "^1.0.0",
|
|
||||||
"cookie-universal-nuxt": "^2.1.4",
|
|
||||||
"cookieparser": "^0.1.0",
|
|
||||||
"core-js": "^3.15.1",
|
|
||||||
"element-ui": "^2.15.2",
|
|
||||||
"js-cookie": "^2.2.1",
|
|
||||||
"nuxt": "latest",
|
|
||||||
"swiper": "^5.2.0",
|
|
||||||
"vue-awesome-swiper": "^4.1.1"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@nuxtjs/proxy": "^2.1.0",
|
|
||||||
"sass": "~1.32.8",
|
|
||||||
"sass-loader": "10"
|
|
||||||
},
|
|
||||||
"config": {
|
|
||||||
"nuxt": {
|
|
||||||
"host": "0.0.0.0",
|
|
||||||
"port": 8000
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,140 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="news-details-container mt16">
|
|
||||||
<div class="nav-container flex">
|
|
||||||
<div class="nr" style="width: 70px">当前位置：</div>
|
|
||||||
<el-breadcrumb style="flex: 1;" separator="/">
|
|
||||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item class="line1">关于我们</el-breadcrumb-item>
|
|
||||||
</el-breadcrumb>
|
|
||||||
</div>
|
|
||||||
<div class="content-box">
|
|
||||||
<div class="news-detail-box">
|
|
||||||
<div class="content-header bg-white">
|
|
||||||
<div class="news-detail-title">
|
|
||||||
关于我们
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content-html-box bg-white">
|
|
||||||
<div v-html="detailsObj.content"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon
|
|
||||||
}],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
async asyncData({
|
|
||||||
$get,
|
|
||||||
$post,
|
|
||||||
query
|
|
||||||
}) {
|
|
||||||
let detailsObj = {};
|
|
||||||
|
|
||||||
let res = await $get("policy/aboutUs", {});
|
|
||||||
if (res.code == 1) {
|
|
||||||
detailsObj = res.data;
|
|
||||||
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
detailsObj,
|
|
||||||
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log('route', this.$route)
|
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.news-details-container {
|
|
||||||
.nav-container {
|
|
||||||
padding: 15px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-box {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
.news-detail-box {
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.content-header {
|
|
||||||
margin: 0px 20px;
|
|
||||||
padding: 20px 0px;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
|
|
||||||
.news-detail-title {
|
|
||||||
color: #222;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-html-box {
|
|
||||||
padding: 24px 20px;
|
|
||||||
|
|
||||||
&>div {
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
::v-deep img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-box {
|
|
||||||
width: 264px;
|
|
||||||
|
|
||||||
.recommend-box-header {
|
|
||||||
padding: 15px 10px;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
|
|
||||||
.primary-line {
|
|
||||||
margin-right: 10px;
|
|
||||||
background-color: $--color-primary;
|
|
||||||
width: 4px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-box-content {
|
|
||||||
.recommend-list-container {
|
|
||||||
.recommend-list-item {
|
|
||||||
padding: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.goods-info {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,209 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="forget-pwd-container flex-col row-center col-center">
|
|
||||||
<div class="forget-pwd-box flex-col col-center bg-white">
|
|
||||||
<div class="forget-pwd-title">忘记密码</div>
|
|
||||||
<el-form class="form-box flex-col">
|
|
||||||
<div class="forget-form-item">
|
|
||||||
<el-input
|
|
||||||
class="form-input"
|
|
||||||
v-model="telephone"
|
|
||||||
placeholder="请输入手机号码"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="el-icon-user"
|
|
||||||
style="font-size: 18px"
|
|
||||||
slot="prepend"
|
|
||||||
/>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
<div class="forget-form-item flex">
|
|
||||||
<el-input
|
|
||||||
v-model="smsCode"
|
|
||||||
class="form-input"
|
|
||||||
placeholder="短信验证码"
|
|
||||||
style="width: 264px"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="el-icon-lock"
|
|
||||||
style="font-size: 18px"
|
|
||||||
slot="prepend"
|
|
||||||
/>
|
|
||||||
</el-input>
|
|
||||||
<el-button class="sms-btn" @click="sendSMSCode">
|
|
||||||
<div v-if="canSend">获取验证码</div>
|
|
||||||
<count-down
|
|
||||||
v-else
|
|
||||||
:time="60"
|
|
||||||
format="ss秒"
|
|
||||||
autoStart
|
|
||||||
@finish="canSend = true"
|
|
||||||
/>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
<div class="forget-form-item">
|
|
||||||
<el-input
|
|
||||||
v-model="password"
|
|
||||||
placeholder="请输入密码 (数字与字母自由组合)"
|
|
||||||
show-password
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="el-icon-more-outline"
|
|
||||||
style="font-size: 18px"
|
|
||||||
slot="prepend"
|
|
||||||
/>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
<div class="forget-form-item">
|
|
||||||
<el-input
|
|
||||||
v-model="againPwd"
|
|
||||||
placeholder="再次输入密码"
|
|
||||||
show-password
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="el-icon-key"
|
|
||||||
style="font-size: 18px"
|
|
||||||
slot="prepend"
|
|
||||||
/>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
<div class="flex-col" style="margin-top: 46px">
|
|
||||||
<el-button type="primary" @click="forgetFun"
|
|
||||||
>确定</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { SMSType, client } from '@/utils/type'
|
|
||||||
import CountDown from '~/components/count-down'
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: 'icon',
|
|
||||||
type: 'image/x-icon',
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
layout: 'main',
|
|
||||||
components: {
|
|
||||||
CountDown,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
telephone: '',
|
|
||||||
smsCode: '',
|
|
||||||
canSend: true,
|
|
||||||
password: '',
|
|
||||||
againPwd: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async forgetFun() {
|
|
||||||
if (!this.telephone) {
|
|
||||||
this.$message({
|
|
||||||
message: '请输入手机号码',
|
|
||||||
type: 'error',
|
|
||||||
})
|
|
||||||
return
|
|
||||||
} else if (!this.smsCode) {
|
|
||||||
this.$message({
|
|
||||||
message: '请输入验证码',
|
|
||||||
type: 'error',
|
|
||||||
})
|
|
||||||
return
|
|
||||||
} else if (!this.password) {
|
|
||||||
this.$message({
|
|
||||||
message: '请输入密码信息',
|
|
||||||
type: 'error',
|
|
||||||
})
|
|
||||||
return
|
|
||||||
} else if (this.password != this.againPwd) {
|
|
||||||
this.$message({
|
|
||||||
message: '两次输入密码不一致',
|
|
||||||
type: 'error',
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let res = await this.$post('login_password/forget', {
|
|
||||||
mobile: this.telephone,
|
|
||||||
code: this.smsCode,
|
|
||||||
password: this.password,
|
|
||||||
repassword: this.againPwd,
|
|
||||||
client: client,
|
|
||||||
})
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: '修改成功',
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
let time = setTimeout(() => {
|
|
||||||
this.$router.replace('/account/login')
|
|
||||||
clearTimeout(time)
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async sendSMSCode() {
|
|
||||||
if (!this.telephone) {
|
|
||||||
this.$message({
|
|
||||||
message: '请输入手机号码',
|
|
||||||
type: 'error',
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let res = await this.$post('sms/send', {
|
|
||||||
mobile: this.telephone,
|
|
||||||
key: SMSType.FINDPWD,
|
|
||||||
})
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.canSend = false
|
|
||||||
this.$message({
|
|
||||||
message: '发送成功',
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.forget-pwd-container {
|
|
||||||
flex: 1;
|
|
||||||
.forget-pwd-box {
|
|
||||||
padding-top: 40px;
|
|
||||||
padding-bottom: 55px;
|
|
||||||
width: 880px;
|
|
||||||
border: 1px solid #e5e5e5;
|
|
||||||
.forget-pwd-title {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
.form-box {
|
|
||||||
.forget-form-item {
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
.form-input {
|
|
||||||
width: 400px;
|
|
||||||
}
|
|
||||||
.verify-code-img {
|
|
||||||
width: 100px;
|
|
||||||
height: 40px;
|
|
||||||
margin-left: 26px;
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
.sms-btn {
|
|
||||||
margin-left: 16px;
|
|
||||||
height: 40px;
|
|
||||||
width: 120px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,448 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="login flex col-center">
|
|
||||||
<div class="login-container flex col-stretch">
|
|
||||||
<div class="login-banner">
|
|
||||||
<!-- <el-image-->
|
|
||||||
<!-- fit="cover"-->
|
|
||||||
<!-- style="width: 100%; height: 100%"-->
|
|
||||||
<!-- :src="config.pc_login_logo"-->
|
|
||||||
<!-- ></el-image>-->
|
|
||||||
<img :src="config.pc_login_logo" height="100%" />
|
|
||||||
</div>
|
|
||||||
<div class="login-float-form-wrap">
|
|
||||||
<div class="login-box">
|
|
||||||
<div class="login-header-box">
|
|
||||||
<div class="header-tabs flex row-center">
|
|
||||||
<div
|
|
||||||
class="header-tab xxl"
|
|
||||||
:class="{ 'active-tab': loginStatus == 0 }"
|
|
||||||
@click="changeLoginType(0)"
|
|
||||||
>验证码登录</div>
|
|
||||||
<div
|
|
||||||
class="header-tab xxl"
|
|
||||||
:class="{ 'active-tab': loginStatus == 1 }"
|
|
||||||
@click="changeLoginType(1)"
|
|
||||||
>账号密码登录</div>
|
|
||||||
</div>
|
|
||||||
<div v-show="loginStatus == 0" @keyup.enter="smsLogin">
|
|
||||||
<div class="login-form-box">
|
|
||||||
<div class="login-form-item">
|
|
||||||
<el-input
|
|
||||||
placeholder="请输入手机号码"
|
|
||||||
v-model="telephone"
|
|
||||||
class="input-phone-num"
|
|
||||||
>
|
|
||||||
<el-select
|
|
||||||
style="width: 100px"
|
|
||||||
v-model="selectNumberType"
|
|
||||||
slot="prepend"
|
|
||||||
placeholder="请选择"
|
|
||||||
>
|
|
||||||
<el-option label="中国+86" value="1"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
<div class="login-form-item flex">
|
|
||||||
<el-input
|
|
||||||
v-model="smsCode"
|
|
||||||
placeholder="短信验证码"
|
|
||||||
style="width: 210px"
|
|
||||||
/>
|
|
||||||
<el-button class="sms-btn" @click="sendSMSCode">
|
|
||||||
<div v-if="canSend">获取验证码</div>
|
|
||||||
<count-down
|
|
||||||
v-else
|
|
||||||
:time="60"
|
|
||||||
format="ss秒"
|
|
||||||
:autoStart="true"
|
|
||||||
@finish="canSend = true"
|
|
||||||
/>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="option-box flex-col">
|
|
||||||
<el-checkbox v-model="isRemember" class="muted">记住账号</el-checkbox>
|
|
||||||
<div class="m-t-20 flex-col">
|
|
||||||
<el-button type="primary" @click="smsLogin">立即登录</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-show="loginStatus == 1" @keyup.enter="accountLogin">
|
|
||||||
<div class="login-form-box">
|
|
||||||
<div class="login-form-item">
|
|
||||||
<el-input
|
|
||||||
placeholder="请输入账号/手机号码"
|
|
||||||
v-model="account"
|
|
||||||
class="input-phone-num"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="el-icon-user"
|
|
||||||
style="font-size: 18px"
|
|
||||||
slot="prepend"
|
|
||||||
></i>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
<div class="login-form-item flex">
|
|
||||||
<el-input v-model="password" placeholder="请输入密码" show-password>
|
|
||||||
<i
|
|
||||||
class="el-icon-more-outline"
|
|
||||||
style="font-size: 18px"
|
|
||||||
slot="prepend"
|
|
||||||
/>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="option-box flex-col">
|
|
||||||
<div class="flex row-between">
|
|
||||||
<el-checkbox v-model="isRemember" class="muted">记住账号</el-checkbox>
|
|
||||||
<nuxt-link class="muted" to="/account/forget_pwd">忘记密码？</nuxt-link>
|
|
||||||
</div>
|
|
||||||
<div class="m-t-20 flex-col">
|
|
||||||
<el-button type="primary" @click="accountLogin">立即登录</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="login-footer-box flex row-between">
|
|
||||||
<!-- <div class="flex">
|
|
||||||
<div class="flex login__other-item" @click="goWechatLogin">
|
|
||||||
<i class="iconfont icon-weixin1 login__weixin-icon"></i>
|
|
||||||
<div class="m-l-4 muted">微信</div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
<div></div>
|
|
||||||
<nuxt-link class="primary" to="/account/register">注册账号</nuxt-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { loginType, client, SMSType } from '@/utils/type'
|
|
||||||
import Cookies from 'js-cookie'
|
|
||||||
import { mapMutations, mapActions, mapState } from 'vuex'
|
|
||||||
import CountDown from '@/components/count-down'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: 'icon',
|
|
||||||
type: 'image/x-icon',
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
layout: 'main',
|
|
||||||
|
|
||||||
components: {
|
|
||||||
CountDown,
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// 选择电话类型
|
|
||||||
selectNumberType: '中国+86',
|
|
||||||
// 账号
|
|
||||||
account: '',
|
|
||||||
// 密码
|
|
||||||
password: '',
|
|
||||||
// 电话号码
|
|
||||||
telephone: '',
|
|
||||||
// 图形验证码
|
|
||||||
verifyCode: '',
|
|
||||||
// 短信验证码
|
|
||||||
smsCode: '',
|
|
||||||
isRemember: true,
|
|
||||||
// 短信登陆或账号登陆 0 ==》 短信 1 ==》账号
|
|
||||||
loginStatus: loginType.SMS,
|
|
||||||
canSend: true,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapState(['config']),
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapMutations(['setToken']),
|
|
||||||
...mapActions(['getPublicData']),
|
|
||||||
|
|
||||||
changeLoginType(type) {
|
|
||||||
this.loginStatus = type
|
|
||||||
this.telephone = ''
|
|
||||||
this.verifyCode = ''
|
|
||||||
this.smsCode = ''
|
|
||||||
let jsonPaser = JSON.parse(localStorage.getItem('ACCOUNT'))
|
|
||||||
let telJson = JSON.parse(localStorage.getItem('TEL'))
|
|
||||||
if (jsonPaser && jsonPaser.account) {
|
|
||||||
this.account = jsonPaser.account
|
|
||||||
}
|
|
||||||
if (telJson && telJson.telephone) {
|
|
||||||
this.telephone = telJson.telephone
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 前往微信登录
|
|
||||||
goWechatLogin() {
|
|
||||||
this.$get('account/scanCode')
|
|
||||||
.then(({ code, msg, data }) => {
|
|
||||||
if (code !== 1) throw new Error(msg)
|
|
||||||
window.open(data.url, '_self')
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
this.$message.error(err.message)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 微信授权登录处理
|
|
||||||
handleWechatLogin(params) {
|
|
||||||
this.$post('account/scanLogin', params)
|
|
||||||
.then(({ code, msg, data }) => {
|
|
||||||
if (code !== 1) throw new Error(msg)
|
|
||||||
|
|
||||||
Cookies.set('token', data.token, { expires: 60 })
|
|
||||||
this.setToken(data.token)
|
|
||||||
this.$router.replace({
|
|
||||||
path: Cookies.get('back_url') || '/',
|
|
||||||
})
|
|
||||||
Cookies.remove('back_url')
|
|
||||||
this.getPublicData()
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
this.$message.error(err.message)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
async sendSMSCode() {
|
|
||||||
if (!this.canSend) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let res = await this.$post('sms/send', {
|
|
||||||
mobile: this.telephone,
|
|
||||||
key: SMSType.LOGIN,
|
|
||||||
client,
|
|
||||||
})
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: res.msg,
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
this.canSend = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async smsLogin() {
|
|
||||||
let res = await this.$post('account/smsLogin', {
|
|
||||||
mobile: this.telephone,
|
|
||||||
code: this.smsCode,
|
|
||||||
client,
|
|
||||||
})
|
|
||||||
if (res.code == 1) {
|
|
||||||
const token = res.data.token
|
|
||||||
Cookies.set('token', token, { expires: 60 })
|
|
||||||
this.setToken(token)
|
|
||||||
this.$router.replace({
|
|
||||||
path: Cookies.get('back_url') || '/',
|
|
||||||
})
|
|
||||||
Cookies.remove('back_url')
|
|
||||||
this.getPublicData()
|
|
||||||
if (this.isRemember) {
|
|
||||||
localStorage.setItem(
|
|
||||||
'TEL',
|
|
||||||
JSON.stringify({
|
|
||||||
telephone: this.telephone,
|
|
||||||
})
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
localStorage.setItem(
|
|
||||||
'TEL',
|
|
||||||
JSON.stringify({
|
|
||||||
telephone: '',
|
|
||||||
})
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async accountLogin() {
|
|
||||||
let res = await this.$post('account/login', {
|
|
||||||
mobile: this.account,
|
|
||||||
password: this.password,
|
|
||||||
client,
|
|
||||||
})
|
|
||||||
if (res.code == 1) {
|
|
||||||
const token = res.data.token
|
|
||||||
Cookies.set('token', token, { expires: 60 })
|
|
||||||
this.setToken(token)
|
|
||||||
this.$router.replace({
|
|
||||||
path: Cookies.get('back_url') || '/',
|
|
||||||
})
|
|
||||||
Cookies.remove('back_url')
|
|
||||||
this.getPublicData()
|
|
||||||
if (this.isRemember) {
|
|
||||||
localStorage.setItem(
|
|
||||||
'ACCOUNT',
|
|
||||||
JSON.stringify({
|
|
||||||
account: this.account,
|
|
||||||
})
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
localStorage.setItem(
|
|
||||||
'ACCOUNT',
|
|
||||||
JSON.stringify({
|
|
||||||
account: '',
|
|
||||||
})
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 获取URL Query参数
|
|
||||||
const query = this.$route.query
|
|
||||||
|
|
||||||
// 如果存在code和state值，即为微信扫码授权后重定向至此
|
|
||||||
query.code &&
|
|
||||||
query.state &&
|
|
||||||
this.handleWechatLogin({ code: query.code, state: query.state })
|
|
||||||
|
|
||||||
// 获取缓存数据
|
|
||||||
const jsonPaser = JSON.parse(localStorage.getItem('ACCOUNT')) ?? {}
|
|
||||||
const telJson = JSON.parse(localStorage.getItem('TEL')) ?? {}
|
|
||||||
// 利用缓存数据初始化表单值
|
|
||||||
this.account = jsonPaser?.account ?? ''
|
|
||||||
this.telephone = telJson?.telephone ?? ''
|
|
||||||
} catch (error) {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.login {
|
|
||||||
flex: 1;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: 50%;
|
|
||||||
min-width: 1180px;
|
|
||||||
.login-container {
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 1180px;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
.login-banner {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 750px;
|
|
||||||
margin-right: 30px;
|
|
||||||
height: 440px;
|
|
||||||
overflow: hidden;
|
|
||||||
animation: loadimg 2s infinite;
|
|
||||||
transition: background-color 2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes loadimg {
|
|
||||||
0% {
|
|
||||||
background-color: #e4e4e4;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-color: #e4e4e4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-float-form-wrap {
|
|
||||||
width: 400px;
|
|
||||||
height: 440px;
|
|
||||||
.login-box {
|
|
||||||
background-color: white;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
.login-header-box {
|
|
||||||
padding-top: 20px;
|
|
||||||
.header-tabs {
|
|
||||||
.header-tab {
|
|
||||||
width: 160px;
|
|
||||||
height: 35px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.active-tab {
|
|
||||||
color: $--color-primary;
|
|
||||||
text-align: center;
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
height: 2px;
|
|
||||||
width: 72px;
|
|
||||||
margin-top: 8px;
|
|
||||||
background-color: $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.login-form-box {
|
|
||||||
padding: 0 30px;
|
|
||||||
.login-form-item {
|
|
||||||
margin-top: 24px;
|
|
||||||
.input-phone-num {
|
|
||||||
width: 340px;
|
|
||||||
}
|
|
||||||
.verify-code-img {
|
|
||||||
width: 100px;
|
|
||||||
height: 40px;
|
|
||||||
margin-left: 20px;
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
.sms-btn {
|
|
||||||
margin-left: 20px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.option-box {
|
|
||||||
padding: 0 30px;
|
|
||||||
margin-top: 60px;
|
|
||||||
::v-deep .el-checkbox {
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.login-footer-box {
|
|
||||||
height: 50px;
|
|
||||||
padding: 15px;
|
|
||||||
|
|
||||||
.login__other-item {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login__weixin-icon {
|
|
||||||
width: 1.5em;
|
|
||||||
height: 1.5em;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1.5em;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #0abd5d;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,212 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="register-container flex-col row-center col-center">
|
|
||||||
<div class="register-box flex-col col-center bg-white">
|
|
||||||
<div class="register-title">注册账号</div>
|
|
||||||
<el-form class="form-box flex-col">
|
|
||||||
<div class="register-form-item">
|
|
||||||
<el-input
|
|
||||||
class="form-input"
|
|
||||||
v-model="telephone"
|
|
||||||
placeholder="请输入手机号码"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="el-icon-user"
|
|
||||||
style="font-size: 18px"
|
|
||||||
slot="prepend"
|
|
||||||
/>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
<div class="register-form-item flex" v-if="registerSetting">
|
|
||||||
<el-input
|
|
||||||
v-model="smsCode"
|
|
||||||
class="form-input"
|
|
||||||
placeholder="短信验证码"
|
|
||||||
style="width: 264px"
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="el-icon-lock"
|
|
||||||
style="font-size: 18px"
|
|
||||||
slot="prepend"
|
|
||||||
/>
|
|
||||||
</el-input>
|
|
||||||
<el-button class="sms-btn" @click="sendSMSCode">
|
|
||||||
<div v-if="canSend">获取验证码</div>
|
|
||||||
<count-down
|
|
||||||
v-else
|
|
||||||
:time="60"
|
|
||||||
format="ss秒"
|
|
||||||
autoStart
|
|
||||||
@finish="canSend = true"
|
|
||||||
/>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
<div class="register-form-item">
|
|
||||||
<el-input
|
|
||||||
v-model="password"
|
|
||||||
placeholder="请输入密码 (数字与字母自由组合)"
|
|
||||||
show-password
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="el-icon-more-outline"
|
|
||||||
style="font-size: 18px"
|
|
||||||
slot="prepend"
|
|
||||||
/>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
<div class="register-form-item">
|
|
||||||
<el-input
|
|
||||||
v-model="againPwd"
|
|
||||||
placeholder="再次输入密码"
|
|
||||||
show-password
|
|
||||||
>
|
|
||||||
<i
|
|
||||||
class="el-icon-key"
|
|
||||||
style="font-size: 18px"
|
|
||||||
slot="prepend"
|
|
||||||
/>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
<div class="flex row-between" style="margin-top: 36px">
|
|
||||||
<nuxt-link to="/account/login">已有账号，去登录</nuxt-link>
|
|
||||||
</div>
|
|
||||||
<div class="m-t-20 flex-col">
|
|
||||||
<el-button type="primary" @click="registerFun"
|
|
||||||
>立即注册</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { client, SMSType } from '@/utils/type'
|
|
||||||
import CountDown from '@/components/count-down'
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: 'icon',
|
|
||||||
type: 'image/x-icon',
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
layout: 'main',
|
|
||||||
components: {
|
|
||||||
CountDown,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
telephone: '',
|
|
||||||
smsCode: '',
|
|
||||||
password: '',
|
|
||||||
againPwd: '',
|
|
||||||
canSend: true,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
registerSetting() {
|
|
||||||
return this.$store.state.config.register_setting
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async sendSMSCode() {
|
|
||||||
if (!this.canSend) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let res = await this.$post('sms/send', {
|
|
||||||
mobile: this.telephone,
|
|
||||||
key: SMSType.REGISTER,
|
|
||||||
})
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: res.msg,
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
this.canSend = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async registerFun() {
|
|
||||||
if (!this.telephone) {
|
|
||||||
this.$message({
|
|
||||||
message: '请输入手机号',
|
|
||||||
type: 'error',
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (this.registerSetting && !this.smsCode) {
|
|
||||||
this.$message({
|
|
||||||
message: '请输入短信验证码',
|
|
||||||
type: 'error',
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (!this.password) {
|
|
||||||
this.$message({
|
|
||||||
message: '请输入密码',
|
|
||||||
type: 'error',
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (this.password != this.againPwd) {
|
|
||||||
this.$message({
|
|
||||||
message: '两次密码输入不一致',
|
|
||||||
type: 'error',
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let res = await this.$post('account/register', {
|
|
||||||
mobile: this.telephone,
|
|
||||||
password: this.password,
|
|
||||||
code: this.smsCode,
|
|
||||||
client: client,
|
|
||||||
})
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: '注册成功',
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
this.$router.replace('/account/login')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.register-container {
|
|
||||||
flex: 1;
|
|
||||||
.register-box {
|
|
||||||
padding-top: 40px;
|
|
||||||
padding-bottom: 55px;
|
|
||||||
width: 880px;
|
|
||||||
border: 1px solid #e5e5e5;
|
|
||||||
.register-title {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
.form-box {
|
|
||||||
.register-form-item {
|
|
||||||
margin-top: 24px;
|
|
||||||
.form-input {
|
|
||||||
width: 400px;
|
|
||||||
}
|
|
||||||
.verify-code-img {
|
|
||||||
width: 100px;
|
|
||||||
height: 40px;
|
|
||||||
margin-left: 26px;
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
.sms-btn {
|
|
||||||
margin-left: 16px;
|
|
||||||
height: 40px;
|
|
||||||
width: 120px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,437 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="category">
|
|
||||||
<div class="category-hd bg-white">
|
|
||||||
<div class="category-wrap">
|
|
||||||
<div class="category-con flex">
|
|
||||||
<div class="name muted">一级分类：</div>
|
|
||||||
<div class="category-list flex flex-wrap lighter">
|
|
||||||
<div
|
|
||||||
:class="[
|
|
||||||
'item line1',
|
|
||||||
{ active: oneIndex == index },
|
|
||||||
]"
|
|
||||||
v-for="(item, index) in categoryOne"
|
|
||||||
:key="index"
|
|
||||||
@click="changeData(item.id)"
|
|
||||||
>
|
|
||||||
{{ item.name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="category-con flex">
|
|
||||||
<div class="name muted">二级分类：</div>
|
|
||||||
<div class="category-list flex flex-wrap lighter">
|
|
||||||
<div
|
|
||||||
:class="['item line1', { active: twoIndex === '' }]"
|
|
||||||
@click="clickAllTwo"
|
|
||||||
>
|
|
||||||
全部
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
:class="[
|
|
||||||
'item line1',
|
|
||||||
{ active: twoIndex === index },
|
|
||||||
]"
|
|
||||||
v-for="(item, index) in categoryTwo"
|
|
||||||
:key="index"
|
|
||||||
@click="changeData(item.id)"
|
|
||||||
>
|
|
||||||
{{ item.name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="category-con flex">
|
|
||||||
<div class="name muted">三级分类：</div>
|
|
||||||
<div class="category-list flex flex-wrap lighter">
|
|
||||||
<div
|
|
||||||
:class="[
|
|
||||||
'item line1',
|
|
||||||
{ active: threeIndex === '' },
|
|
||||||
]"
|
|
||||||
@click="clickAll"
|
|
||||||
>
|
|
||||||
全部
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
:class="[
|
|
||||||
'item line1',
|
|
||||||
{ active: threeIndex === index },
|
|
||||||
]"
|
|
||||||
v-for="(item, index) in categoryThree"
|
|
||||||
:key="index"
|
|
||||||
@click="changeData(item.id)"
|
|
||||||
>
|
|
||||||
{{ item.name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="sort flex bg-white">
|
|
||||||
<div class="title muted">排序方式：</div>
|
|
||||||
<div class="sort-name m-l-16 flex lighter">
|
|
||||||
<div
|
|
||||||
:class="['item', { active: sortType == '' }]"
|
|
||||||
@click="changeSortType('')"
|
|
||||||
>
|
|
||||||
综合
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
:class="['item', { active: sortType == 'price' }]"
|
|
||||||
@click="changeSortType('price')"
|
|
||||||
>
|
|
||||||
价格
|
|
||||||
<i
|
|
||||||
v-show="priceSort == 'desc'"
|
|
||||||
class="el-icon-arrow-down"
|
|
||||||
></i>
|
|
||||||
<i
|
|
||||||
v-show="priceSort == 'asc'"
|
|
||||||
class="el-icon-arrow-up"
|
|
||||||
></i>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
:class="['item', { active: sortType == 'sales_sum' }]"
|
|
||||||
@click="changeSortType('sales_sum')"
|
|
||||||
>
|
|
||||||
销量
|
|
||||||
<i
|
|
||||||
v-show="saleSort == 'desc'"
|
|
||||||
class="el-icon-arrow-down"
|
|
||||||
></i>
|
|
||||||
<i
|
|
||||||
v-show="saleSort == 'asc'"
|
|
||||||
class="el-icon-arrow-up"
|
|
||||||
></i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
:class="['item', { active: sortType == 'brand' && brandList.length}]"
|
|
||||||
@click="changeSortType('brand')"
|
|
||||||
>
|
|
||||||
品牌
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 品牌 -->
|
|
||||||
<div class="sort flex bg-white" v-show="sortType == 'brand' && brandList.length > 0">
|
|
||||||
<div class="category-con flex" style="padding-top: 0;">
|
|
||||||
<div class="name muted">品牌：</div>
|
|
||||||
<div class="category-list flex flex-wrap lighter">
|
|
||||||
<div
|
|
||||||
:class="['item', { active: brandIndex == index }]"
|
|
||||||
@click="getBrandGoods(index)" v-for="(item,index) in brandList" :key="index"
|
|
||||||
>
|
|
||||||
{{ item.name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div v-if="isHasGoods" class="goods-list">
|
|
||||||
<goods-list :list="goodsList" />
|
|
||||||
<div
|
|
||||||
class="pagination flex row-center"
|
|
||||||
style="padding-bottom: 38px"
|
|
||||||
v-if="count"
|
|
||||||
>
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
hide-on-single-page
|
|
||||||
layout="prev, pager, next"
|
|
||||||
:total="count"
|
|
||||||
prev-text="上一页"
|
|
||||||
next-text="下一页"
|
|
||||||
:page-size="20"
|
|
||||||
@current-change="changePage"
|
|
||||||
>
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<null-data
|
|
||||||
v-else
|
|
||||||
:img="require('@/static/images/goods_null.png')"
|
|
||||||
text="暂无商品~"
|
|
||||||
></null-data>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { trottle } from '~/utils/tools'
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: 'icon',
|
|
||||||
type: 'image/x-icon',
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watchQuery: true,
|
|
||||||
async asyncData({ query, $get }) {
|
|
||||||
let { data } = await $get('pc/category')
|
|
||||||
return {
|
|
||||||
categoryList: data,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
count: 0,
|
|
||||||
oneIndex: 0,
|
|
||||||
twoIndex: '',
|
|
||||||
threeIndex: '',
|
|
||||||
brandIndex:-1,
|
|
||||||
categoryOne: [],
|
|
||||||
categoryTwo: [],
|
|
||||||
categoryThree: [],
|
|
||||||
sortType: '',
|
|
||||||
saleSort: 'desc',
|
|
||||||
priceSort: 'desc',
|
|
||||||
brandSort:'desc',
|
|
||||||
page: '',
|
|
||||||
goodsList: [],
|
|
||||||
cateId: 0,
|
|
||||||
isHasGoods: true,
|
|
||||||
brandList:[],//品牌列表
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.changeSortType = trottle(this.changeSortType, 500, this)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changeData(id) {
|
|
||||||
const { categoryList } = this
|
|
||||||
this.setIndex(id)
|
|
||||||
this.categoryOne = categoryList
|
|
||||||
this.categoryTwo = categoryList[this.oneIndex]
|
|
||||||
? categoryList[this.oneIndex].sons
|
|
||||||
: []
|
|
||||||
|
|
||||||
this.categoryThree = this.categoryTwo[this.twoIndex]
|
|
||||||
? this.categoryTwo[this.twoIndex].sons
|
|
||||||
: []
|
|
||||||
|
|
||||||
this.setCateId(id);
|
|
||||||
this.getGoods();
|
|
||||||
this.brandIndex = '-1';
|
|
||||||
this.sortType = '';
|
|
||||||
this.brandList = [];
|
|
||||||
},
|
|
||||||
setCateId(id) {
|
|
||||||
if (
|
|
||||||
this.twoIndex == '' &&
|
|
||||||
this.threeIndex == '' &&
|
|
||||||
this.oneIndex !== ''
|
|
||||||
) {
|
|
||||||
this.cateId = this.categoryOne[this.oneIndex].id
|
|
||||||
}
|
|
||||||
if (this.threeIndex == '' && this.twoIndex !== '') {
|
|
||||||
this.cateId = this.categoryTwo[this.twoIndex].id
|
|
||||||
}
|
|
||||||
if (id) {
|
|
||||||
this.cateId = id
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setIndex(id) {
|
|
||||||
const { categoryList } = this
|
|
||||||
categoryList.some((oitem, oindex) => {
|
|
||||||
if (oitem.id === id) {
|
|
||||||
this.oneIndex = oindex
|
|
||||||
this.twoIndex = ''
|
|
||||||
this.threeIndex = ''
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
oitem.sons &&
|
|
||||||
oitem.sons.some((witem, windex) => {
|
|
||||||
if (witem.id === id) {
|
|
||||||
this.oneIndex = oindex
|
|
||||||
this.twoIndex = windex
|
|
||||||
this.threeIndex = ''
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
witem.sons &&
|
|
||||||
witem.sons.some((titem, tindex) => {
|
|
||||||
if (titem.id === id) {
|
|
||||||
this.oneIndex = oindex
|
|
||||||
this.twoIndex = windex
|
|
||||||
this.threeIndex = tindex
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
)
|
|
||||||
})
|
|
||||||
)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
clickAllTwo() {
|
|
||||||
this.twoIndex = ''
|
|
||||||
this.threeIndex = ''
|
|
||||||
this.changeData()
|
|
||||||
},
|
|
||||||
clickAll() {
|
|
||||||
this.threeIndex = ''
|
|
||||||
this.changeData()
|
|
||||||
},
|
|
||||||
changeSortType(type) {
|
|
||||||
this.sortType = type
|
|
||||||
switch (type) {
|
|
||||||
case 'price':
|
|
||||||
if (this.priceSort == 'asc') {
|
|
||||||
this.priceSort = 'desc'
|
|
||||||
} else if (this.priceSort == 'desc') {
|
|
||||||
this.priceSort = 'asc'
|
|
||||||
}
|
|
||||||
break
|
|
||||||
case 'sales_sum':
|
|
||||||
if (this.saleSort == 'asc') {
|
|
||||||
this.saleSort = 'desc'
|
|
||||||
} else if (this.saleSort == 'desc') {
|
|
||||||
this.saleSort = 'asc'
|
|
||||||
}
|
|
||||||
break
|
|
||||||
case 'brand':
|
|
||||||
if (this.brandSort == 'asc') {
|
|
||||||
this.brandSort = 'desc'
|
|
||||||
} else if (this.brandSort == 'desc') {
|
|
||||||
this.brandSort = 'asc'
|
|
||||||
}
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
if(this.sortType == 'brand') {
|
|
||||||
this.getBrand() //获取品牌
|
|
||||||
}else {
|
|
||||||
this.getGoods()
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
changePage(current) {
|
|
||||||
this.page = current
|
|
||||||
this.getGoods()
|
|
||||||
},
|
|
||||||
async getGoods() {
|
|
||||||
const { priceSort, sortType, saleSort } = this
|
|
||||||
const params = {
|
|
||||||
page_size: 20,
|
|
||||||
page_no: this.page,
|
|
||||||
platform_cate_id: this.cateId,
|
|
||||||
}
|
|
||||||
switch (sortType) {
|
|
||||||
case 'price':
|
|
||||||
params.sort_by_price = priceSort
|
|
||||||
break
|
|
||||||
case 'sales_sum':
|
|
||||||
params.sort_by_sales = saleSort
|
|
||||||
break
|
|
||||||
}
|
|
||||||
if(this.brandIndex >= 0) {
|
|
||||||
params.brand_id = this.brandList[this.brandIndex].brand_id;
|
|
||||||
}
|
|
||||||
const {
|
|
||||||
data: { lists, count },
|
|
||||||
} = await this.$get('goods/getGoodsList', {
|
|
||||||
params,
|
|
||||||
})
|
|
||||||
this.goodsList = lists
|
|
||||||
if (!lists.length) {
|
|
||||||
this.isHasGoods = false
|
|
||||||
} else {
|
|
||||||
this.isHasGoods = true
|
|
||||||
}
|
|
||||||
this.count = count
|
|
||||||
},
|
|
||||||
// 获取品牌
|
|
||||||
async getBrand() {
|
|
||||||
const params = {
|
|
||||||
page_size: 20,
|
|
||||||
page_no: this.page,
|
|
||||||
cate_id: this.cateId,
|
|
||||||
}
|
|
||||||
|
|
||||||
const {
|
|
||||||
data
|
|
||||||
} = await this.$get('goods/getBrandListByCateId', {
|
|
||||||
params,
|
|
||||||
})
|
|
||||||
this.brandList = data
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取品牌商品列表
|
|
||||||
getBrandGoods(index) {
|
|
||||||
this.brandIndex = index;
|
|
||||||
this.getGoods();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
categoryList: {
|
|
||||||
immediate: true,
|
|
||||||
handler(value) {
|
|
||||||
const { id } = this.$route.query
|
|
||||||
this.changeData(Number(id))
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.category {
|
|
||||||
padding: 16px 0;
|
|
||||||
.category-hd {
|
|
||||||
.category-wrap {
|
|
||||||
padding: 0 16px;
|
|
||||||
}
|
|
||||||
.category-con {
|
|
||||||
border-bottom: 1px dashed #e5e5e5;
|
|
||||||
align-items: flex-start;
|
|
||||||
padding-top: 16px;
|
|
||||||
word-wrap: break-word;
|
|
||||||
.name {
|
|
||||||
flex: none;
|
|
||||||
}
|
|
||||||
.item {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
width: 140px;
|
|
||||||
margin-left: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
&.active {
|
|
||||||
color: $--color-primary;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
color: $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sort {
|
|
||||||
padding: 15px 16px;
|
|
||||||
.sort-name {
|
|
||||||
.item {
|
|
||||||
margin-right: 30px;
|
|
||||||
cursor: pointer;
|
|
||||||
&.active {
|
|
||||||
color: $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-list {
|
|
||||||
border-top: 1px dashed #e5e5e5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-list {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,486 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="confirm-order">
|
|
||||||
<!-- 配送方式 -->
|
|
||||||
<div class="order-hd bg-white m-b-16">
|
|
||||||
<!-- 快递配送 -->
|
|
||||||
<div>
|
|
||||||
<div class="title lg">收货地址</div>
|
|
||||||
<div class="address flex row-between">
|
|
||||||
<div class="address-con" v-show="address.contact">
|
|
||||||
<div>
|
|
||||||
<span class="weight-500">{{ address.contact }}</span>
|
|
||||||
{{ address.telephone }}
|
|
||||||
<el-tag size="mini" type="warning" effect="dark" v-if="address.is_default">默认</el-tag>
|
|
||||||
</div>
|
|
||||||
<div class="lighter m-t-8">
|
|
||||||
{{ address.province }} {{ address.city }}
|
|
||||||
{{ address.district }}
|
|
||||||
{{ address.address }}
|
|
||||||
</div>
|
|
||||||
<div class="oprate primary flex">
|
|
||||||
<div class="m-r-16" @click="editAddress(address.id)">
|
|
||||||
修改
|
|
||||||
</div>
|
|
||||||
<div @click="showAddress = true">更换地址</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="address-add flex row-center" @click="editAddress('')">
|
|
||||||
+ 添加地址
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="order-con bg-white">
|
|
||||||
<div class="goods m-b-16">
|
|
||||||
<div class="title lg">商品明细</div>
|
|
||||||
<div class="goods-hd flex lighter">
|
|
||||||
<div class="info text-center">商品信息</div>
|
|
||||||
<div class="price text-center">商品价格</div>
|
|
||||||
<div class="num text-center">数量</div>
|
|
||||||
<div class="money text-center">合计</div>
|
|
||||||
</div>
|
|
||||||
<div class="shop">
|
|
||||||
<div class="shop-item flex-col flex-1" v-for="(item, index) in orderInfo.shop" :key="index">
|
|
||||||
<div class="shop-name p-l-10 m-b-10 flex flex-1" style="width: 1140px;">
|
|
||||||
{{ item.shop_name }}
|
|
||||||
</div>
|
|
||||||
<div class="goods-list flex flex-wrap flex-1" style="width: 1140px;">
|
|
||||||
<div :class="['flex', 'item']" v-for="(gitem, gindex) in item.goods" :key="gindex">
|
|
||||||
<div class="info flex">
|
|
||||||
<div class="pictrue flex-none">
|
|
||||||
<el-image :src="gitem.image"></el-image>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="name line-2">
|
|
||||||
{{ gitem.name }}
|
|
||||||
</div>
|
|
||||||
<div class="muted m-t-10 xs">
|
|
||||||
{{ gitem.spec_value }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="price" style="padding-left: 70px;">
|
|
||||||
<price-formate :price="gitem.price" />
|
|
||||||
<div class="flex m-t-6" v-if="gitem.member_amount">
|
|
||||||
<span class="xs primary">会员价:</span>
|
|
||||||
<price-formate :price="gitem.member_amount" color="#FF0808" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="num text-center">
|
|
||||||
{{ gitem.num }}
|
|
||||||
</div>
|
|
||||||
<div class="money flex row-center">
|
|
||||||
<price-formate :price="gitem.sum_price" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-1 col-top m-t-20 row-between" style="width: 1140px;">
|
|
||||||
<div class="flex flex-1">
|
|
||||||
<div class="remark flex flex-1 m-r-40">
|
|
||||||
<div style="width: 70px;">买家备注：</div>
|
|
||||||
<div class="textarea" style="width: 280px">
|
|
||||||
<el-input size="small" v-model="userRemark[index].remark"
|
|
||||||
placeholder="选填，给商家备注留言，100字以内" resize="none">
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="coupon flex flex-1 m-r-10" v-if="orderInfo.order_type == 0">
|
|
||||||
<div>店铺优惠：</div>
|
|
||||||
<el-select size="small" v-model="selecteCoupon[index]" placeholder="请选择"
|
|
||||||
@change="orderBuy">
|
|
||||||
<el-option label="不使用" :value="0">
|
|
||||||
</el-option>
|
|
||||||
<el-option v-for="item in item.coupon_list" :key="item.value"
|
|
||||||
:label="item.coupon_name" :value="item.id">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
<div class="remark flex flex-1">
|
|
||||||
<div>配送方式：</div>
|
|
||||||
<span>{{ item.delivery_type_text }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-col">
|
|
||||||
<div class="flex coupon m-b-10 flex-1 row-right" v-if="item.discount_amount">
|
|
||||||
<div>优惠：</div>
|
|
||||||
<div>-￥{{ item.discount_amount }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex remark m-b-10 flex-1 row-right">
|
|
||||||
<div>运费：</div>
|
|
||||||
<div>￥{{ item.shipping_price }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex m-b-10 flex-1 row-right">
|
|
||||||
<span class="m-r-10">店铺合计</span>
|
|
||||||
<price-formate color="#FF2C3C" :price="item.total_amount" :firstSize="17"
|
|
||||||
:subscriptSize="12" :secondSize="12" />
|
|
||||||
</div>
|
|
||||||
<div class="flex m-b-20 flex-1 row-right">
|
|
||||||
<a target="_blank" :href="download_contract.domain + '/' + download_contract.path"><el-button type="success" icon="el-icon-download">点击下载合同</el-button></a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="order-footer flex bg-white" style="justify-content: space-between;">
|
|
||||||
<div class="front flex">
|
|
||||||
<span>开启订单前置：</span>
|
|
||||||
<el-switch v-model="front" @change="front_change"></el-switch>
|
|
||||||
</div>
|
|
||||||
<div class="flex col-center">
|
|
||||||
<div class="money flex m-r-16">
|
|
||||||
<div class="lighter">实付金额：</div>
|
|
||||||
<div class="primary" style="font-size: 20px">
|
|
||||||
<span class="xxs">¥</span>{{ orderInfo.total_amount }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="white bg-primary lg btn flex row-center" @click="submitOrder">
|
|
||||||
去结算
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<address-add v-model="showAddressAdd" :aid="editId" @success="orderBuy" />
|
|
||||||
<address-list v-model="showAddress" @confirm="changeAddress" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapActions } from 'vuex'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: 'icon',
|
|
||||||
type: 'image/x-icon',
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async asyncData({ query, $post, $get }) {
|
|
||||||
let { goods, carts } = JSON.parse(decodeURIComponent(query.data))
|
|
||||||
carts = carts || []
|
|
||||||
const asyncData = {}
|
|
||||||
await $post('order/settlement', {
|
|
||||||
goods: JSON.stringify(goods),
|
|
||||||
cart_id: carts.join(),
|
|
||||||
}).then(({ code, data, msg }) => {
|
|
||||||
if (code == 1) {
|
|
||||||
asyncData.orderInfo = data
|
|
||||||
asyncData.address = data?.address
|
|
||||||
asyncData.userRemark = data.shop.map((item) => ({
|
|
||||||
shop_id: item.shop_id,
|
|
||||||
remark: '',
|
|
||||||
}))
|
|
||||||
asyncData.selecteCoupon = data.shop.map(() => '')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
await $post('order/contractDownload', {}).then(({ code, data, msg }) => {
|
|
||||||
if (code == 1) {
|
|
||||||
asyncData.download_contract = data;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return asyncData
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
orderInfo: {},
|
|
||||||
address: {},
|
|
||||||
carts: [],
|
|
||||||
active: 0,
|
|
||||||
userRemark: [],
|
|
||||||
selecteCoupon: [],
|
|
||||||
showAddress: false,
|
|
||||||
showAddressAdd: false,
|
|
||||||
addressId: '',
|
|
||||||
editId: '',
|
|
||||||
isEdit: false,
|
|
||||||
shopPage: 1,
|
|
||||||
front:false,
|
|
||||||
is_frontend:0,
|
|
||||||
download_contract:{} //下载合同地址
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
address: {
|
|
||||||
handler(val) {
|
|
||||||
this.addressId = val.id
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions(['getPublicData']),
|
|
||||||
|
|
||||||
editAddress(id) {
|
|
||||||
this.editId = id
|
|
||||||
this.showAddressAdd = true
|
|
||||||
},
|
|
||||||
|
|
||||||
changeAddress(val) {
|
|
||||||
this.addressId = val
|
|
||||||
this.orderBuy()
|
|
||||||
},
|
|
||||||
|
|
||||||
front_change(e) {
|
|
||||||
if(e) {
|
|
||||||
this.is_frontend = 1
|
|
||||||
}else {
|
|
||||||
this.is_frontend = 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async submitOrder() {
|
|
||||||
const { carts, goods, selecteCoupon } = this
|
|
||||||
const { orderInfo: { shop } } = this
|
|
||||||
const delivery_type = shop[0]?.delivery_type
|
|
||||||
const submitObj = {
|
|
||||||
goods: JSON.stringify(goods),
|
|
||||||
address_id: this.addressId,
|
|
||||||
is_frontend:this.is_frontend,
|
|
||||||
cart_id: carts.join(),
|
|
||||||
coupon_id: selecteCoupon.filter((item) => item),
|
|
||||||
delivery_type,
|
|
||||||
remark: this.userRemark.length
|
|
||||||
? JSON.stringify(this.userRemark)
|
|
||||||
: '',
|
|
||||||
}
|
|
||||||
const { data, code } = await this.$post(
|
|
||||||
'order/submit_order',
|
|
||||||
submitObj
|
|
||||||
)
|
|
||||||
if (code == 1) {
|
|
||||||
if(this.is_frontend == 1) {
|
|
||||||
this.$router.replace({
|
|
||||||
path: '/user/order',
|
|
||||||
query: {
|
|
||||||
is_frontend: this.is_frontend
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}else {
|
|
||||||
this.getPublicData()
|
|
||||||
this.$router.replace({
|
|
||||||
path: '/payment',
|
|
||||||
query: {
|
|
||||||
id: data.trade_id,
|
|
||||||
from: data.type,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async orderBuy() {
|
|
||||||
console.log(this.selecteCoupon)
|
|
||||||
const { data, code } = await this.$post('order/settlement', {
|
|
||||||
goods: JSON.stringify(this.goods),
|
|
||||||
address_id: this.addressId,
|
|
||||||
cart_id: this.carts.join(),
|
|
||||||
coupon_id: this.selecteCoupon.filter((item) => item),
|
|
||||||
})
|
|
||||||
|
|
||||||
if (code == 1) {
|
|
||||||
let { address } = data
|
|
||||||
this.orderInfo = data
|
|
||||||
this.address = address
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
const { goods, type, carts } = JSON.parse(
|
|
||||||
decodeURIComponent(this.$route.query.data)
|
|
||||||
)
|
|
||||||
|
|
||||||
this.goods = goods
|
|
||||||
this.type = type
|
|
||||||
this.carts = carts || []
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.confirm-order {
|
|
||||||
padding: 16px 0;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
padding: 12px 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
>i {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact {
|
|
||||||
padding: 10px 20px 22px;
|
|
||||||
|
|
||||||
&-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 36px;
|
|
||||||
|
|
||||||
&-label {
|
|
||||||
width: 72px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-hd {
|
|
||||||
.address {
|
|
||||||
padding: 10px 20px 22px;
|
|
||||||
|
|
||||||
.address-con {
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 16px 20px;
|
|
||||||
width: 800px;
|
|
||||||
height: 100px;
|
|
||||||
padding-right: 150px;
|
|
||||||
border: 1px solid $--color-primary;
|
|
||||||
border-radius: 2px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.oprate {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.oprate {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
bottom: 9px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.address-add {
|
|
||||||
cursor: pointer;
|
|
||||||
width: 320px;
|
|
||||||
height: 100px;
|
|
||||||
border: 1px dashed $--border-color-base;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-con {
|
|
||||||
.shop {
|
|
||||||
padding: 0 20px;
|
|
||||||
|
|
||||||
.shop-name {
|
|
||||||
height: 40px;
|
|
||||||
background-color: #f6f6f6;
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods {
|
|
||||||
border-bottom: 1px dashed $--border-color-base;
|
|
||||||
|
|
||||||
.goods-hd {
|
|
||||||
height: 40px;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-list {
|
|
||||||
.item {
|
|
||||||
padding: 10px 0;
|
|
||||||
|
|
||||||
&-disabled {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
z-index: 9;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
content: '';
|
|
||||||
background-color: rgba($color: #ffffff,
|
|
||||||
$alpha: 0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
width: 500px;
|
|
||||||
|
|
||||||
.pictrue {
|
|
||||||
margin-right: 10px;
|
|
||||||
|
|
||||||
.el-image {
|
|
||||||
width: 72px;
|
|
||||||
height: 72px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delivery-support {
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 4px 15px;
|
|
||||||
border-radius: 60px;
|
|
||||||
margin-left: 20px;
|
|
||||||
background-color: #f4f4f4;
|
|
||||||
color: #666666;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.price {
|
|
||||||
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.num {
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.money {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
.textarea {
|
|
||||||
margin: 0 20px;
|
|
||||||
width: 1000px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.integral {
|
|
||||||
.check-box {
|
|
||||||
padding: 0 20px 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-footer {
|
|
||||||
margin-top: 2px;
|
|
||||||
padding: 25px 20px;
|
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
width: 152px;
|
|
||||||
height: 44px;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,255 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="news-details-container mt16">
|
|
||||||
<div class="nav-container flex">
|
|
||||||
<div class="nr" style="width: 70px">当前位置：</div>
|
|
||||||
<el-breadcrumb style="flex: 1;" separator="/" class="flex">
|
|
||||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item>
|
|
||||||
<nuxt-link to="/demand_list">我的需求</nuxt-link>
|
|
||||||
</el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item class="line1 demand-title">{{detailsObj.name}}</el-breadcrumb-item>
|
|
||||||
</el-breadcrumb>
|
|
||||||
</div>
|
|
||||||
<div class="content-box">
|
|
||||||
<div class="news-detail-box m-r-16">
|
|
||||||
<div class="content-header bg-white">
|
|
||||||
<div class="news-detail-title">
|
|
||||||
{{detailsObj.name}}
|
|
||||||
</div>
|
|
||||||
<div class="sign"><el-button type="primary" icon="el-icon-s-promotion" @click="dialogFormVisible = true">立即报名</el-button></div>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="sm muted">
|
|
||||||
发布时间：{{detailsObj.create_time}}
|
|
||||||
</div>
|
|
||||||
<div class="flex" style="margin-left: 40px">
|
|
||||||
<i class="el-icon-s-promotion muted"></i>
|
|
||||||
<div class="muted" style="margin-left: 3px;">已报名<span style="margin:0 5px;color: #f00;">{{detailsObj.reports_count}}</span>人</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content-html-box bg-white">
|
|
||||||
<div v-html="detailsObj.content"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 填写表单 -->
|
|
||||||
<el-dialog title="立即报名" :visible.sync="dialogFormVisible">
|
|
||||||
<el-form :model="form" :rules="rules" ref="form">
|
|
||||||
<el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
|
|
||||||
<el-input v-model="form.name" autocomplete="off"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="电话" prop="phone" :label-width="formLabelWidth">
|
|
||||||
<el-input v-model="form.phone" autocomplete="off"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="公司名称" prop="company" :label-width="formLabelWidth">
|
|
||||||
<el-input v-model="form.company" autocomplete="off"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="报价" prop="price" :label-width="formLabelWidth">
|
|
||||||
<el-input v-model="form.price" autocomplete="off"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="其他" :label-width="formLabelWidth">
|
|
||||||
<el-input type="textarea" v-model="form.remarks" autocomplete="off"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div slot="footer" class="dialog-footer">
|
|
||||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
||||||
<el-button type="primary" @click="submitForm('form')">确 定</el-button>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon
|
|
||||||
}],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
async asyncData({
|
|
||||||
$get,
|
|
||||||
$post,
|
|
||||||
query
|
|
||||||
}) {
|
|
||||||
let detailsObj = {};
|
|
||||||
let demand_id = '';
|
|
||||||
let recommend_list = [];
|
|
||||||
demand_id = query.id
|
|
||||||
let res = await $get("demand/detail", {
|
|
||||||
params: {
|
|
||||||
id: query.id,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (res.code == 1) {
|
|
||||||
detailsObj = res.data;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
detailsObj,
|
|
||||||
demand_id
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watchQuery: ['id'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
demand_id:'',
|
|
||||||
dialogFormVisible: false,
|
|
||||||
form: {
|
|
||||||
name: '',
|
|
||||||
phone: '',
|
|
||||||
company: '',
|
|
||||||
price: '',
|
|
||||||
remarks: '',
|
|
||||||
},
|
|
||||||
formLabelWidth: '120px',
|
|
||||||
rules: {
|
|
||||||
name: [
|
|
||||||
{ required: true, message: '请输入姓名', trigger: 'blur' },
|
|
||||||
],
|
|
||||||
phone: [
|
|
||||||
{ required: true, message: '请输入电话', trigger: 'blur' },
|
|
||||||
],
|
|
||||||
company: [
|
|
||||||
{ required: true, message: '请输入公司名称', trigger: 'blur' },
|
|
||||||
],
|
|
||||||
price: [
|
|
||||||
{ required: true, message: '请输入报价', trigger: 'blur' },
|
|
||||||
],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log('route', this.$route)
|
|
||||||
// this.getNewsDetails(this.$route.query.id);
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async getNewsDetails(id) {
|
|
||||||
let res = await this.$get("help/detail", {params: {id: id, client: 2}});
|
|
||||||
if(res.code == 1) {
|
|
||||||
this.detailsObj = res.data;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toOther(id) {
|
|
||||||
this.$router.push('/help_center/help_center_detail?id=' + id)
|
|
||||||
},
|
|
||||||
// 表单提交
|
|
||||||
submitForm(form) {
|
|
||||||
console.log(this.demand_id)
|
|
||||||
this.$refs[form].validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
console.log(this.form)
|
|
||||||
let params = this.form;
|
|
||||||
params.demand_id = this.demand_id;
|
|
||||||
this.$post("demand/report", params).then(res=>{
|
|
||||||
if(res.code == 1) {
|
|
||||||
this.dialogFormVisible = false,
|
|
||||||
this.$message({
|
|
||||||
message: '报名成功',
|
|
||||||
type: 'success'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.news-details-container {
|
|
||||||
.nav-container {
|
|
||||||
padding: 15px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-box {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
.news-detail-box {
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.content-header {
|
|
||||||
margin: 0px 20px;
|
|
||||||
padding: 20px 0px;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
position: relative;
|
|
||||||
.news-detail-title {
|
|
||||||
color: #222;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
max-width: 860px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-html-box {
|
|
||||||
padding: 24px 20px;
|
|
||||||
|
|
||||||
&>div {
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
::v-deep img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-box {
|
|
||||||
width: 264px;
|
|
||||||
|
|
||||||
.recommend-box-header {
|
|
||||||
padding: 15px 10px;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
|
|
||||||
.primary-line {
|
|
||||||
margin-right: 10px;
|
|
||||||
background-color: $--color-primary;
|
|
||||||
width: 4px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-box-content {
|
|
||||||
.recommend-list-container {
|
|
||||||
.recommend-list-item {
|
|
||||||
padding: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.goods-info {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.demand-title {
|
|
||||||
max-width: 900px;
|
|
||||||
line-height: 30px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 1;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sign {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 30px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,207 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="help-center-container">
|
|
||||||
<div class="help-center-box">
|
|
||||||
<div class="article-lists-container m-l-16 bg-white" style="width: 100%;">
|
|
||||||
<div v-show="!dataNull">
|
|
||||||
<div>
|
|
||||||
<nuxt-link :to="'/demand_list/demand_detail?id=' + item.id"
|
|
||||||
class="article-item flex-col bg-white" v-for="(item) in articleList" :key="item.id">
|
|
||||||
<div class="lg article-name line2" style="font-weight: bold;">{{item.name}}</div>
|
|
||||||
<div class="lighter article-content" v-html="item.content"></div>
|
|
||||||
<div class="flex row-between" style="margin-top:16px;">
|
|
||||||
<div class="sm muted">发布时间：{{item.create_time}}</div>
|
|
||||||
<div class="flex m-l-16">
|
|
||||||
<i class="el-icon-s-promotion muted"></i>
|
|
||||||
<div class="muted" style="margin-left: 3px;">已报名<span style="margin:0 5px;color: #f00;">{{item.reports_count}}</span>人</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sign"><el-button type="primary" icon="el-icon-s-promotion">查看报名</el-button></div>
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
<div class="help-center-pagination row-center">
|
|
||||||
<el-pagination background hide-on-single-page layout="prev, pager, next" :total="count"
|
|
||||||
prev-text="上一页" next-text="下一页" :page-size="10" @current-change="changePage" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="data-null column-center" v-show="dataNull">
|
|
||||||
<img style="width: 150px;height: 150px;" src="~/static/images/news_null.png" />
|
|
||||||
<div class="xs muted">
|
|
||||||
暂无消息记录～
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon
|
|
||||||
}],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
async asyncData({
|
|
||||||
$get,
|
|
||||||
$post
|
|
||||||
}) {
|
|
||||||
let currentId = 0;
|
|
||||||
let articleList = [];
|
|
||||||
let count = 0;
|
|
||||||
let dataNull = true;
|
|
||||||
let listsRes = await $get("demand/lists", {
|
|
||||||
params: {
|
|
||||||
page_size: 1,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (listsRes.code == 1) {
|
|
||||||
articleList = listsRes.data.list;
|
|
||||||
count = listsRes.data.count
|
|
||||||
if (count <= 0) {
|
|
||||||
dataNull = true;
|
|
||||||
} else {
|
|
||||||
dataNull = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
articleList,
|
|
||||||
count,
|
|
||||||
dataNull,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
articleList: [],
|
|
||||||
count: 0,
|
|
||||||
swiperOptions: {
|
|
||||||
width: 1180,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log(this.articleList, 'articleList')
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async changePage(current) {
|
|
||||||
let res = await this.$get("demand/lists", {
|
|
||||||
params: {
|
|
||||||
cid: this.currentId,
|
|
||||||
page_no: current,
|
|
||||||
page_size: 10
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.articleList = res.data.list;
|
|
||||||
if (this.articleList.length <= 0) {
|
|
||||||
dataNull = true;
|
|
||||||
} else {
|
|
||||||
dataNull = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
changeList(id) {
|
|
||||||
this.currentId = id;
|
|
||||||
this.changePage(1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.help-center-container {
|
|
||||||
.help-center-banner {
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-center-box {
|
|
||||||
margin-top: 16px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
.help-center-aside {
|
|
||||||
width: 160px;
|
|
||||||
// min-height: 635px;
|
|
||||||
padding-top: 20px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
padding: 20px 30px;
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
li {
|
|
||||||
margin: 10px 0px;
|
|
||||||
padding: 0px 30px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-item {
|
|
||||||
padding-left: 27px;
|
|
||||||
color: $--color-primary;
|
|
||||||
border-left: 3px solid $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-lists-container {
|
|
||||||
width: 1004px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.article-item {
|
|
||||||
margin: 0px 20px;
|
|
||||||
padding: 15px 0px;
|
|
||||||
border-bottom: 1px solid #E5E5E5;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
.article-name {
|
|
||||||
margin-bottom: 11px;
|
|
||||||
margin-top: 13px;
|
|
||||||
max-width: 720px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-center-pagination {
|
|
||||||
padding-top: 38px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-null {
|
|
||||||
padding-top: 150px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-pagination.is-background .btn-prev {
|
|
||||||
background: #fff;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-pagination.is-background .btn-next {
|
|
||||||
background: #fff;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-pagination.is-background .el-pager li {
|
|
||||||
background: #fff;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-content {
|
|
||||||
min-height: 50px;
|
|
||||||
max-height: 140px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sign {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 30px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,86 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="get-coupons">
|
|
||||||
<div class="help-center-banner">
|
|
||||||
<client-only>
|
|
||||||
<swiper ref="mySwiper" :options="swiperOptions">
|
|
||||||
<swiper-slide class="swiper-item" v-for="(item, index) in bannerList" :key="index">
|
|
||||||
<ad-item :item="item"></ad-item>
|
|
||||||
</swiper-slide>
|
|
||||||
</swiper>
|
|
||||||
</client-only>
|
|
||||||
</div>
|
|
||||||
<div class="coupons bg-white">
|
|
||||||
<div class="title weight-500">每日领券</div>
|
|
||||||
<div class="list">
|
|
||||||
<coupons-list v-if="couponList.length" :list="couponList" :type="3" @reflash="getCouponsList" />
|
|
||||||
<null-data v-else :img="require('~/static/images/coupon_null.png')" text="暂无优惠券~"></null-data>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon
|
|
||||||
}],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
async asyncData({
|
|
||||||
query,
|
|
||||||
$get
|
|
||||||
}) {
|
|
||||||
const {
|
|
||||||
data
|
|
||||||
} = await $get("coupon/getCouponList");
|
|
||||||
console.log('datafadadaasd', data)
|
|
||||||
|
|
||||||
const { data: banner }= await $get("ad_content/lists", { params: { pid: 27, terminal: 2 } });
|
|
||||||
|
|
||||||
return {
|
|
||||||
couponList: data.lists,
|
|
||||||
bannerList: banner,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
swiperOptions: {
|
|
||||||
width: 1180,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
async getCouponsList() {
|
|
||||||
const {
|
|
||||||
data,
|
|
||||||
code
|
|
||||||
} = await this.$get("coupon/getCouponList");
|
|
||||||
if (code == 1) {
|
|
||||||
this.couponList = data.lists;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.get-coupons {
|
|
||||||
padding: 16px 0;
|
|
||||||
|
|
||||||
.coupons {
|
|
||||||
padding: 0 14px;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
padding: 16px 18px;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,867 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="goods-details" v-if="goodsDetails.id">
|
|
||||||
|
|
||||||
<div class="goods-info flex col-stretch">
|
|
||||||
<div class="goods-swiper m-r-16 bg-white flex-col" v-if="goodsImage != ''">
|
|
||||||
<el-image class="current-img" :preview-src-list="goodsImage.map((item) => item.uri)"
|
|
||||||
:src="goodsImage[swiperIndex].uri"></el-image>
|
|
||||||
<client-only>
|
|
||||||
<swiper class="swiper" ref="mySwiper" :options="swiperOptions">
|
|
||||||
<swiper-slide :class="{
|
|
||||||
'swiper-item': true,
|
|
||||||
active: index === swiperIndex,
|
|
||||||
}" v-for="(item, index) in goodsImage" :key="index">
|
|
||||||
<div style="width: 100%; height: 100%" @mouseover="swiperIndex = index">
|
|
||||||
<el-image style="width: 100%; height: 100%" :src="item.uri"></el-image>
|
|
||||||
</div>
|
|
||||||
</swiper-slide>
|
|
||||||
<div class="swiper-button-prev" slot="button-prev"></div>
|
|
||||||
<div class="swiper-button-next" slot="button-next"></div>
|
|
||||||
</swiper>
|
|
||||||
</client-only>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 右侧商品信息 -->
|
|
||||||
<div class="info-wrap bg-white flex-1">
|
|
||||||
<div class="name weight-500 m-b-16">
|
|
||||||
{{ goodsDetails.name }}
|
|
||||||
</div>
|
|
||||||
<!-- -->
|
|
||||||
<div class="seckill flex white" v-if="activity.type == 1">
|
|
||||||
<div class="xxl">限时秒杀</div>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="white m-r-16">距离结束还有</div>
|
|
||||||
<count-down :time="countTime" :is-slot="true" @change="onChangeDate">
|
|
||||||
<div class="flex row-center count-down xxl">
|
|
||||||
<div class="item white">{{ timeData.hours }}</div>
|
|
||||||
<div class="white" style="margin: 0 4px">:</div>
|
|
||||||
<div class="item white">{{ timeData.minutes }}</div>
|
|
||||||
<div class="white" style="margin: 0 4px">:</div>
|
|
||||||
<div class="item white">{{ timeData.seconds }}</div>
|
|
||||||
</div>
|
|
||||||
</count-down>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- -->
|
|
||||||
<!-- -->
|
|
||||||
<div class="price-wrap lighter">
|
|
||||||
<div class="flex row-between">
|
|
||||||
<div class="price">
|
|
||||||
<div class="flex" v-if="Number(checkedGoods.market_price || goodsDetails.market_price)">
|
|
||||||
{{ activity.type == 1 ? '日常价' : '原价' }}
|
|
||||||
<span class="m-l-20">
|
|
||||||
<price-formate :price="checkedGoods.market_price || goodsDetails.market_price" :weight="400" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex m-t-10">
|
|
||||||
{{ activity.type == 1 ? '秒杀价' : '价格' }}
|
|
||||||
<div class="primary m-l-20">
|
|
||||||
<price-formate :price="checkedGoods.price || goodsDetails.min_price"
|
|
||||||
:subscript-size="16" :first-size="26" :second-size="16" />
|
|
||||||
</div>
|
|
||||||
<div class="member-price m-l-10 flex xs"
|
|
||||||
v-if="activity.type != 1 && (checkedGoods.member_price || goodsDetails.member_price)">
|
|
||||||
会员价
|
|
||||||
<price-formate :price="checkedGoods.member_price || goodsDetails.member_price"
|
|
||||||
:weight="400" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="rate flex-col row-right">
|
|
||||||
<div class="primary" style="font-size: 20px">{{ comment.percent }}</div>
|
|
||||||
<div class="lighter">好评率</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- -->
|
|
||||||
|
|
||||||
<div class="sales-click flex">
|
|
||||||
<div class="flex-1">销量：{{ goodsDetails.sales_sum }}件</div>
|
|
||||||
<div class="flex-1">浏览量：{{ goodsDetails.clicks }}次</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="spec-wrap">
|
|
||||||
<div class="spec flex m-b-16" v-for="(item, index) in goodsSpec" :key="index">
|
|
||||||
<div class="lighter spec-name">{{ item.name }}</div>
|
|
||||||
<div class="spec-list flex flex-wrap">
|
|
||||||
<div :class="[
|
|
||||||
'spec-item lighter',
|
|
||||||
{ active: specitem.checked },
|
|
||||||
]" v-for="(specitem, sindex) in item.spec_value" :key="sindex"
|
|
||||||
@click="onChoseSpecItem(item.id, specitem.id)">
|
|
||||||
{{ specitem.value }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="goods-num flex">
|
|
||||||
<div class="num lighter">数量</div>
|
|
||||||
<number-box v-model="goodsNum" :min="1" :max="checkedGoods.stock" />
|
|
||||||
<div class="m-l-10">
|
|
||||||
库存: {{ checkedGoods.stock }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="goods-btns flex lg">
|
|
||||||
<el-button type="primary" class="btn white" @click="onBuyNow">
|
|
||||||
立即购买
|
|
||||||
</el-button>
|
|
||||||
<el-button type="primary" plain class="btn addcart" @click="onAddCart"
|
|
||||||
v-if="goodsDetails.type == 0 && activity.type != 1">
|
|
||||||
加入购物车
|
|
||||||
</el-button>
|
|
||||||
<div class="btn collection flex row-center" @click="onCollectionGoods">
|
|
||||||
<img class="start-icon m-r-8" :src="
|
|
||||||
goodsDetails.is_collect
|
|
||||||
? require('~/static/images/icon_star_s.png')
|
|
||||||
: require('~/static/images/icon_star.png')
|
|
||||||
" />
|
|
||||||
<span>{{ goodsDetails.is_collect ? '取消收藏' : '收藏商品' }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="shop m-l-16 bg-white">
|
|
||||||
<div class="shop-logo flex-col col-center">
|
|
||||||
<el-image class="logo-img" :src="shop.logo"></el-image>
|
|
||||||
<nuxt-link class="m-t-10" :to="`/shop_street_detail?id=${shop.id}`">
|
|
||||||
<el-tag size="mini" v-if="shop.type == 1">自营</el-tag>
|
|
||||||
<span class="weight-500">{{ shop.name }}</span>
|
|
||||||
</nuxt-link>
|
|
||||||
<div class="xs muted m-t-10 line-5">
|
|
||||||
{{ shop.intro }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex m-t-20">
|
|
||||||
<div class="flex-1 text-center">
|
|
||||||
<div class="xxl m-b-10">{{ shop.goods_on_sale }}</div>
|
|
||||||
<div>全部商品</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 text-center">
|
|
||||||
<div class="xxl m-b-10">{{ shop.follow_num }}</div>
|
|
||||||
<div>关注人数</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-divider></el-divider>
|
|
||||||
<div class="flex xs m-b-16">
|
|
||||||
<div class="m-r-12">店铺星级</div>
|
|
||||||
<div class="m-t-5">
|
|
||||||
<el-rate v-model="shop.star" disabled> </el-rate>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex xs m-b-16">
|
|
||||||
<div class="m-r-12">店铺评分</div>
|
|
||||||
<div class="">{{ shop.score }}分</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<el-button type="primary" size="mini" @click="
|
|
||||||
$router.push(`/shop_street_detail?id=${shop.id}`)
|
|
||||||
">进入店铺</el-button>
|
|
||||||
<el-button size="mini" @click="changeShopFollow">{{
|
|
||||||
shop.shop_follow_status == 1 ? '已关注' : '关注店铺'
|
|
||||||
}}</el-button>
|
|
||||||
</div>
|
|
||||||
<el-popover placement="bottom" width="200" trigger="hover">
|
|
||||||
<div>
|
|
||||||
<el-image style="width: 100%" :src="shop.customer_image"></el-image>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div slot="reference" class="xs lighter text-center m-t-30">
|
|
||||||
<i class="el-icon-chat-dot-round nr"></i>
|
|
||||||
<span>联系客服</span>
|
|
||||||
</div>
|
|
||||||
</el-popover>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="details-wrap flex m-t-16">
|
|
||||||
<div class="details bg-white flex-1">
|
|
||||||
<el-tabs v-model="active">
|
|
||||||
<el-tab-pane label="商品详情">
|
|
||||||
<div class="details-tips" v-if="goodsDetails.custom_params.length">
|
|
||||||
<h2>产品参数</h2>
|
|
||||||
<div class="boxs">
|
|
||||||
<div class="tit" v-for="(items,index) in goodsDetails.custom_params" :key="index">
|
|
||||||
<span class="st">{{items.key}}:</span>{{items.value}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="rich-text" v-html="goodsDetails.content"></div>
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane label="商品评价">
|
|
||||||
<div class="evaluation">
|
|
||||||
<div class="evaluation-hd flex">
|
|
||||||
<div class="rate flex">
|
|
||||||
<div class="lighter m-r-8">好评率</div>
|
|
||||||
<div class="primary" style="font-size: 30px">
|
|
||||||
{{ goodsDetails.comment.percent }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="score flex">
|
|
||||||
<span class="m-r-8 lighter">评分</span>
|
|
||||||
<el-rate :value="goodsDetails.comment.goods_comment" disabled allow-half></el-rate>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="evaluation-tab flex">
|
|
||||||
<div :class="[
|
|
||||||
'item',
|
|
||||||
{ active: commentActive == item.id },
|
|
||||||
]" v-for="(item, index) in comment.comment" :key="index"
|
|
||||||
@click="commentActive = item.id">
|
|
||||||
{{ item.name }}({{ item.count }})
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<template v-for="(item, index) in comment.comment">
|
|
||||||
<comment-list v-if="commentActive == item.id" :goods-id="id" :type="item.id"
|
|
||||||
:key="index"></comment-list>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
<div class="goods-like m-l-16" v-if="shop.goods_list.length">
|
|
||||||
<div class="title bg-white flex p-l-15">店铺推荐</div>
|
|
||||||
<div class="goods-list">
|
|
||||||
<template v-for="(item, index) in shop.goods_list">
|
|
||||||
<nuxt-link :to="`/goods_details/${item.id}`" class="item bg-white m-b-16" v-if="index < 5"
|
|
||||||
:key="index">
|
|
||||||
<el-image class="goods-img" :src="item.image"></el-image>
|
|
||||||
<div class="goods-name line-2">
|
|
||||||
{{ item.name }}
|
|
||||||
</div>
|
|
||||||
<div class="price flex m-t-8">
|
|
||||||
<div class="primary m-r-8">
|
|
||||||
<price-formate :price="item.min_price" :first-size="16" />
|
|
||||||
</div>
|
|
||||||
<div class="muted sm line-through">
|
|
||||||
<price-formate :price="item.market_price" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nuxt-link>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 推荐 -->
|
|
||||||
<div class="activity-area m-t-16">
|
|
||||||
<div class="title flex row-between">
|
|
||||||
<div class="font-size-20">推荐商品</div>
|
|
||||||
</div>
|
|
||||||
<div class="active-goods flex">
|
|
||||||
<div class="goods-list flex">
|
|
||||||
<nuxt-link
|
|
||||||
class="goods-item"
|
|
||||||
:to="`/goods_details/${gitem.id}`"
|
|
||||||
v-for="(gitem, gindex) in dataRecommend"
|
|
||||||
:key="gindex"
|
|
||||||
>
|
|
||||||
<div class="goods-img">
|
|
||||||
<el-image
|
|
||||||
lazy
|
|
||||||
:src="gitem.image"
|
|
||||||
fit="cover"
|
|
||||||
alt=""
|
|
||||||
></el-image>
|
|
||||||
</div>
|
|
||||||
<div class="name line-2 m-t-10">{{ gitem.name }}</div>
|
|
||||||
<div class="price flex col-baseline m-t-10">
|
|
||||||
<div class="primary m-r-8">
|
|
||||||
<price-formate
|
|
||||||
:price="gitem.min_price"
|
|
||||||
:first-size="16"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="muted sm line-through ">
|
|
||||||
<price-formate
|
|
||||||
:price="gitem.market_price"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="muted xs m-t-10">
|
|
||||||
{{ gitem.sales_total }}人购买
|
|
||||||
</div>
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapActions } from 'vuex'
|
|
||||||
import { Message } from 'element-ui'
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: 'icon',
|
|
||||||
type: 'image/x-icon',
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async asyncData({ params, $get, app }) {
|
|
||||||
const { data: dataRecommend } = await $get('goods/getRecommendGoods',{params: {goods_id: params.id}})
|
|
||||||
const { data, code, msg } = await $get('goods/getGoodsDetail', {
|
|
||||||
params: { goods_id: params.id },
|
|
||||||
})
|
|
||||||
if (code == 0) {
|
|
||||||
setTimeout(() => app.router.back(), 1500)
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
dataRecommend: dataRecommend,
|
|
||||||
goodsDetails: data,
|
|
||||||
goodsImage: data.goods_image,
|
|
||||||
activity: data.activity,
|
|
||||||
shop: data.shop,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
goodsDetails: {},
|
|
||||||
goodsImage: [],
|
|
||||||
activity: {},
|
|
||||||
shop: {
|
|
||||||
goods_list: [],
|
|
||||||
},
|
|
||||||
swiperOptions: {
|
|
||||||
pagination: {
|
|
||||||
el: '.swiper-pagination',
|
|
||||||
clickable: true,
|
|
||||||
},
|
|
||||||
navigation: {
|
|
||||||
nextEl: '.swiper-button-next',
|
|
||||||
prevEl: '.swiper-button-prev',
|
|
||||||
},
|
|
||||||
preventClicks: true,
|
|
||||||
slidesPerView: 'auto',
|
|
||||||
},
|
|
||||||
active: '0',
|
|
||||||
commentActive: 0,
|
|
||||||
swiperIndex: 0,
|
|
||||||
checkedGoods: {},
|
|
||||||
comment: {},
|
|
||||||
goodsNum: 1,
|
|
||||||
goodsSpec: [],
|
|
||||||
id: '',
|
|
||||||
timeData: {},
|
|
||||||
dataRecommend: [], //推荐
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.id = this.$route.params.id
|
|
||||||
this.getComment(this.id)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions(['getPublicData']),
|
|
||||||
onClickSlide(e) {
|
|
||||||
this.swiperIndex = e
|
|
||||||
},
|
|
||||||
onChoseSpecItem(id, specid) {
|
|
||||||
const { goodsSpec } = this
|
|
||||||
goodsSpec.forEach((item) => {
|
|
||||||
if (item.spec_value && item.id == id) {
|
|
||||||
item.spec_value.forEach((specitem) => {
|
|
||||||
specitem.checked = 0
|
|
||||||
if (specitem.id == specid) {
|
|
||||||
specitem.checked = 1
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.goodsSpec = [...goodsSpec]
|
|
||||||
},
|
|
||||||
async onAddCart() {
|
|
||||||
const {
|
|
||||||
goodsNum,
|
|
||||||
checkedGoods: { id },
|
|
||||||
} = this
|
|
||||||
const { code, data, msg } = await this.$post('cart/add', {
|
|
||||||
item_id: id,
|
|
||||||
goods_num: goodsNum,
|
|
||||||
})
|
|
||||||
if (code == 1) {
|
|
||||||
this.getPublicData()
|
|
||||||
this.$message({
|
|
||||||
message: msg,
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async changeShopFollow() {
|
|
||||||
const { code, msg } = await this.$post('shop_follow/changeStatus', {
|
|
||||||
shop_id: this.shop.id,
|
|
||||||
})
|
|
||||||
if (code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: msg,
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
this.getGoodsDetail()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onBuyNow() {
|
|
||||||
const {
|
|
||||||
goodsNum,
|
|
||||||
checkedGoods: { id },
|
|
||||||
} = this
|
|
||||||
const goods = [
|
|
||||||
{
|
|
||||||
item_id: id,
|
|
||||||
num: goodsNum,
|
|
||||||
goods_id: this.id,
|
|
||||||
shop_id: this.shop.id,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
this.$router.push({
|
|
||||||
path: '/confirm_order',
|
|
||||||
query: {
|
|
||||||
data: encodeURIComponent(
|
|
||||||
JSON.stringify({
|
|
||||||
goods,
|
|
||||||
type: 'buy',
|
|
||||||
})
|
|
||||||
),
|
|
||||||
},
|
|
||||||
})
|
|
||||||
},
|
|
||||||
async getGoodsDetail() {
|
|
||||||
const { data, code } = await this.$get('goods/getGoodsDetail', {
|
|
||||||
params: { goods_id: this.id },
|
|
||||||
})
|
|
||||||
if (code == 1) {
|
|
||||||
this.goodsDetails = data
|
|
||||||
this.shop = data.shop
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async onCollectionGoods() {
|
|
||||||
const { data, code, msg } = await this.$post(
|
|
||||||
'goods_collect/changeStatus',
|
|
||||||
{
|
|
||||||
goods_id: this.id,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
if (code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: msg,
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
this.getGoodsDetail()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async getComment() {
|
|
||||||
const { data, code } = await this.$get('/goods_comment/category', {
|
|
||||||
params: { goods_id: this.id },
|
|
||||||
})
|
|
||||||
if (code == 1) {
|
|
||||||
this.comment = data
|
|
||||||
this.commentActive = data.comment[0].id
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onChangeDate(e) {
|
|
||||||
let timeData = {}
|
|
||||||
for (let prop in e) {
|
|
||||||
if (prop !== 'milliseconds')
|
|
||||||
timeData[prop] = ('0' + e[prop]).slice(-2)
|
|
||||||
}
|
|
||||||
this.timeData = timeData
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
goodsSpec: {
|
|
||||||
immediate: true,
|
|
||||||
handler(value) {
|
|
||||||
const { goods_item } = this.goodsDetails
|
|
||||||
let keyArr = []
|
|
||||||
value.forEach((item) => {
|
|
||||||
if (item.spec_value) {
|
|
||||||
item.spec_value.forEach((specitem) => {
|
|
||||||
if (specitem.checked) {
|
|
||||||
keyArr.push(specitem.id)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
if (!keyArr.length) return
|
|
||||||
let key = keyArr.join(',')
|
|
||||||
let index = goods_item.findIndex((item) => {
|
|
||||||
return item.spec_value_ids == key
|
|
||||||
})
|
|
||||||
if (index == -1) {
|
|
||||||
index = 0
|
|
||||||
}
|
|
||||||
this.checkedGoods = goods_item[index]
|
|
||||||
console.log(this.checkedGoods)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
goodsDetails: {
|
|
||||||
immediate: true,
|
|
||||||
handler(value) {
|
|
||||||
if (!value.goods_spec) return
|
|
||||||
value.goods_spec.forEach((item) => {
|
|
||||||
item.spec_value.forEach((specitem, specindex) => {
|
|
||||||
if (specindex == 0) {
|
|
||||||
specitem.checked = 1
|
|
||||||
} else {
|
|
||||||
specitem.checked = 0
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
this.goodsSpec = [...value.goods_spec]
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
countTime() {
|
|
||||||
const end_time = this.activity.end_time
|
|
||||||
return end_time ? end_time - Date.now() / 1000 : 0
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.goods-details {
|
|
||||||
padding: 16px 0 44px;
|
|
||||||
|
|
||||||
.goods-info {
|
|
||||||
.goods-swiper {
|
|
||||||
width: 400px;
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
.swiper {
|
|
||||||
margin: 10px 0;
|
|
||||||
padding: 0 25px;
|
|
||||||
--swiper-navigation-size: 15px;
|
|
||||||
--swiper-navigation-color: #888;
|
|
||||||
|
|
||||||
.swiper-button-next,
|
|
||||||
.swiper-button-prev {
|
|
||||||
top: 0;
|
|
||||||
width: 25px;
|
|
||||||
height: 100%;
|
|
||||||
margin-top: 0;
|
|
||||||
background-size: 12px 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-button-prev {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-button-next {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-item {
|
|
||||||
cursor: pointer;
|
|
||||||
height: 66px;
|
|
||||||
width: 66px;
|
|
||||||
border: 2px solid transparent;
|
|
||||||
|
|
||||||
&~.swiper-item {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
border-color: $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.current-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-wrap {
|
|
||||||
min-height: 486px;
|
|
||||||
min-width: 504px;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
.name {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.seckill {
|
|
||||||
background-color: $--color-primary;
|
|
||||||
padding: 6px 10px;
|
|
||||||
|
|
||||||
.count-down {
|
|
||||||
.item {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
text-align: center;
|
|
||||||
line-height: 30px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-wrap {
|
|
||||||
background: #f6f6f6;
|
|
||||||
background-size: 100%;
|
|
||||||
padding: 16px 16px;
|
|
||||||
|
|
||||||
.member-price {
|
|
||||||
background-color: #482406;
|
|
||||||
color: #fdebd5;
|
|
||||||
border-radius: 100px 100px 100px 0px;
|
|
||||||
padding: 0 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sales-click {
|
|
||||||
border-bottom: 1px dashed $--border-color-base;
|
|
||||||
line-height: 28px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 6px;
|
|
||||||
|
|
||||||
&>div:first-of-type {
|
|
||||||
border-right: 1px solid $--border-color-base;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spec-wrap {
|
|
||||||
margin-top: 20px;
|
|
||||||
|
|
||||||
.spec {
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
.spec-name {
|
|
||||||
margin-right: 20px;
|
|
||||||
margin-top: 6px;
|
|
||||||
flex: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spec-item {
|
|
||||||
padding: 0 20px;
|
|
||||||
line-height: 32px;
|
|
||||||
border: $--border-base;
|
|
||||||
border-radius: 2px;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: $--color-primary;
|
|
||||||
background-color: #ffeeef;
|
|
||||||
border-color: currentColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-num {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
|
|
||||||
.num {
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-btns {
|
|
||||||
.btn {
|
|
||||||
margin-right: 14px;
|
|
||||||
text-align: center;
|
|
||||||
width: 120px;
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
&.collection {
|
|
||||||
width: 146px;
|
|
||||||
line-height: 42px;
|
|
||||||
border: 1px solid rgba(229, 229, 229, 0.89804);
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #666;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $--color-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-icon {
|
|
||||||
width: 18.5px;
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.shop {
|
|
||||||
width: 210px;
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
.logo-img {
|
|
||||||
width: 62px;
|
|
||||||
height: 62px;
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-rate__icon {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rich-text img {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.details-wrap {
|
|
||||||
align-items: stretch;
|
|
||||||
|
|
||||||
.details {
|
|
||||||
padding: 10px 0;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.rich-text {
|
|
||||||
padding: 0 10px;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.evaluation {
|
|
||||||
.evaluation-hd {
|
|
||||||
height: 80px;
|
|
||||||
margin: 0 10px;
|
|
||||||
|
|
||||||
.rate {
|
|
||||||
height: 60px;
|
|
||||||
width: 220px;
|
|
||||||
border-right: 1px solid #e5e5e5;
|
|
||||||
padding-left: 10px;
|
|
||||||
margin-right: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.evaluation-tab {
|
|
||||||
margin: 16px 20px;
|
|
||||||
|
|
||||||
.item {
|
|
||||||
border-radius: 2px;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 32px;
|
|
||||||
padding: 6px 20px;
|
|
||||||
color: #666;
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
margin-right: 10px;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: #fff;
|
|
||||||
background-color: $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-like {
|
|
||||||
width: 210px;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
border-bottom: $--border-base;
|
|
||||||
height: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-list {
|
|
||||||
.item {
|
|
||||||
padding: 10px;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
.goods-img {
|
|
||||||
width: 190px;
|
|
||||||
height: 190px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.details-tips {
|
|
||||||
padding:20px;
|
|
||||||
h2 {
|
|
||||||
margin: 0 0 20px 0;
|
|
||||||
}
|
|
||||||
.boxs {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
|
||||||
column-gap: 10px;
|
|
||||||
row-gap: 10px;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
word-wrap: break-word;
|
|
||||||
word-break: keep-all; /* 长单词换行 */
|
|
||||||
word-break: break-all; /* 单词内换行 */
|
|
||||||
.tit {
|
|
||||||
font-size: 14px;
|
|
||||||
.st {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.activity-area {
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background-color: #fff;
|
|
||||||
.title {
|
|
||||||
font-size: 36px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
.goods-list {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.goods-item {
|
|
||||||
width: 14.6%;
|
|
||||||
margin: 20px 1% 0 1%;
|
|
||||||
.goods-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 0;
|
|
||||||
padding-top: 100%;
|
|
||||||
position: relative;
|
|
||||||
.el-image {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.name {
|
|
||||||
line-height: 20px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,182 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="goods-list">
|
|
||||||
<div class="banner m-t-16">
|
|
||||||
<!-- <ad-item :item="ad" v-if="ad.image"></ad-item> -->
|
|
||||||
<client-only>
|
|
||||||
<swiper ref="mySwiper" :options="swiperOptions">
|
|
||||||
<swiper-slide class="swiper-item" v-for="(item, index) in ad" :key="index">
|
|
||||||
<ad-item :item="item"></ad-item>
|
|
||||||
</swiper-slide>
|
|
||||||
</swiper>
|
|
||||||
</client-only>
|
|
||||||
</div>
|
|
||||||
<div class="sort m-b-16 flex bg-white">
|
|
||||||
<div class="sort-title">排序方式：</div>
|
|
||||||
<div class="sort-name m-l-16 flex">
|
|
||||||
<div :class="['item', { active: sortType == '' }]" @click="changeSortType('')">
|
|
||||||
综合
|
|
||||||
</div>
|
|
||||||
<div :class="['item', { active: sortType == 'price' }]" @click="changeSortType('price')">
|
|
||||||
价格
|
|
||||||
<i v-show="priceSort == 'desc'" class="el-icon-arrow-down"></i>
|
|
||||||
<i v-show="priceSort == 'asc'" class="el-icon-arrow-up"></i>
|
|
||||||
</div>
|
|
||||||
<div :class="['item', { active: sortType == 'sales_sum' }]" @click="changeSortType('sales_sum')">
|
|
||||||
销量
|
|
||||||
<i v-show="saleSort == 'desc'" class="el-icon-arrow-down"></i>
|
|
||||||
<i v-show="saleSort == 'asc'" class="el-icon-arrow-up"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<template v-if="goodsList.length">
|
|
||||||
<goods-list :list="goodsList" />
|
|
||||||
<div class="pagination flex m-t-30 row-center" style="padding-bottom: 38px" v-if="count">
|
|
||||||
<el-pagination background layout="prev, pager, next" :total="count" prev-text="上一页" next-text="下一页"
|
|
||||||
hide-on-single-page :page-size="20" @current-change="changePage">
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<null-data v-else :img="require('~/static/images/goods_null.png')" text="暂无商品~"></null-data>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { trottle } from "~/utils/tools";
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
async asyncData({ $get, params, query }) {
|
|
||||||
const { type } = params;
|
|
||||||
let pid = 0;
|
|
||||||
let ad = [];
|
|
||||||
switch (type) {
|
|
||||||
case "1":
|
|
||||||
pid = 25;
|
|
||||||
break;
|
|
||||||
case "2":
|
|
||||||
pid = 26;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
const { data } = await $get("ad_content/lists", {
|
|
||||||
params: {
|
|
||||||
pid: pid,
|
|
||||||
terminal: 2,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!data.length) return;
|
|
||||||
ad = data
|
|
||||||
return { ad };
|
|
||||||
},
|
|
||||||
components: {},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
sortType: "",
|
|
||||||
swiperOptions: {
|
|
||||||
width: 1180,
|
|
||||||
},
|
|
||||||
saleSort: "desc",
|
|
||||||
priceSort: "desc",
|
|
||||||
page: "",
|
|
||||||
count: 0,
|
|
||||||
ad: "",
|
|
||||||
goodsList: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.getGoods();
|
|
||||||
this.changeSortType = trottle(this.changeSortType, 500, this);
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changeSortType(type) {
|
|
||||||
this.sortType = type;
|
|
||||||
switch (type) {
|
|
||||||
case "price":
|
|
||||||
if (this.priceSort == "asc") {
|
|
||||||
this.priceSort = "desc";
|
|
||||||
} else if (this.priceSort == "desc") {
|
|
||||||
this.priceSort = "asc";
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case "sales_sum":
|
|
||||||
if (this.saleSort == "asc") {
|
|
||||||
this.saleSort = "desc";
|
|
||||||
} else if (this.saleSort == "desc") {
|
|
||||||
this.saleSort = "asc";
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
this.getGoods();
|
|
||||||
},
|
|
||||||
changePage(current) {
|
|
||||||
this.page = current;
|
|
||||||
this.getGoods();
|
|
||||||
},
|
|
||||||
async getGoods() {
|
|
||||||
const { name } = this.$route.query;
|
|
||||||
const { priceSort, sortType, saleSort } = this;
|
|
||||||
let sort = "";
|
|
||||||
switch (sortType) {
|
|
||||||
case "price":
|
|
||||||
sort = priceSort;
|
|
||||||
break;
|
|
||||||
case "sales_sum":
|
|
||||||
sort = saleSort;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
const {
|
|
||||||
data: { list, count },
|
|
||||||
} = await this.$get("pc/goodsList", {
|
|
||||||
params: {
|
|
||||||
page_size: 20,
|
|
||||||
page_no: this.page,
|
|
||||||
sort_type: sortType,
|
|
||||||
sort,
|
|
||||||
name,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
this.count = count;
|
|
||||||
this.goodsList = list;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
'$route.query.name' () {
|
|
||||||
this.getGoods();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.goods-list {
|
|
||||||
.banner {
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sort {
|
|
||||||
padding: 15px 16px;
|
|
||||||
.sort-name {
|
|
||||||
.item {
|
|
||||||
margin-right: 30px;
|
|
||||||
cursor: pointer;
|
|
||||||
&.active {
|
|
||||||
color: $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,189 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="news-details-container mt16">
|
|
||||||
<div class="nav-container flex">
|
|
||||||
<div class="nr" style="width: 70px">当前位置：</div>
|
|
||||||
<el-breadcrumb style="flex: 1;" separator="/">
|
|
||||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item>
|
|
||||||
<nuxt-link to="/help_center">帮助中心</nuxt-link>
|
|
||||||
</el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item class="line1" style="max-width: 800px;">{{detailsObj.title}}</el-breadcrumb-item>
|
|
||||||
</el-breadcrumb>
|
|
||||||
</div>
|
|
||||||
<div class="content-box">
|
|
||||||
<div class="news-detail-box m-r-16">
|
|
||||||
<div class="content-header bg-white">
|
|
||||||
<div class="news-detail-title">
|
|
||||||
{{detailsObj.title}}
|
|
||||||
</div>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="sm muted">
|
|
||||||
发布时间：{{detailsObj.create_time}}
|
|
||||||
</div>
|
|
||||||
<div class="flex" style="margin-left: 40px">
|
|
||||||
<i class="el-icon-view muted"></i>
|
|
||||||
<div class="muted" style="margin-left: 3px;">{{detailsObj.visit}} 人浏览</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content-html-box bg-white">
|
|
||||||
<div v-html="detailsObj.content"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="recommend-box">
|
|
||||||
<div class="recommend-box-header flex bg-white">
|
|
||||||
<div class="primary-line"></div>
|
|
||||||
<div class="xxl" style="font-weight: 500">为您推荐</div>
|
|
||||||
</div>
|
|
||||||
<div class="recommend-box-content bg-white">
|
|
||||||
<div class="recommend-list-container">
|
|
||||||
<div class="recommend-list-item" v-for="(item) in recommend_list" :key="item.id"
|
|
||||||
@click="toOther(item.id)">
|
|
||||||
<el-image style="width: 244px; height:183px;border-radius: 6px" fit="cover"
|
|
||||||
:src="item.image" />
|
|
||||||
<div class="goods-info">
|
|
||||||
<div class="line2 goods-name">{{item.title}}</div>
|
|
||||||
<div class="flex" style="margin-top: 10px">
|
|
||||||
<i class="el-icon-view muted"></i>
|
|
||||||
<div class="muted xs" style="margin-left: 4px;">{{item.visit}} 人浏览</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon
|
|
||||||
}],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
async asyncData({
|
|
||||||
$get,
|
|
||||||
$post,
|
|
||||||
query
|
|
||||||
}) {
|
|
||||||
let detailsObj = {};
|
|
||||||
let recommend_list = [];
|
|
||||||
let res = await $get("help/detail", {
|
|
||||||
params: {
|
|
||||||
id: query.id,
|
|
||||||
client: 2
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (res.code == 1) {
|
|
||||||
detailsObj = res.data;
|
|
||||||
recommend_list = res.data.recommend_list
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
detailsObj,
|
|
||||||
recommend_list,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watchQuery: ['id'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
recommend_list: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log('route', this.$route)
|
|
||||||
// this.getNewsDetails(this.$route.query.id);
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async getNewsDetails(id) {
|
|
||||||
let res = await this.$get("help/detail", {params: {id: id, client: 2}});
|
|
||||||
if(res.code == 1) {
|
|
||||||
this.detailsObj = res.data;
|
|
||||||
this.recommend_list = res.data.recommend_list
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toOther(id) {
|
|
||||||
this.$router.push('/help_center/help_center_detail?id=' + id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.news-details-container {
|
|
||||||
.nav-container {
|
|
||||||
padding: 15px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-box {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
.news-detail-box {
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
width: 900px;
|
|
||||||
|
|
||||||
.content-header {
|
|
||||||
margin: 0px 20px;
|
|
||||||
padding: 20px 0px;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
|
|
||||||
.news-detail-title {
|
|
||||||
color: #222;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 43px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-html-box {
|
|
||||||
padding: 24px 20px;
|
|
||||||
|
|
||||||
&>div {
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
::v-deep img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-box {
|
|
||||||
width: 264px;
|
|
||||||
|
|
||||||
.recommend-box-header {
|
|
||||||
padding: 15px 10px;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
|
|
||||||
.primary-line {
|
|
||||||
margin-right: 10px;
|
|
||||||
background-color: $--color-primary;
|
|
||||||
width: 4px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-box-content {
|
|
||||||
.recommend-list-container {
|
|
||||||
.recommend-list-item {
|
|
||||||
padding: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.goods-info {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,233 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="help-center-container">
|
|
||||||
<div class="help-center-banner">
|
|
||||||
<client-only>
|
|
||||||
<swiper ref="mySwiper" :options="swiperOptions">
|
|
||||||
<swiper-slide class="swiper-item" v-for="(item, index) in bannerList" :key="index">
|
|
||||||
<ad-item :item="item"></ad-item>
|
|
||||||
</swiper-slide>
|
|
||||||
</swiper>
|
|
||||||
</client-only>
|
|
||||||
</div>
|
|
||||||
<div class="help-center-box">
|
|
||||||
<div class="help-center-aside bg-white">
|
|
||||||
<ul class="nav flex-col col-center">
|
|
||||||
<li class="flex" :class="{'active-item': currentId <= 0}" @click="changeList(0)">全部</li>
|
|
||||||
<li class="flex" v-for="(item) in categoryList" :key="item.id"
|
|
||||||
:class="{'active-item': item.id == currentId}" @click="changeList(item.id)">{{item.name}}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="article-lists-container m-l-16 bg-white">
|
|
||||||
<div v-show="!dataNull">
|
|
||||||
<div>
|
|
||||||
<nuxt-link :to="'/help_center/help_center_detail?id=' + item.id"
|
|
||||||
class="article-item flex row-between bg-white" v-for="(item) in articleList" :key="item.id">
|
|
||||||
<div>
|
|
||||||
<div class="lg article-name line2">{{item.title}}</div>
|
|
||||||
<div class="lighter">{{item.intro}}</div>
|
|
||||||
<div class="flex" style="margin-top: 56px;">
|
|
||||||
<div class="sm muted">发布时间：{{item.create_time}}</div>
|
|
||||||
<div class="flex m-l-16">
|
|
||||||
<i class="el-icon-view muted"></i>
|
|
||||||
<div class="muted" style="margin-left: 3px;">{{item.visit}} 人浏览</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-image style="width: 200px; height: 150px;border-radius: 6px;" fit="cover"
|
|
||||||
:src="item.image" />
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
<div class="help-center-pagination row-center">
|
|
||||||
<el-pagination background hide-on-single-page layout="prev, pager, next" :total="count"
|
|
||||||
prev-text="上一页" next-text="下一页" :page-size="10" @current-change="changePage" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="data-null column-center" v-show="dataNull">
|
|
||||||
<img style="width: 150px;height: 150px;" src="~/static/images/news_null.png" />
|
|
||||||
<div class="xs muted">
|
|
||||||
暂无消息记录～
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon
|
|
||||||
}],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
async asyncData({
|
|
||||||
$get,
|
|
||||||
$post
|
|
||||||
}) {
|
|
||||||
let categoryList = [];
|
|
||||||
let currentId = 0;
|
|
||||||
let articleList = [];
|
|
||||||
let count = 0;
|
|
||||||
let dataNull = true;
|
|
||||||
const banner = $get("ad_content/lists", {
|
|
||||||
params: {
|
|
||||||
pid: 29,
|
|
||||||
terminal: 2
|
|
||||||
}
|
|
||||||
});
|
|
||||||
let res = await $get("help/category");
|
|
||||||
const {
|
|
||||||
data: bannerList
|
|
||||||
} = await banner;
|
|
||||||
if (res.code == 1) {
|
|
||||||
categoryList = res.data;
|
|
||||||
currentId = 0
|
|
||||||
let listsRes = await $get("help/lists", {
|
|
||||||
params: {
|
|
||||||
cid: currentId,
|
|
||||||
page_size: 10
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (listsRes.code == 1) {
|
|
||||||
articleList = listsRes.data.list;
|
|
||||||
count = listsRes.data.count
|
|
||||||
if (count <= 0) {
|
|
||||||
dataNull = true;
|
|
||||||
} else {
|
|
||||||
dataNull = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
categoryList,
|
|
||||||
articleList,
|
|
||||||
count,
|
|
||||||
currentId,
|
|
||||||
bannerList,
|
|
||||||
dataNull,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
categoryList: [],
|
|
||||||
articleList: [],
|
|
||||||
currentId: -1,
|
|
||||||
count: 0,
|
|
||||||
swiperOptions: {
|
|
||||||
width: 1180,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log(this.articleList, 'articleList')
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async changePage(current) {
|
|
||||||
let res = await this.$get("help/lists", {
|
|
||||||
params: {
|
|
||||||
cid: this.currentId,
|
|
||||||
page_no: current,
|
|
||||||
page_size: 10
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.articleList = res.data.list;
|
|
||||||
if (this.articleList.length <= 0) {
|
|
||||||
dataNull = true;
|
|
||||||
} else {
|
|
||||||
dataNull = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
changeList(id) {
|
|
||||||
this.currentId = id;
|
|
||||||
this.changePage(1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.help-center-container {
|
|
||||||
.help-center-banner {
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-center-box {
|
|
||||||
margin-top: 16px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
.help-center-aside {
|
|
||||||
width: 160px;
|
|
||||||
// min-height: 635px;
|
|
||||||
padding-top: 20px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
padding: 20px 30px;
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
li {
|
|
||||||
margin: 10px 0px;
|
|
||||||
padding: 0px 30px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-item {
|
|
||||||
padding-left: 27px;
|
|
||||||
color: $--color-primary;
|
|
||||||
border-left: 3px solid $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-lists-container {
|
|
||||||
width: 1004px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.article-item {
|
|
||||||
margin: 0px 20px;
|
|
||||||
padding: 15px 0px;
|
|
||||||
border-bottom: 1px solid #E5E5E5;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.article-name {
|
|
||||||
margin-bottom: 11px;
|
|
||||||
margin-top: 13px;
|
|
||||||
max-width: 720px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-center-pagination {
|
|
||||||
padding-top: 38px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-null {
|
|
||||||
padding-top: 150px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-pagination.is-background .btn-prev {
|
|
||||||
background: #fff;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-pagination.is-background .btn-next {
|
|
||||||
background: #fff;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-pagination.is-background .el-pager li {
|
|
||||||
background: #fff;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,348 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="index">
|
|
||||||
<!-- 广告位 -->
|
|
||||||
<div class="banner">
|
|
||||||
<client-only>
|
|
||||||
<el-carousel height="440px" autoplay>
|
|
||||||
<el-carousel-item
|
|
||||||
v-for="(item, index) in bannerList"
|
|
||||||
:key="index"
|
|
||||||
class="swiper-item"
|
|
||||||
>
|
|
||||||
<ad-item :item="item" />
|
|
||||||
</el-carousel-item>
|
|
||||||
</el-carousel>
|
|
||||||
</client-only>
|
|
||||||
</div>
|
|
||||||
<!-- 活动专区 -->
|
|
||||||
<div
|
|
||||||
class="activity-area flex flex-wrap"
|
|
||||||
v-if="indexData.activity_area && indexData.activity_area.length"
|
|
||||||
>
|
|
||||||
<nuxt-link
|
|
||||||
class="activity-item flex"
|
|
||||||
v-for="(item, index) in indexData.activity_area"
|
|
||||||
:key="index"
|
|
||||||
:to="`/special_area?id=${item.id}&name=${item.name}&title=${item.title}`"
|
|
||||||
>
|
|
||||||
<div class="flex-1 m-r-16" style="min-width: 0">
|
|
||||||
<div class="xxl m-b-10 line-1">{{ item.name }}</div>
|
|
||||||
<div class="m-b-6 line-2">{{ item.title }}</div>
|
|
||||||
|
|
||||||
<el-button size="mini">前往查看</el-button>
|
|
||||||
</div>
|
|
||||||
<el-image
|
|
||||||
class="activity-img"
|
|
||||||
lazy
|
|
||||||
:src="item.image"
|
|
||||||
alt=""
|
|
||||||
></el-image>
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
<home-seckill :list="indexData.seckill_goods" @refreshhome="getIndex" />
|
|
||||||
<div class="active-goods flex">
|
|
||||||
<activity-area
|
|
||||||
class="flex-1 m-r-16"
|
|
||||||
:list="indexData.hots"
|
|
||||||
title="热销榜单"
|
|
||||||
url="/goods_list/1"
|
|
||||||
/>
|
|
||||||
<activity-area
|
|
||||||
class="flex-1"
|
|
||||||
:list="indexData.news"
|
|
||||||
title="新品推荐"
|
|
||||||
url="/goods_list/2"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="shop-recommend card m-t-16"
|
|
||||||
v-if="indexData.shop_lists.length"
|
|
||||||
>
|
|
||||||
<div class="title flex row-between">
|
|
||||||
<div class="font-size-20">店铺推荐</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="shop-list m-t-16">
|
|
||||||
<client-only>
|
|
||||||
<swiper
|
|
||||||
class="swiper"
|
|
||||||
ref="mySwiper"
|
|
||||||
:options="swiperOptions"
|
|
||||||
>
|
|
||||||
<swiper-slide
|
|
||||||
class="swiper-item"
|
|
||||||
v-for="(item, index) in indexData.shop_lists"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<shop-item
|
|
||||||
:cover="item.cover"
|
|
||||||
:shopId="item.id"
|
|
||||||
:logo="item.logo"
|
|
||||||
:type="item.type"
|
|
||||||
:name="item.name"
|
|
||||||
:sales="item.on_sales_count"
|
|
||||||
/>
|
|
||||||
</swiper-slide>
|
|
||||||
<div
|
|
||||||
class="swiper-button-prev"
|
|
||||||
slot="button-prev"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="swiper-button-next"
|
|
||||||
slot="button-next"
|
|
||||||
></div>
|
|
||||||
</swiper>
|
|
||||||
</client-only>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="goods-column bg-white" v-if="columnList.length">
|
|
||||||
<div class="column-wrap flex">
|
|
||||||
<div
|
|
||||||
class="item flex-col col-center muted flex-none"
|
|
||||||
v-for="(item, index) in columnList"
|
|
||||||
:key="index"
|
|
||||||
@click="changeTab(index)"
|
|
||||||
>
|
|
||||||
<div class="item-con flex-col col-center">
|
|
||||||
<div
|
|
||||||
class="xxl normal title line-1"
|
|
||||||
:class="{ 'weight-500': active == index }"
|
|
||||||
>
|
|
||||||
{{ item.name }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="m-t-8 xs line-1"
|
|
||||||
:class="{ normal: active == index }"
|
|
||||||
>
|
|
||||||
{{ item.remark }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="active == index" class="line"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="hasData" class="m-t-16">
|
|
||||||
<goods-list :list="goodsList" />
|
|
||||||
<div
|
|
||||||
class="pagination flex m-t-30 row-center"
|
|
||||||
style="padding-bottom: 38px"
|
|
||||||
>
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
layout="prev, pager, next"
|
|
||||||
:total="count"
|
|
||||||
prev-text="上一页"
|
|
||||||
next-text="下一页"
|
|
||||||
hide-on-single-page
|
|
||||||
:page-size="20"
|
|
||||||
@current-change="changePage"
|
|
||||||
>
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<null-data
|
|
||||||
v-else
|
|
||||||
:img="require('~/static/images/goods_null.png')"
|
|
||||||
text="暂无商品~"
|
|
||||||
></null-data>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import HomeSeckill from '../components/home-seckill.vue'
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: 'icon',
|
|
||||||
type: 'image/x-icon',
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: { HomeSeckill },
|
|
||||||
async asyncData({ $get }) {
|
|
||||||
const { data } = await $get('index/index',{params: {terminal:'pc'}})
|
|
||||||
const { data: banner } = await $get('ad_content/lists', {
|
|
||||||
params: { pid: 23, terminal: 2 },
|
|
||||||
})
|
|
||||||
const { data: columnList } = await $get(
|
|
||||||
'goods_column/getGoodsColumnList'
|
|
||||||
)
|
|
||||||
|
|
||||||
return {
|
|
||||||
indexData: data,
|
|
||||||
columnList,
|
|
||||||
bannerList: banner,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
page: 1,
|
|
||||||
count: 0,
|
|
||||||
goodsList: [],
|
|
||||||
active: 0,
|
|
||||||
bannerList: [],
|
|
||||||
columnList: [],
|
|
||||||
hasData: true,
|
|
||||||
indexData: {
|
|
||||||
activity_area: [],
|
|
||||||
shop_recommend: [],
|
|
||||||
hots: [],
|
|
||||||
news: [],
|
|
||||||
shop_lists: [],
|
|
||||||
},
|
|
||||||
swiperOptions: {
|
|
||||||
pagination: {
|
|
||||||
el: '.swiper-pagination',
|
|
||||||
clickable: true,
|
|
||||||
},
|
|
||||||
navigation: {
|
|
||||||
nextEl: '.swiper-button-next',
|
|
||||||
prevEl: '.swiper-button-prev',
|
|
||||||
},
|
|
||||||
// loopedSlides: 5,
|
|
||||||
preventClicks: true,
|
|
||||||
slidesPerView: 'auto',
|
|
||||||
autoplay: false
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
columnList: {
|
|
||||||
immediate: true,
|
|
||||||
handler() {
|
|
||||||
this.getGoodsLists()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async getGoodsLists() {
|
|
||||||
const { columnList, active, page } = this
|
|
||||||
if (!columnList.length) return
|
|
||||||
const columnId = columnList[active].id
|
|
||||||
const { data } = await this.$get('goods/getGoodsListByColumnId', {
|
|
||||||
params: {
|
|
||||||
page_size: 10,
|
|
||||||
page_no: page,
|
|
||||||
column_id: columnId,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
if (!data.lists.length) {
|
|
||||||
this.hasData = false
|
|
||||||
} else {
|
|
||||||
this.hasData = true
|
|
||||||
}
|
|
||||||
this.goodsList = data.lists
|
|
||||||
},
|
|
||||||
changePage(page) {
|
|
||||||
this.page = page
|
|
||||||
this.getGoodsLists()
|
|
||||||
},
|
|
||||||
changeTab(index) {
|
|
||||||
this.active = index
|
|
||||||
this.getGoodsLists()
|
|
||||||
},
|
|
||||||
async getIndex() {
|
|
||||||
const { data } = await $get('index/index',{
|
|
||||||
params: {
|
|
||||||
terminal: 'pc'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.indexData = data
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.index {
|
|
||||||
.banner {
|
|
||||||
margin-left: 160px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
height: 440px;
|
|
||||||
}
|
|
||||||
.activity-area {
|
|
||||||
.activity-item {
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 28px 16px;
|
|
||||||
background-color: #fff;
|
|
||||||
width: 280px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
&:not(:nth-of-type(4n)) {
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
.activity-img {
|
|
||||||
width: 104px;
|
|
||||||
height: 104px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
.shop-recommend {
|
|
||||||
padding: 16px 20px;
|
|
||||||
}
|
|
||||||
.shop-list {
|
|
||||||
.swiper {
|
|
||||||
--swiper-navigation-size: 18px;
|
|
||||||
--swiper-navigation-color: #fff;
|
|
||||||
.swiper-button-next,
|
|
||||||
.swiper-button-prev {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.swiper-item {
|
|
||||||
width: 270px;
|
|
||||||
height: 400px;
|
|
||||||
padding-right: 20px;
|
|
||||||
box-sizing: content-box;
|
|
||||||
&:last-of-type {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.goods-column {
|
|
||||||
overflow-y: auto;
|
|
||||||
.column-wrap {
|
|
||||||
height: 100px;
|
|
||||||
.item {
|
|
||||||
padding: 0 25px;
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
|
||||||
.item-con {
|
|
||||||
position: relative;
|
|
||||||
.title {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.line {
|
|
||||||
position: absolute;
|
|
||||||
top: 16px;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 6px;
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
#{$--color-primary} 0%,
|
|
||||||
rgba(255, 44, 60, 0) 100%
|
|
||||||
);
|
|
||||||
border-radius: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,233 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="help-center-container">
|
|
||||||
<div class="help-center-banner">
|
|
||||||
<client-only>
|
|
||||||
<swiper ref="mySwiper" :options="swiperOptions">
|
|
||||||
<swiper-slide class="swiper-item" v-for="(item, index) in bannerList" :key="index">
|
|
||||||
<ad-item :item="item"></ad-item>
|
|
||||||
</swiper-slide>
|
|
||||||
</swiper>
|
|
||||||
</client-only>
|
|
||||||
</div>
|
|
||||||
<div class="help-center-box">
|
|
||||||
<div class="help-center-aside bg-white">
|
|
||||||
<ul class="nav flex-col col-center">
|
|
||||||
<li class="flex" :class="{'active-item': currentId <= 0}" @click="changeList(0)">全部</li>
|
|
||||||
<li class="flex" v-for="(item) in categoryList" :key="item.id"
|
|
||||||
:class="{'active-item': item.id == currentId}" @click="changeList(item.id)">{{item.name}}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="article-lists-container m-l-16 bg-white">
|
|
||||||
<div v-show="!dataNull">
|
|
||||||
<div>
|
|
||||||
<nuxt-link :to="'/news_list/news_list_detail?id=' + item.id"
|
|
||||||
class="article-item flex row-between bg-white" v-for="(item) in articleList" :key="item.id">
|
|
||||||
<div>
|
|
||||||
<div class="lg article-name line2">{{item.title}}</div>
|
|
||||||
<div class="lighter">{{item.intro}}</div>
|
|
||||||
<div class="flex" style="margin-top: 56px;">
|
|
||||||
<div class="sm muted">发布时间：{{item.create_time}}</div>
|
|
||||||
<div class="flex m-l-16">
|
|
||||||
<i class="el-icon-view muted"></i>
|
|
||||||
<div class="muted" style="margin-left: 3px;">{{item.visit}} 人浏览</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-image style="width: 200px; height: 150px;border-radius: 6px;" fit="cover"
|
|
||||||
:src="item.image" />
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
<div class="help-center-pagination row-center">
|
|
||||||
<el-pagination background hide-on-single-page layout="prev, pager, next" :total="count"
|
|
||||||
prev-text="上一页" next-text="下一页" :page-size="10" @current-change="changePage" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="data-null column-center" v-show="dataNull">
|
|
||||||
<img style="width: 150px;height: 150px;" src="~/static/images/news_null.png" />
|
|
||||||
<div class="xs muted">
|
|
||||||
暂无消息记录～
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon
|
|
||||||
}],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
async asyncData({
|
|
||||||
$get,
|
|
||||||
$post
|
|
||||||
}) {
|
|
||||||
let categoryList = [];
|
|
||||||
let currentId = 0;
|
|
||||||
let articleList = [];
|
|
||||||
let count = 0;
|
|
||||||
let dataNull = true;
|
|
||||||
const banner = $get("ad_content/lists", {
|
|
||||||
params: {
|
|
||||||
pid: 28,
|
|
||||||
terminal: 2
|
|
||||||
}
|
|
||||||
});
|
|
||||||
let res = await $get("article/category");
|
|
||||||
const {
|
|
||||||
data: bannerList
|
|
||||||
} = await banner;
|
|
||||||
if (res.code == 1) {
|
|
||||||
categoryList = res.data;
|
|
||||||
currentId = 0
|
|
||||||
let listsRes = await $get("article/lists", {
|
|
||||||
params: {
|
|
||||||
cid: currentId,
|
|
||||||
page_size: 10
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (listsRes.code == 1) {
|
|
||||||
articleList = listsRes.data.list;
|
|
||||||
count = listsRes.data.count
|
|
||||||
if (count <= 0) {
|
|
||||||
dataNull = true;
|
|
||||||
} else {
|
|
||||||
dataNull = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
categoryList,
|
|
||||||
articleList,
|
|
||||||
count,
|
|
||||||
currentId,
|
|
||||||
bannerList,
|
|
||||||
dataNull,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
categoryList: [],
|
|
||||||
articleList: [],
|
|
||||||
currentId: -1,
|
|
||||||
count: 0,
|
|
||||||
swiperOptions: {
|
|
||||||
width: 1180,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log(this.articleList, 'articleList')
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async changePage(current) {
|
|
||||||
let res = await this.$get("article/lists", {
|
|
||||||
params: {
|
|
||||||
cid: this.currentId,
|
|
||||||
page_no: current,
|
|
||||||
page_size: 10
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.articleList = res.data.list;
|
|
||||||
if (this.articleList.length <= 0) {
|
|
||||||
dataNull = true;
|
|
||||||
} else {
|
|
||||||
dataNull = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
changeList(id) {
|
|
||||||
this.currentId = id;
|
|
||||||
this.changePage(1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.help-center-container {
|
|
||||||
.help-center-banner {
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-center-box {
|
|
||||||
margin-top: 16px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
.help-center-aside {
|
|
||||||
width: 160px;
|
|
||||||
// min-height: 635px;
|
|
||||||
padding-top: 20px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
padding: 20px 30px;
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
li {
|
|
||||||
margin: 10px 0px;
|
|
||||||
padding: 0px 30px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-item {
|
|
||||||
padding-left: 27px;
|
|
||||||
color: $--color-primary;
|
|
||||||
border-left: 3px solid $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-lists-container {
|
|
||||||
width: 1004px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.article-item {
|
|
||||||
margin: 0px 20px;
|
|
||||||
padding: 15px 0px;
|
|
||||||
border-bottom: 1px solid #E5E5E5;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.article-name {
|
|
||||||
margin-bottom: 11px;
|
|
||||||
margin-top: 13px;
|
|
||||||
max-width: 720px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-center-pagination {
|
|
||||||
padding-top: 38px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-null {
|
|
||||||
padding-top: 150px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-pagination.is-background .btn-prev {
|
|
||||||
background: #fff;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-pagination.is-background .btn-next {
|
|
||||||
background: #fff;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-pagination.is-background .el-pager li {
|
|
||||||
background: #fff;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,189 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="news-details-container mt16">
|
|
||||||
<div class="nav-container flex">
|
|
||||||
<div class="nr" style="width: 70px">当前位置：</div>
|
|
||||||
<el-breadcrumb style="flex: 1;" separator="/">
|
|
||||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item>
|
|
||||||
<nuxt-link to="/news_list">商城资讯</nuxt-link>
|
|
||||||
</el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item class="line1" style="max-width: 800px;">{{detailsObj.title}}</el-breadcrumb-item>
|
|
||||||
</el-breadcrumb>
|
|
||||||
</div>
|
|
||||||
<div class="content-box">
|
|
||||||
<div class="news-detail-box m-r-16">
|
|
||||||
<div class="content-header bg-white">
|
|
||||||
<div class="news-detail-title">
|
|
||||||
{{detailsObj.title}}
|
|
||||||
</div>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="sm muted">
|
|
||||||
发布时间：{{detailsObj.create_time}}
|
|
||||||
</div>
|
|
||||||
<div class="flex" style="margin-left: 40px">
|
|
||||||
<i class="el-icon-view muted"></i>
|
|
||||||
<div class="muted" style="margin-left: 3px;">{{detailsObj.visit}} 人浏览</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="content-html-box bg-white">
|
|
||||||
<div v-html="detailsObj.content"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="recommend-box">
|
|
||||||
<div class="recommend-box-header flex bg-white">
|
|
||||||
<div class="primary-line"></div>
|
|
||||||
<div class="xxl" style="font-weight: 500">为您推荐</div>
|
|
||||||
</div>
|
|
||||||
<div class="recommend-box-content bg-white">
|
|
||||||
<div class="recommend-list-container">
|
|
||||||
<div class="recommend-list-item" v-for="(item) in recommend_list" :key="item.id"
|
|
||||||
@click="toOther(item.id)">
|
|
||||||
<el-image style="width: 244px; height:183px;border-radius: 6px" fit="cover"
|
|
||||||
:src="item.image" />
|
|
||||||
<div class="goods-info">
|
|
||||||
<div class="line2 goods-name">{{item.title}}</div>
|
|
||||||
<div class="flex" style="margin-top: 10px">
|
|
||||||
<i class="el-icon-view muted"></i>
|
|
||||||
<div class="muted xs" style="margin-left: 4px;">{{item.visit}} 人浏览</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon
|
|
||||||
}],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
async asyncData({
|
|
||||||
$get,
|
|
||||||
$post,
|
|
||||||
query
|
|
||||||
}) {
|
|
||||||
let detailsObj = {};
|
|
||||||
let recommend_list = [];
|
|
||||||
let res = await $get("pc/articleDetail", {
|
|
||||||
params: {
|
|
||||||
id: query.id,
|
|
||||||
client: 2
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (res.code == 1) {
|
|
||||||
detailsObj = res.data;
|
|
||||||
recommend_list = res.data.recommend_list
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
detailsObj,
|
|
||||||
recommend_list,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watchQuery: ['id'],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
recommend_list: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log('route', this.$route)
|
|
||||||
// this.getNewsDetails(this.$route.query.id);
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// async getNewsDetails(id) {
|
|
||||||
// let res = await this.$get("article/detail", {params: {id: id, client: 2}});
|
|
||||||
// if(res.code == 1) {
|
|
||||||
// this.detailsObj = res.data;
|
|
||||||
// this.recommend_list = res.data.recommend_list
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
toOther(id) {
|
|
||||||
this.$router.push('/news_list/news_list_detail?id=' + id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.news-details-container {
|
|
||||||
.nav-container {
|
|
||||||
padding: 15px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-box {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
.news-detail-box {
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
width: 900px;
|
|
||||||
|
|
||||||
.content-header {
|
|
||||||
margin: 0px 20px;
|
|
||||||
padding: 20px 0px;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
|
|
||||||
.news-detail-title {
|
|
||||||
color: #222;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 43px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-html-box {
|
|
||||||
padding: 24px 20px;
|
|
||||||
|
|
||||||
&>div {
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
::v-deep img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-box {
|
|
||||||
width: 264px;
|
|
||||||
|
|
||||||
.recommend-box-header {
|
|
||||||
padding: 15px 10px;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
|
|
||||||
.primary-line {
|
|
||||||
margin-right: 10px;
|
|
||||||
background-color: $--color-primary;
|
|
||||||
width: 4px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.recommend-box-content {
|
|
||||||
.recommend-list-container {
|
|
||||||
.recommend-list-item {
|
|
||||||
padding: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.goods-info {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,303 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="payment bg-white">
|
|
||||||
<div class="payment-hd flex">
|
|
||||||
<template v-if="order.pay_status == 0">
|
|
||||||
<img src="~/static/images/pay_wait.png" alt="" />
|
|
||||||
<div class="status m-l-8 m-r-16 weight-500">
|
|
||||||
{{ getOrderStatus(order.order_status) }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="getCancelTime(order.cancel_time) > 0"
|
|
||||||
class="flex"
|
|
||||||
>
|
|
||||||
请在
|
|
||||||
<count-down
|
|
||||||
:time="getCancelTime(order.cancel_time)"
|
|
||||||
format="hh时mm分ss秒"
|
|
||||||
:style="{ color: '#FF2C3C' }"
|
|
||||||
@finish="getOrder"
|
|
||||||
/>
|
|
||||||
完成支付, 超时后将取消订单
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template v-if="order.pay_status == 1">
|
|
||||||
<img src="~/static/images/pay_success.png" alt="" />
|
|
||||||
<div class="status m-l-8 m-r-16 weight-500">支付成功</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div class="payment-con">
|
|
||||||
<div class="item flex m-b-16">订单编号：{{ order.order_sn }}</div>
|
|
||||||
<div class="item flex m-b-16">
|
|
||||||
订单价格：<span class="primary"
|
|
||||||
>￥{{ order.total_amount }}</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="item flex m-b-16">
|
|
||||||
收货地址：
|
|
||||||
<div>
|
|
||||||
{{ address.contact }} {{ address.mobile }}
|
|
||||||
<span class="m-l-16">{{ address.delivery_address }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item flex m-b-16">
|
|
||||||
商品名称：
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
v-for="(item, index) in order.order_goods"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<div class="flex lin-1">
|
|
||||||
【商品{{index + 1}}】- {{ item.goods_name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="payment-footer">
|
|
||||||
<template v-if="order.pay_status == 0 && order.order_status == 0">
|
|
||||||
<div class="title lg weight-500">请选择支付方式</div>
|
|
||||||
<div class="flex m-t-16">
|
|
||||||
<div
|
|
||||||
class="pay-way flex row-center"
|
|
||||||
v-for="(item, index) in payWayArr"
|
|
||||||
:key="index"
|
|
||||||
@click="orderPay(item.pay_way)"
|
|
||||||
>
|
|
||||||
<img :src="item.image" alt="" />
|
|
||||||
<div class="m-l-16">
|
|
||||||
<span class="md">{{ item.name }}</span>
|
|
||||||
<div class="muted m-t-2 sm">{{item.extra}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<nuxt-link v-else class="btn flex row-center" to="/user/order"
|
|
||||||
>查看订单</nuxt-link
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<el-dialog
|
|
||||||
title="微信支付"
|
|
||||||
:visible.sync="showWxpay"
|
|
||||||
width="700px"
|
|
||||||
center
|
|
||||||
@close="clearTimer"
|
|
||||||
>
|
|
||||||
<div class="flex-col col-center black">
|
|
||||||
<img class="pay-code" :src="payInfo" alt="" />
|
|
||||||
<div class="m-t-8" style="font-size: 18px">
|
|
||||||
微信扫一扫，完成支付
|
|
||||||
</div>
|
|
||||||
<div class="pay-money flex">
|
|
||||||
<span>需支付金额：</span>
|
|
||||||
<span class="primary">
|
|
||||||
<price-formate
|
|
||||||
:price="order.total_amount"
|
|
||||||
:subscript-size="18"
|
|
||||||
:first-size="28"
|
|
||||||
:second-size="28"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { client } from '@/utils/type'
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: 'icon',
|
|
||||||
type: 'image/x-icon',
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async asyncData({ query, $get }) {
|
|
||||||
const { data } = await $get('order/getPayStatus', {
|
|
||||||
params: {
|
|
||||||
id: query.id,
|
|
||||||
from: query.from
|
|
||||||
},
|
|
||||||
})
|
|
||||||
return { order: data, address: data.address }
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showWxpay: false,
|
|
||||||
showAlipay: false,
|
|
||||||
payWayArr: [],
|
|
||||||
payInfo: {},
|
|
||||||
cancelTime: 0,
|
|
||||||
alipayHtml: '',
|
|
||||||
address: {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.id = this.$route.query.id
|
|
||||||
this.from = this.$route.query.from
|
|
||||||
this.getPayway()
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
clearInterval(this.timer)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async getPayway() {
|
|
||||||
const { code, data } = await this.$get('order/getPayWay', {
|
|
||||||
params: { from: 'order', order_id: this.id },
|
|
||||||
})
|
|
||||||
if (code == 1) {
|
|
||||||
this.payWayArr = data.pay_way
|
|
||||||
if (!this.payWayArr.length)
|
|
||||||
this.$message({
|
|
||||||
message: '请联系管理员配置支付方式',
|
|
||||||
type: 'error',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async orderPay(payWay) {
|
|
||||||
const { data, code, msg } = await this.$post('pay/unifiedpay', {
|
|
||||||
order_id: this.id,
|
|
||||||
pay_way: payWay,
|
|
||||||
from: this.from,
|
|
||||||
})
|
|
||||||
if (code == 1) {
|
|
||||||
this.payInfo = data
|
|
||||||
this.showWxpay = true
|
|
||||||
this.createTimer()
|
|
||||||
} else if (code == 10001) {
|
|
||||||
let divForm = document.getElementsByTagName('divform')
|
|
||||||
if (divForm.length) {
|
|
||||||
document.body.removeChild(divForm[0])
|
|
||||||
}
|
|
||||||
const div = document.createElement('divform')
|
|
||||||
div.innerHTML = data // data就是接口返回的form 表单字符串
|
|
||||||
document.body.appendChild(div)
|
|
||||||
document.forms[0].submit()
|
|
||||||
} else if (code == 20001) {
|
|
||||||
this.$message({
|
|
||||||
message: msg,
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
this.getOrder()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
clearTimer() {
|
|
||||||
clearInterval(this.timer)
|
|
||||||
},
|
|
||||||
createTimer() {
|
|
||||||
if (this.timer) clearInterval(this.timer)
|
|
||||||
this.timer = setInterval(() => {
|
|
||||||
this.getOrder()
|
|
||||||
}, 2000)
|
|
||||||
},
|
|
||||||
async getOrder() {
|
|
||||||
const { data, code, msg } = await this.$get('order/getPayStatus', {
|
|
||||||
params: {
|
|
||||||
id: this.id,
|
|
||||||
from: this.from,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
if (code == 1) {
|
|
||||||
this.order = data
|
|
||||||
if (data.pay_status == 1) {
|
|
||||||
clearInterval(this.timer)
|
|
||||||
this.showWxpay = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
getOrderStatus() {
|
|
||||||
return (status) => {
|
|
||||||
let text = ''
|
|
||||||
switch (status) {
|
|
||||||
case 0:
|
|
||||||
text = '待支付'
|
|
||||||
break
|
|
||||||
case 1:
|
|
||||||
text = '待发货'
|
|
||||||
break
|
|
||||||
case 2:
|
|
||||||
text = '待收货'
|
|
||||||
break
|
|
||||||
case 3:
|
|
||||||
text = '已完成'
|
|
||||||
break
|
|
||||||
case 4:
|
|
||||||
text = '订单已关闭'
|
|
||||||
break
|
|
||||||
}
|
|
||||||
return text
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getCancelTime() {
|
|
||||||
return (time) => time - Date.now() / 1000
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.payment {
|
|
||||||
margin: 16px 0;
|
|
||||||
padding: 0 40px;
|
|
||||||
|
|
||||||
.payment-hd {
|
|
||||||
> img {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
.status {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.payment-con,
|
|
||||||
.payment-hd {
|
|
||||||
padding: 32px 0;
|
|
||||||
border-bottom: 1px dashed $--border-color-base;
|
|
||||||
}
|
|
||||||
.payment-con {
|
|
||||||
.item {
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.payment-footer {
|
|
||||||
padding: 32px 0;
|
|
||||||
.pay-way {
|
|
||||||
min-width: 200px;
|
|
||||||
padding: 0 20px;
|
|
||||||
height: 68px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 32px;
|
|
||||||
border: 1px dashed $--border-color-base;
|
|
||||||
img {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
width: 134px;
|
|
||||||
height: 40px;
|
|
||||||
border: 1px solid $--border-color-base;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-dialog {
|
|
||||||
.pay-code {
|
|
||||||
width: 270px;
|
|
||||||
height: 270px;
|
|
||||||
}
|
|
||||||
.pay-money {
|
|
||||||
font-size: 18px;
|
|
||||||
margin-top: 24px;
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,326 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="category">
|
|
||||||
<div class="category-hd bg-white">
|
|
||||||
<div class="category-wrap">
|
|
||||||
<div class="category-con flex">
|
|
||||||
<div class="name muted">全部分类：</div>
|
|
||||||
<div class="category-list flex flex-wrap lighter">
|
|
||||||
<div
|
|
||||||
:class="[
|
|
||||||
'item line1',
|
|
||||||
{ active: threeIndex === index },
|
|
||||||
]"
|
|
||||||
v-for="(item, index) in categoryThree"
|
|
||||||
:key="index"
|
|
||||||
@click="changeData(item.id,index)"
|
|
||||||
>
|
|
||||||
{{ item.name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="sort flex bg-white">
|
|
||||||
<div class="title muted">排序方式：</div>
|
|
||||||
<div class="sort-name m-l-16 flex lighter">
|
|
||||||
<div
|
|
||||||
:class="['item', { active: sortType == '' }]"
|
|
||||||
@click="changeSortType('')"
|
|
||||||
>
|
|
||||||
综合
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
:class="['item', { active: sortType == 'price' }]"
|
|
||||||
@click="changeSortType('price')"
|
|
||||||
>
|
|
||||||
价格
|
|
||||||
<i
|
|
||||||
v-show="priceSort == 'desc'"
|
|
||||||
class="el-icon-arrow-down"
|
|
||||||
></i>
|
|
||||||
<i
|
|
||||||
v-show="priceSort == 'asc'"
|
|
||||||
class="el-icon-arrow-up"
|
|
||||||
></i>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
:class="['item', { active: sortType == 'sales_sum' }]"
|
|
||||||
@click="changeSortType('sales_sum')"
|
|
||||||
>
|
|
||||||
销量
|
|
||||||
<i
|
|
||||||
v-show="saleSort == 'desc'"
|
|
||||||
class="el-icon-arrow-down"
|
|
||||||
></i>
|
|
||||||
<i
|
|
||||||
v-show="saleSort == 'asc'"
|
|
||||||
class="el-icon-arrow-up"
|
|
||||||
></i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div
|
|
||||||
:class="['item', { active: sortType == 'brand' && brandList.length}]"
|
|
||||||
@click="changeSortType('brand')"
|
|
||||||
>
|
|
||||||
品牌
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 品牌 -->
|
|
||||||
<div class="sort flex bg-white" v-show="sortType == 'brand' && brandList.length > 0">
|
|
||||||
<div class="category-con flex" style="padding-top: 0;">
|
|
||||||
<div class="name muted">品牌：</div>
|
|
||||||
<div class="category-list flex flex-wrap lighter">
|
|
||||||
<div
|
|
||||||
:class="['item', { active: brandIndex == index }]"
|
|
||||||
@click="getBrandGoods(index)" v-for="(item,index) in brandList" :key="index"
|
|
||||||
>
|
|
||||||
{{ item.name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div v-if="isHasGoods" class="goods-list">
|
|
||||||
<goods-list :list="goodsList" />
|
|
||||||
<div
|
|
||||||
class="pagination flex row-center"
|
|
||||||
style="padding-bottom: 38px"
|
|
||||||
v-if="count"
|
|
||||||
>
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
hide-on-single-page
|
|
||||||
layout="prev, pager, next"
|
|
||||||
:total="count"
|
|
||||||
prev-text="上一页"
|
|
||||||
next-text="下一页"
|
|
||||||
:page-size="20"
|
|
||||||
@current-change="changePage"
|
|
||||||
>
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<null-data
|
|
||||||
v-else
|
|
||||||
:img="require('@/static/images/goods_null.png')"
|
|
||||||
text="暂无商品~"
|
|
||||||
></null-data>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { trottle } from '~/utils/tools'
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: 'icon',
|
|
||||||
type: 'image/x-icon',
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watchQuery: true,
|
|
||||||
async asyncData({ query, $get }) {
|
|
||||||
let { data } = await $get('goodsCategory/getThirdListByKeyword',{
|
|
||||||
params: {
|
|
||||||
keyword:query.name,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
return {
|
|
||||||
categoryList: data,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
count: 0,
|
|
||||||
threeIndex: 0,
|
|
||||||
brandIndex:-1,
|
|
||||||
categoryThree: [],
|
|
||||||
sortType: '',
|
|
||||||
saleSort: 'desc',
|
|
||||||
priceSort: 'desc',
|
|
||||||
brandSort:'desc',
|
|
||||||
page: '',
|
|
||||||
goodsList: [],
|
|
||||||
cateId: 0,
|
|
||||||
isHasGoods: true,
|
|
||||||
brandList:[],//品牌列表
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.changeSortType = trottle(this.changeSortType, 500, this)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changeData(id,index) {
|
|
||||||
const { categoryList } = this
|
|
||||||
this.categoryThree = categoryList;
|
|
||||||
this.threeIndex = index || 0;
|
|
||||||
this.cateId = id || categoryList[this.threeIndex].id;
|
|
||||||
this.getGoods();
|
|
||||||
this.brandIndex = '-1';
|
|
||||||
this.sortType = '';
|
|
||||||
this.brandList = [];
|
|
||||||
},
|
|
||||||
|
|
||||||
changeSortType(type) {
|
|
||||||
this.sortType = type
|
|
||||||
switch (type) {
|
|
||||||
case 'price':
|
|
||||||
if (this.priceSort == 'asc') {
|
|
||||||
this.priceSort = 'desc'
|
|
||||||
} else if (this.priceSort == 'desc') {
|
|
||||||
this.priceSort = 'asc'
|
|
||||||
}
|
|
||||||
break
|
|
||||||
case 'sales_sum':
|
|
||||||
if (this.saleSort == 'asc') {
|
|
||||||
this.saleSort = 'desc'
|
|
||||||
} else if (this.saleSort == 'desc') {
|
|
||||||
this.saleSort = 'asc'
|
|
||||||
}
|
|
||||||
break
|
|
||||||
case 'brand':
|
|
||||||
if (this.brandSort == 'asc') {
|
|
||||||
this.brandSort = 'desc'
|
|
||||||
} else if (this.brandSort == 'desc') {
|
|
||||||
this.brandSort = 'asc'
|
|
||||||
}
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
if(this.sortType == 'brand') {
|
|
||||||
this.getBrand() //获取品牌
|
|
||||||
}else {
|
|
||||||
this.getGoods()
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
changePage(current) {
|
|
||||||
this.page = current
|
|
||||||
this.getGoods()
|
|
||||||
},
|
|
||||||
async getGoods() {
|
|
||||||
const { priceSort, sortType, saleSort } = this
|
|
||||||
const params = {
|
|
||||||
page_size: 20,
|
|
||||||
page_no: this.page,
|
|
||||||
platform_cate_id: this.cateId,
|
|
||||||
}
|
|
||||||
switch (sortType) {
|
|
||||||
case 'price':
|
|
||||||
params.sort_by_price = priceSort
|
|
||||||
break
|
|
||||||
case 'sales_sum':
|
|
||||||
params.sort_by_sales = saleSort
|
|
||||||
break
|
|
||||||
}
|
|
||||||
if(this.brandIndex >= 0) {
|
|
||||||
params.brand_id = this.brandList[this.brandIndex].brand_id;
|
|
||||||
}
|
|
||||||
const {
|
|
||||||
data: { lists, count },
|
|
||||||
} = await this.$get('goods/getGoodsList', {
|
|
||||||
params,
|
|
||||||
})
|
|
||||||
this.goodsList = lists
|
|
||||||
if (!lists.length) {
|
|
||||||
this.isHasGoods = false
|
|
||||||
} else {
|
|
||||||
this.isHasGoods = true
|
|
||||||
}
|
|
||||||
this.count = count
|
|
||||||
},
|
|
||||||
// 获取品牌
|
|
||||||
async getBrand() {
|
|
||||||
const params = {
|
|
||||||
page_size: 20,
|
|
||||||
page_no: this.page,
|
|
||||||
cate_id: this.cateId,
|
|
||||||
}
|
|
||||||
const {
|
|
||||||
data
|
|
||||||
} = await this.$get('goods/getBrandListByCateId', {
|
|
||||||
params,
|
|
||||||
})
|
|
||||||
this.brandList = data
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取品牌商品列表
|
|
||||||
getBrandGoods(index) {
|
|
||||||
this.brandIndex = index;
|
|
||||||
this.getGoods();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
categoryList: {
|
|
||||||
immediate: true,
|
|
||||||
handler(value) {
|
|
||||||
const { id } = this.$route.query
|
|
||||||
this.changeData(Number(id));
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.category {
|
|
||||||
padding: 16px 0;
|
|
||||||
.category-hd {
|
|
||||||
.category-wrap {
|
|
||||||
padding: 0 16px;
|
|
||||||
}
|
|
||||||
.category-con {
|
|
||||||
border-bottom: 1px dashed #e5e5e5;
|
|
||||||
align-items: flex-start;
|
|
||||||
padding-top: 16px;
|
|
||||||
word-wrap: break-word;
|
|
||||||
.name {
|
|
||||||
flex: none;
|
|
||||||
}
|
|
||||||
.item {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
width: 140px;
|
|
||||||
margin-left: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
&.active {
|
|
||||||
color: $--color-primary;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
color: $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sort {
|
|
||||||
padding: 15px 16px;
|
|
||||||
.sort-name {
|
|
||||||
.item {
|
|
||||||
margin-right: 30px;
|
|
||||||
cursor: pointer;
|
|
||||||
&.active {
|
|
||||||
color: $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-list {
|
|
||||||
border-top: 1px dashed #e5e5e5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-list {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,195 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="seckill">
|
|
||||||
<div class="banner mt16 column">
|
|
||||||
<ad-item :item="ad" v-if="ad.image"></ad-item>
|
|
||||||
<el-image v-else :src="require('~/static/images/seckill_banner.png')"></el-image>
|
|
||||||
</div>
|
|
||||||
<div class="time-list">
|
|
||||||
<client-only>
|
|
||||||
<swiper class="swiper" ref="mySwiper" :options="swiperOptions">
|
|
||||||
<swiper-slide :class="{ 'swiper-item': true, active: index === swiperIndex }"
|
|
||||||
v-for="(item, index) in timeList" :key="index">
|
|
||||||
<div class=" white" style="width: 100%; height: 100%" @click="changeTime(index)">
|
|
||||||
<div class="weight-500 xxl flex row-center">{{ item.start_time }}</div>
|
|
||||||
<div class="xs time-status flex row-center">{{ item.tips }}</div>
|
|
||||||
</div>
|
|
||||||
</swiper-slide>
|
|
||||||
<div class="swiper-button-prev" slot="button-prev"></div>
|
|
||||||
<div class="swiper-button-next" slot="button-next"></div>
|
|
||||||
</swiper>
|
|
||||||
</client-only>
|
|
||||||
</div>
|
|
||||||
<div class="goods m-t-16">
|
|
||||||
<template v-if="hasData">
|
|
||||||
<goods-list type="seckill" :list="goodsList" :status="status" />
|
|
||||||
<div class="pagination row-center" style="padding-bottom: 38px" v-if="count">
|
|
||||||
<el-pagination background layout="prev, pager, next" :total="count" prev-text="上一页" next-text="下一页"
|
|
||||||
hide-on-single-page :page-size="10" @current-change="changePage">
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<null-data v-else :img="require('~/static/images/goods_null.png')" text="暂无秒杀~"></null-data>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import goodsList from "../components/goods-list.vue"
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
goodsList
|
|
||||||
},
|
|
||||||
watchQuery: true,
|
|
||||||
async asyncData({ $get }) {
|
|
||||||
let ad = {}
|
|
||||||
const banner = await $get("ad_content/lists",{params: {
|
|
||||||
pid: 24,
|
|
||||||
terminal: 2
|
|
||||||
}});
|
|
||||||
if(banner.data.length) {
|
|
||||||
ad = {
|
|
||||||
image: banner.data[0].image
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const { data } = await $get("seckill_goods/getSeckillTime");
|
|
||||||
console.log(data)
|
|
||||||
let swiperIndex = data.findIndex((item) => item.status == 1);
|
|
||||||
if (swiperIndex == -1) {
|
|
||||||
swiperIndex = data.findIndex((item) => item.status == 2);
|
|
||||||
}
|
|
||||||
return { timeList: data, swiperIndex, ad };
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
ad: {
|
|
||||||
image: 0
|
|
||||||
},
|
|
||||||
page: 1,
|
|
||||||
swiperIndex: 0,
|
|
||||||
count: 0,
|
|
||||||
goodsList: [],
|
|
||||||
timeList: [],
|
|
||||||
hasData: true,
|
|
||||||
swiperOptions: {
|
|
||||||
initialSlide: 0,
|
|
||||||
pagination: {
|
|
||||||
el: ".swiper-pagination",
|
|
||||||
clickable: true,
|
|
||||||
},
|
|
||||||
navigation: {
|
|
||||||
nextEl: ".swiper-button-next",
|
|
||||||
prevEl: ".swiper-button-prev",
|
|
||||||
},
|
|
||||||
preventClicks: true,
|
|
||||||
slidesPerView: "auto",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.swiperOptions.initialSlide = this.swiperIndex;
|
|
||||||
this.getGoods();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changeTime(index) {
|
|
||||||
this.swiperIndex = index;
|
|
||||||
this.getGoods();
|
|
||||||
this.page = 1;
|
|
||||||
this.goodsList = [];
|
|
||||||
},
|
|
||||||
changePage(current) {
|
|
||||||
this.page = current;
|
|
||||||
this.getGoods();
|
|
||||||
},
|
|
||||||
async getGoods() {
|
|
||||||
const { swiperIndex, timeList, page } = this;
|
|
||||||
const id = timeList[swiperIndex] ? timeList[swiperIndex].id : -1;
|
|
||||||
const {
|
|
||||||
data: { lists, count },
|
|
||||||
code,
|
|
||||||
} = await this.$get("seckill_goods/getSeckillGoods", {
|
|
||||||
params: {
|
|
||||||
page_size: 10,
|
|
||||||
page_no: page,
|
|
||||||
seckill_id: id,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (code == 1) {
|
|
||||||
this.goodsList = lists;
|
|
||||||
this.hasData = !!lists.length;
|
|
||||||
this.count = count;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
status() {
|
|
||||||
const { swiperIndex, timeList } = this;
|
|
||||||
return timeList[swiperIndex] ? timeList[swiperIndex].status : -1;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.seckill {
|
|
||||||
.banner {
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.time-list {
|
|
||||||
background-color: #414141;
|
|
||||||
.swiper {
|
|
||||||
padding: 0 40px;
|
|
||||||
--swiper-navigation-size: 20px;
|
|
||||||
--swiper-navigation-color: #fff;
|
|
||||||
.swiper-button-next,
|
|
||||||
.swiper-button-prev {
|
|
||||||
top: 0;
|
|
||||||
width: 25px;
|
|
||||||
height: 100%;
|
|
||||||
margin-top: 0;
|
|
||||||
background-size: 12px 22px;
|
|
||||||
}
|
|
||||||
.swiper-button-prev {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
.swiper-button-next {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
.swiper-item {
|
|
||||||
cursor: pointer;
|
|
||||||
height: 60px;
|
|
||||||
width: 120px;
|
|
||||||
padding: 10px 0;
|
|
||||||
display: inline-block;
|
|
||||||
&.active {
|
|
||||||
color: #fff;
|
|
||||||
background-color: $--color-primary;
|
|
||||||
.time-status {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.time-status {
|
|
||||||
color: #ccc;
|
|
||||||
border-radius: 60px;
|
|
||||||
padding: 1px 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,479 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="shop-cart">
|
|
||||||
<div class="cart-list">
|
|
||||||
<div v-show="!isDataNull">
|
|
||||||
<div class="cart-hd flex bg-white">
|
|
||||||
<div class="check-box">
|
|
||||||
<!-- 更改选中状态 type为1选中店铺/2选中商品/3全选 -->
|
|
||||||
<el-checkbox
|
|
||||||
v-model="isSelectedAll"
|
|
||||||
@change="onBoxClick($event, 3, '')"
|
|
||||||
>全选</el-checkbox
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="info flex row-center">商品信息</div>
|
|
||||||
<div class="price flex row-center">单价</div>
|
|
||||||
<div class="num flex row-center">数量</div>
|
|
||||||
<div class="money flex row-center">合计</div>
|
|
||||||
<div class="operate flex row-center">操作</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="cart-con bg-white">
|
|
||||||
<div
|
|
||||||
class="m-b-10 bg-white"
|
|
||||||
v-for="(item, index) in shopCartList"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<div class="flex shop">
|
|
||||||
<!-- 更改选中状态 type为1选中店铺/2选中商品/3全选 -->
|
|
||||||
<el-checkbox
|
|
||||||
:value="item.is_selected == 1"
|
|
||||||
@change="onBoxClick($event, 1, index)"
|
|
||||||
>
|
|
||||||
</el-checkbox>
|
|
||||||
|
|
||||||
<div class="xs normal m-l-10">
|
|
||||||
{{ item.shop.shop_name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="item flex"
|
|
||||||
v-for="(item2, index2) in item.cart"
|
|
||||||
:key="index2"
|
|
||||||
>
|
|
||||||
<div class="check-box">
|
|
||||||
<!-- 更改选中状态 type为1选中店铺/2选中商品/3全选 -->
|
|
||||||
<el-checkbox
|
|
||||||
:value="item2.selected == 1"
|
|
||||||
@change="
|
|
||||||
onBoxClick($event, 2, item2.cart_id)
|
|
||||||
"
|
|
||||||
>
|
|
||||||
</el-checkbox>
|
|
||||||
</div>
|
|
||||||
<nuxt-link
|
|
||||||
class="info flex"
|
|
||||||
:to="'/goods_details/' + item2.goods_id"
|
|
||||||
>
|
|
||||||
<div class="pictrue flexnone">
|
|
||||||
<img :src="item2.image" alt="" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="name line2">
|
|
||||||
{{ item2.goods_name }}
|
|
||||||
</div>
|
|
||||||
<div class="muted">
|
|
||||||
{{ item2.spec_value_str }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nuxt-link>
|
|
||||||
<div class="price flex row-center">
|
|
||||||
¥{{ item2.price }}
|
|
||||||
</div>
|
|
||||||
<div class="num flex row-center">
|
|
||||||
<number-box
|
|
||||||
:min="1"
|
|
||||||
v-model="item2.goods_num"
|
|
||||||
@change="
|
|
||||||
changeShopCartCount(
|
|
||||||
$event,
|
|
||||||
item2.cart_id
|
|
||||||
)
|
|
||||||
"
|
|
||||||
async-change
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="money flex row-center">
|
|
||||||
¥{{ item2.sub_price }}
|
|
||||||
</div>
|
|
||||||
<el-popconfirm
|
|
||||||
title="确定删除该商品吗？"
|
|
||||||
confirm-button-text="确定"
|
|
||||||
cancel-button-text="取消"
|
|
||||||
icon="el-icon-info"
|
|
||||||
icon-color="red"
|
|
||||||
@confirm="goodsDelete(item2.cart_id)"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="operate flex row-center delete-btn"
|
|
||||||
slot="reference"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="~/static/images/icon_cart_del.png"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</el-popconfirm>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cart-footer flex row-between bg-white">
|
|
||||||
<div class="lighter flex">
|
|
||||||
<div class="check-box">
|
|
||||||
<el-checkbox
|
|
||||||
v-model="isSelectedAll"
|
|
||||||
@change="onBoxClick($event, 3, '')"
|
|
||||||
>全选</el-checkbox
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div style="margin: 0 24px"></div>
|
|
||||||
<el-popconfirm
|
|
||||||
title="确定删除选中商品吗？"
|
|
||||||
confirm-button-text="确定"
|
|
||||||
cancel-button-text="取消"
|
|
||||||
icon="el-icon-info"
|
|
||||||
icon-color="red"
|
|
||||||
@confirm="deleteSelectedGoods"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="xs normal"
|
|
||||||
style="cursor: pointer"
|
|
||||||
slot="reference"
|
|
||||||
>
|
|
||||||
删除选中商品
|
|
||||||
</div>
|
|
||||||
</el-popconfirm>
|
|
||||||
<el-popconfirm
|
|
||||||
title="确定清空吗？"
|
|
||||||
confirm-button-text="确定"
|
|
||||||
cancel-button-text="取消"
|
|
||||||
icon="el-icon-info"
|
|
||||||
icon-color="red"
|
|
||||||
@confirm="deleteAlldGoods"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="m-l-14 xs muted"
|
|
||||||
style="cursor: pointer"
|
|
||||||
slot="reference"
|
|
||||||
>
|
|
||||||
清空购物车
|
|
||||||
</div>
|
|
||||||
</el-popconfirm>
|
|
||||||
</div>
|
|
||||||
<div class="total flex">
|
|
||||||
<div class="flex m-r-14">
|
|
||||||
<div class="xs">已选{{ selected }}件商品</div>
|
|
||||||
<div class="primary m-l-20" style="font-size: 22px">
|
|
||||||
¥{{ totalAmount }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="white lg btn flex row-center"
|
|
||||||
:style="{
|
|
||||||
background:
|
|
||||||
selected == 0 ? '#A4ADB3' : '#FF2C3C',
|
|
||||||
}"
|
|
||||||
@click="toOrderBuy"
|
|
||||||
>
|
|
||||||
去结算
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="column-center data-null" v-show="isDataNull">
|
|
||||||
<img
|
|
||||||
src="@/static/images/cart_null.png"
|
|
||||||
style="width: 150px; height: 150px"
|
|
||||||
/>
|
|
||||||
<div class="muted xs m-t-10">购物车是空的～</div>
|
|
||||||
<div class="m-t-30">
|
|
||||||
<el-button
|
|
||||||
round
|
|
||||||
type="primary"
|
|
||||||
size="medium"
|
|
||||||
@click="toIndex"
|
|
||||||
>去逛逛～</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapActions } from 'vuex'
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: 'icon',
|
|
||||||
type: 'image/x-icon',
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
shopCartList: [],
|
|
||||||
totalAmount: 0,
|
|
||||||
totalNum: 0,
|
|
||||||
isDataNull: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {},
|
|
||||||
computed: {
|
|
||||||
// 是否全选
|
|
||||||
isSelectedAll: {
|
|
||||||
get() {
|
|
||||||
if (!this.shopCartList.length) return false
|
|
||||||
if (this.allInvalid()) return false
|
|
||||||
let index = this.shopCartList.findIndex(
|
|
||||||
(item) => item.is_selected == 0
|
|
||||||
)
|
|
||||||
return index == -1 ? true : false
|
|
||||||
},
|
|
||||||
set(val) {
|
|
||||||
return val
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// 已经选择的数量
|
|
||||||
selected: {
|
|
||||||
get() {
|
|
||||||
return this.shopCartList.reduce((pre, item) => {
|
|
||||||
return pre.concat(item.cart.filter((i) => i.selected == 1))
|
|
||||||
}, []).length
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions(['getPublicData']),
|
|
||||||
async getCartList() {
|
|
||||||
let res = await this.$get('cart/lists')
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.shopCartList = Object.assign([], res.data.lists)
|
|
||||||
this.totalAmount = res.data.total_amount
|
|
||||||
this.totalNum = res.data.total_num
|
|
||||||
|
|
||||||
if (this.shopCartList.length > 0) {
|
|
||||||
this.isDataNull = false
|
|
||||||
} else {
|
|
||||||
this.isDataNull = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 更改选中状态 type为1选中店铺/2选中商品/3全选
|
|
||||||
onBoxClick(e, type, number) {
|
|
||||||
let cartId = []
|
|
||||||
switch (type) {
|
|
||||||
case 1:
|
|
||||||
cartId = this.shopCartList[number].cart.map(
|
|
||||||
(item) => item.cart_id
|
|
||||||
)
|
|
||||||
break
|
|
||||||
case 2:
|
|
||||||
cartId.push(number)
|
|
||||||
break
|
|
||||||
case 3:
|
|
||||||
cartId = this.shopCartList.reduce((pre, item) => {
|
|
||||||
return pre.concat(item.cart.map((i) => i.cart_id))
|
|
||||||
}, cartId)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
this.changeSelected(cartId, e)
|
|
||||||
},
|
|
||||||
cartInvalid(item) {
|
|
||||||
return item.goods_status == 0 || item.goods_del != 0 ? true : false
|
|
||||||
},
|
|
||||||
shopInvalid(item) {
|
|
||||||
return item.cart.every((citem) => this.cartInvalid(citem))
|
|
||||||
},
|
|
||||||
allInvalid() {
|
|
||||||
return this.shopCartList.every((item) => this.shopInvalid(item))
|
|
||||||
},
|
|
||||||
|
|
||||||
// 选中/取消选中购物车
|
|
||||||
async changeSelected(id, selected) {
|
|
||||||
let res = await this.$post('cart/selected', {
|
|
||||||
cart_id: id,
|
|
||||||
selected: selected,
|
|
||||||
})
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.getCartList()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 修改购物车商品数量
|
|
||||||
async changeShopCartCount(number, cartId) {
|
|
||||||
let res = await this.$post('cart/change', {
|
|
||||||
cart_id: cartId,
|
|
||||||
goods_num: number,
|
|
||||||
})
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.getCartList()
|
|
||||||
this.getPublicData()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 删除购物车商品
|
|
||||||
async goodsDelete(cartId) {
|
|
||||||
let res = await this.$post('cart/del', {
|
|
||||||
cart_id: cartId,
|
|
||||||
})
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.getPublicData()
|
|
||||||
this.getCartList()
|
|
||||||
this.$message({
|
|
||||||
message: '删除商品成功',
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 删除选中购物车
|
|
||||||
deleteSelectedGoods() {
|
|
||||||
let selectedGoodsArr = this.shopCartList.reduce((pre, item) => {
|
|
||||||
return pre.concat(item.cart.filter((i) => i.selected == 1))
|
|
||||||
}, [])
|
|
||||||
if (selectedGoodsArr.length <= 0) {
|
|
||||||
this.$message({
|
|
||||||
message: '没有选择商品',
|
|
||||||
type: 'error',
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let cartIdArr = selectedGoodsArr.map((item) => item.cart_id)
|
|
||||||
this.goodsDelete(cartIdArr)
|
|
||||||
},
|
|
||||||
// 清空购物车
|
|
||||||
deleteAlldGoods() {
|
|
||||||
let allGoodsArr = this.shopCartList.reduce((pre, item) => {
|
|
||||||
return pre.concat(item.cart.filter((i) => i.cart_id))
|
|
||||||
}, [])
|
|
||||||
if (allGoodsArr.length <= 0) {
|
|
||||||
this.$message({
|
|
||||||
message: '没有商品',
|
|
||||||
type: 'error',
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let cartIdArr = allGoodsArr.map((item) => item.cart_id)
|
|
||||||
this.goodsDelete(cartIdArr)
|
|
||||||
},
|
|
||||||
getSelectCart() {
|
|
||||||
const { shopCartList } = this
|
|
||||||
return shopCartList.reduce((pre, item) => {
|
|
||||||
return pre.concat(
|
|
||||||
item.cart
|
|
||||||
.filter((i) => i.selected && !this.cartInvalid(i))
|
|
||||||
.map((i) => i.cart_id)
|
|
||||||
)
|
|
||||||
}, [])
|
|
||||||
},
|
|
||||||
// 去购买商品
|
|
||||||
toOrderBuy() {
|
|
||||||
let { shopCartList } = this
|
|
||||||
let goods = []
|
|
||||||
let carts = this.getSelectCart()
|
|
||||||
if (carts.length == 0) return this.$message.err('您还没有选择商品哦')
|
|
||||||
// 处理出商品数组数据
|
|
||||||
shopCartList.forEach((item) => {
|
|
||||||
if (item.cart.length != 0) {
|
|
||||||
item.cart.forEach((el, i) => {
|
|
||||||
// 选中的商品才能进入
|
|
||||||
if (el.selected == 1) {
|
|
||||||
goods.push({
|
|
||||||
item_id: el.item_id,
|
|
||||||
num: el.goods_num,
|
|
||||||
goods_id: el.goods_id,
|
|
||||||
shop_id: item.shop.shop_id,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const params = {
|
|
||||||
carts: carts,
|
|
||||||
goods: goods,
|
|
||||||
type: 'cart',
|
|
||||||
}
|
|
||||||
this.$router.push({
|
|
||||||
path: '/confirm_order',
|
|
||||||
query: {
|
|
||||||
data: encodeURIComponent(JSON.stringify(params)),
|
|
||||||
},
|
|
||||||
})
|
|
||||||
},
|
|
||||||
toIndex() {
|
|
||||||
this.$router.push('/')
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
this.getCartList()
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.shop-cart {
|
|
||||||
padding: 24px 0;
|
|
||||||
.cart-list {
|
|
||||||
min-height: 600px;
|
|
||||||
.cart-hd {
|
|
||||||
height: 50px;
|
|
||||||
color: #101010;
|
|
||||||
padding: 10px 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.cart-con {
|
|
||||||
padding: 0 10px;
|
|
||||||
.shop {
|
|
||||||
padding: 20px 10px;
|
|
||||||
border-bottom: 1px solid #d7d7d7;
|
|
||||||
}
|
|
||||||
.item {
|
|
||||||
padding: 20px 10px;
|
|
||||||
border-bottom: 1px dashed #e5e5e5;
|
|
||||||
}
|
|
||||||
.item:last-child {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.check-box {
|
|
||||||
padding-left: 10px;
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
.info {
|
|
||||||
width: 450px;
|
|
||||||
.pictrue {
|
|
||||||
margin-right: 10px;
|
|
||||||
img {
|
|
||||||
width: 72px;
|
|
||||||
height: 72px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.name {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.price {
|
|
||||||
width: 150px;
|
|
||||||
}
|
|
||||||
.num {
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
.money {
|
|
||||||
width: 150px;
|
|
||||||
}
|
|
||||||
.delete-btn {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.cart-footer {
|
|
||||||
padding: 20px;
|
|
||||||
.total {
|
|
||||||
.btn {
|
|
||||||
width: 152px;
|
|
||||||
height: 50px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.data-null {
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 170px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,160 +0,0 @@
|
||||||
<!-- 店铺街 -->
|
|
||||||
<template>
|
|
||||||
<div class="street">
|
|
||||||
<!-- 店铺卡片 -->
|
|
||||||
<div class="shop-street flex flex-wrap flex-center">
|
|
||||||
<div v-for="(item, index) in shopList" :key="index">
|
|
||||||
<!-- 店铺卡片 -->
|
|
||||||
<div class="shop-cart">
|
|
||||||
<shop-item
|
|
||||||
:cover="item.cover"
|
|
||||||
:shopId="item.id"
|
|
||||||
:logo="item.logo"
|
|
||||||
:type="item.type"
|
|
||||||
:name="item.name"
|
|
||||||
:sales="item.on_sale_goods"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 分页栏 -->
|
|
||||||
<div
|
|
||||||
class=""
|
|
||||||
style="padding-bottom: 38px; text-align: center"
|
|
||||||
v-if="count"
|
|
||||||
>
|
|
||||||
<el-pagination
|
|
||||||
background
|
|
||||||
layout="prev, pager, next"
|
|
||||||
:total="count"
|
|
||||||
prev-text="上一页"
|
|
||||||
next-text="下一页"
|
|
||||||
hide-on-single-page
|
|
||||||
:page-size="pageSize"
|
|
||||||
@current-change="changePage"
|
|
||||||
>
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: 'icon',
|
|
||||||
type: 'image/x-icon',
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async asyncData({ query, $get }) {
|
|
||||||
const {
|
|
||||||
data: { list, count },
|
|
||||||
} = await $get('shop/getShopList', {
|
|
||||||
params: {
|
|
||||||
page_size: 8,
|
|
||||||
page_no: 1,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
return {
|
|
||||||
shopList: list,
|
|
||||||
count: count,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
shopList: [],
|
|
||||||
count: 0,
|
|
||||||
page: 1,
|
|
||||||
pageSize: 8,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
changePage(current) {
|
|
||||||
this.page = current
|
|
||||||
this.getShopList()
|
|
||||||
},
|
|
||||||
|
|
||||||
async getShopList() {
|
|
||||||
const { page, pageSize } = this
|
|
||||||
const {
|
|
||||||
data: { list, count },
|
|
||||||
code,
|
|
||||||
} = await this.$get('shop/getShopList', {
|
|
||||||
params: {
|
|
||||||
page_size: pageSize,
|
|
||||||
page_no: page,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
if (code == 1) {
|
|
||||||
this.shopList = list
|
|
||||||
this.count = count
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.shop-street {
|
|
||||||
width: 1180px;
|
|
||||||
padding: 20px 0;
|
|
||||||
|
|
||||||
.shop-cart {
|
|
||||||
width: 270px;
|
|
||||||
height: 400px;
|
|
||||||
// background-color: lightcoral;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
|
|
||||||
&:not(:nth-of-type(4n)) {
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shop-desc {
|
|
||||||
width: 249px;
|
|
||||||
height: 124px;
|
|
||||||
background-color: #ffffff;
|
|
||||||
margin-top: 247px;
|
|
||||||
margin-bottom: 9px;
|
|
||||||
border-radius: 6px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.shop-logo {
|
|
||||||
position: absolute;
|
|
||||||
top: -26px;
|
|
||||||
left: 89px;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shop-name {
|
|
||||||
margin-top: 52px;
|
|
||||||
padding: 0 10px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #101010;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-num {
|
|
||||||
width: 82px;
|
|
||||||
height: 24px;
|
|
||||||
text-align: center;
|
|
||||||
background: #e5e5e5;
|
|
||||||
padding-top: 4px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,780 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="">
|
|
||||||
<!-- 顶部 -->
|
|
||||||
<div class="bg-white">
|
|
||||||
<div class="flex flex-1 row-center col-center" style="width: 100%; height: 150px;" v-if="shopInfo.banner">
|
|
||||||
<el-image :src="shopInfo.banner" fit="cover" style="height: 100%; width: 100%; max-width: 1920px;">
|
|
||||||
</el-image>
|
|
||||||
</div>
|
|
||||||
<div class="wrapper1180 flex flex-1 col-center row-between" style="height: 40px">
|
|
||||||
<div class="h-item flex row-center" :class="xuanIndex =='' ? 'h-item-x':''" @click="changeXuan('')">
|
|
||||||
店铺首页
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex row-left flex-1">
|
|
||||||
<div class="h-item flex row-center" :class="xuanIndex =='all' ? 'h-item-x':''"
|
|
||||||
@click="changeXuan('all')">
|
|
||||||
全部商品
|
|
||||||
</div>
|
|
||||||
<!-- <div class="" v-for="(item, index) in goodsClassList" :key="index">
|
|
||||||
<div class="h-item flex row-center" :class="xuanIndex == item.id ? 'h-item-x':''"
|
|
||||||
@click="changeXuan(item.id)">
|
|
||||||
{{item.name}}
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
<!-- 商品分类 -->
|
|
||||||
<swiper class="swiper flex row-left" ref="mySwiper" :options="swiperOptions"
|
|
||||||
style="width: 672px; display: flex; justify-content: flex-start;margin: 0;">
|
|
||||||
<swiper-slide class="swiper-item flex row-left" v-for="(itemd, indexd) in goodsClassListGroup"
|
|
||||||
:key="indexd">
|
|
||||||
<div class="flex">
|
|
||||||
<div class="" v-for="(item, index) in itemd" :key="index">
|
|
||||||
<div class="h-item flex row-center" :class="xuanIndex == item.id ? 'h-item-x':''"
|
|
||||||
@click="changeXuan(item.id)">
|
|
||||||
{{item.name}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</swiper-slide>
|
|
||||||
</swiper>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="search">
|
|
||||||
<el-input v-model="keyword" placeholder="店铺搜索" @change="search" size="mini"></el-input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="shop-details flex col-top wrapper1180 flex-1">
|
|
||||||
<!-- left -->
|
|
||||||
<div class="left">
|
|
||||||
<!-- 店铺介绍 -->
|
|
||||||
<div class="shop bg-white">
|
|
||||||
<div class="shop-logo flex-col col-center">
|
|
||||||
<el-image class="logo-img" :src="shopInfo.logo"></el-image>
|
|
||||||
<div class="m-t-10">
|
|
||||||
<el-tag size="mini" v-if="shopInfo.type == 1">自营</el-tag>
|
|
||||||
<span class="weight-500">{{ shopInfo.name }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="xs muted m-t-10 line-5">
|
|
||||||
{{shopInfo.intro}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex m-t-30">
|
|
||||||
<div class="flex-1 text-center">
|
|
||||||
<div class="xxl m-b-10">{{ shopInfo.on_sale_count }}</div>
|
|
||||||
<div>全部商品</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 text-center">
|
|
||||||
<div class="xxl m-b-10">{{ shopInfo.follow_num }}</div>
|
|
||||||
<div>关注人数</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-divider></el-divider>
|
|
||||||
<div class="flex xs m-b-16">
|
|
||||||
<div class="m-r-12">店铺星级</div>
|
|
||||||
<div class="m-t-5">
|
|
||||||
<el-rate v-model="shopInfo.star" disabled> </el-rate>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex xs m-b-16">
|
|
||||||
<div class="m-r-12">店铺评分</div>
|
|
||||||
<div class="">{{ shopInfo.score }}分</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex row-center row-between">
|
|
||||||
<div class="flex row-center">
|
|
||||||
<el-button size="mini" @click="shopFollow">{{
|
|
||||||
shopInfo.shop_follow_status == 1 ? '已关注' : '关注店铺'
|
|
||||||
}}</el-button>
|
|
||||||
</div>
|
|
||||||
<el-popover placement="bottom" width="200" trigger="hover">
|
|
||||||
<div>
|
|
||||||
<el-image style="width: 100%" :src="shopInfo.customer_image"></el-image>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div slot="reference" class="xs lighter text-center">
|
|
||||||
<i class="el-icon-chat-dot-round nr"></i>
|
|
||||||
<span>联系客服</span>
|
|
||||||
</div>
|
|
||||||
</el-popover>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 商品分类 -->
|
|
||||||
<div class="m-t-10 bg-white">
|
|
||||||
<div class="l-fen flex row-center" @click="getClassGoods('')"
|
|
||||||
:class="gClassId == ''?'l-fen-select':''">
|
|
||||||
全部商品
|
|
||||||
</div>
|
|
||||||
<div class="" v-for="(item, index) in goodsClassList" :key="index" @click="getClassGoods(item.id)">
|
|
||||||
<div class="l-fen flex row-center" v-show="index < 4"
|
|
||||||
:class="gClassId == item.id?'l-fen-select':''">
|
|
||||||
{{item.name}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- right -->
|
|
||||||
<div class="right m-l-15">
|
|
||||||
<!-- 领券 -->
|
|
||||||
<div class="bg-white" v-if="couponsList.length && xuanIndex == ''">
|
|
||||||
<div class="coupon-list">
|
|
||||||
<div class="m-b-10 flex row-between">
|
|
||||||
<div class="">
|
|
||||||
领券
|
|
||||||
</div>
|
|
||||||
<div class="flex row-center coupons-more" @click="more=!more" v-if="couponsList.length > 3">
|
|
||||||
<div class="m-r-5">
|
|
||||||
更多
|
|
||||||
</div>
|
|
||||||
<i :class="more?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex" :class="more? 'swiper-item-zk':'swiper-item-c'">
|
|
||||||
<div class="item" v-for="(item, index) in couponsList" :key="index">
|
|
||||||
<div :class="[
|
|
||||||
'info white',
|
|
||||||
{ gray: item.is_get },
|
|
||||||
]">
|
|
||||||
<div class="info-hd flex">
|
|
||||||
<div>
|
|
||||||
<price-formate :price="item.money" :first-size="38" :second-size="38" />
|
|
||||||
</div>
|
|
||||||
<div class="m-l-8 flex1">
|
|
||||||
<div class="line1">{{ item.name }}</div>
|
|
||||||
<div class="xs line1">{{ item.condition_type_desc }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="info-time xs">{{ item.user_time_desc }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex row-between coupon-button">
|
|
||||||
<div class="tips-con xs lighter">
|
|
||||||
{{ item.use_scene_desc }}
|
|
||||||
</div>
|
|
||||||
<div class="primary sm" @click="hqCoupon(item.id)" v-if="!item.is_get">
|
|
||||||
立即领取
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<img v-if="item.is_get" class="receice" src="~/static/images/coupons_img_receive.png"
|
|
||||||
alt="" />
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 店铺推荐 -->
|
|
||||||
<div class="shop-list" v-if="recommend && xuanIndex == ''">
|
|
||||||
<div class="m-b-10">
|
|
||||||
店铺推荐
|
|
||||||
</div>
|
|
||||||
<el-carousel arrow="never" indicator-position="outside" trigger="click" height="300px"
|
|
||||||
:autoplay="false">
|
|
||||||
<el-carousel-item v-for="(itemd, indexd) in recommend" :key="indexd">
|
|
||||||
<div class="flex">
|
|
||||||
|
|
||||||
<div class="shop-item" v-for="(itemg, indexg) in itemd" :key="indexg">
|
|
||||||
<nuxt-link :to="`/goods_details/${itemg.id}`">
|
|
||||||
<div class="">
|
|
||||||
<div class="">
|
|
||||||
<el-image :src="itemg.image" style="height: 200px; width: 200px;">
|
|
||||||
</el-image>
|
|
||||||
</div>
|
|
||||||
<div class="name m-l-10 line-1">
|
|
||||||
{{itemg.name}}
|
|
||||||
</div>
|
|
||||||
<div class="m-l-10 flex">
|
|
||||||
<div class="primary m-r-8">
|
|
||||||
<price-formate :price="itemg.min_price" :first-size="16" />
|
|
||||||
</div>
|
|
||||||
<div class="muted sm line-through">
|
|
||||||
<price-formate :price="itemg.market_price" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-carousel-item>
|
|
||||||
</el-carousel>
|
|
||||||
</div>
|
|
||||||
<!-- 分类商品 -->
|
|
||||||
<div :class="xuanIndex == ''? 'm-t-10':''">
|
|
||||||
<div class="sort m-b-16 flex bg-white col-top" id="goods-sort">
|
|
||||||
<div class="sort-title">排序方式：</div>
|
|
||||||
<div class="sort-name m-l-16 flex">
|
|
||||||
<div :class="['item', { active: sortType == '' }]" @click="changeSortType('')">
|
|
||||||
综合
|
|
||||||
</div>
|
|
||||||
<div :class="['item', { active: sortType == 'price' }]" @click="changeSortType('price')">
|
|
||||||
价格
|
|
||||||
<i v-show="priceSort == 'desc'" class="el-icon-arrow-down"></i>
|
|
||||||
<i v-show="priceSort == 'asc'" class="el-icon-arrow-up"></i>
|
|
||||||
</div>
|
|
||||||
<div :class="['item', { active: sortType == 'sales_sum' }]"
|
|
||||||
@click="changeSortType('sales_sum')">
|
|
||||||
销量
|
|
||||||
<i v-show="saleSort == 'desc'" class="el-icon-arrow-down"></i>
|
|
||||||
<i v-show="saleSort == 'asc'" class="el-icon-arrow-up"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<template v-if="goodsList.length">
|
|
||||||
<goods-list :list="goodsList" :num="4" />
|
|
||||||
<div class="pagination flex m-t-30 row-center" style="padding-bottom: 38px" v-if="count">
|
|
||||||
<el-pagination background layout="prev, pager, next" :total="count" prev-text="上一页"
|
|
||||||
next-text="下一页" hide-on-single-page :page-size="20" @current-change="changePage">
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<null-data v-else :img="require('~/static/images/goods_null.png')" text="暂无商品~"></null-data>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
trottle
|
|
||||||
} from "~/utils/tools";
|
|
||||||
import {
|
|
||||||
Message
|
|
||||||
} from 'element-ui';
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [{
|
|
||||||
rel: 'icon',
|
|
||||||
type: 'image/x-icon',
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
}, ],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
layout: "street",
|
|
||||||
|
|
||||||
components: {},
|
|
||||||
async asyncData({
|
|
||||||
$get,
|
|
||||||
query,
|
|
||||||
}) {
|
|
||||||
// 店铺信息
|
|
||||||
const
|
|
||||||
shopData = await $get("shop/getShopInfo", {
|
|
||||||
params: {
|
|
||||||
shop_id: query.id
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (shopData.code == 1) {
|
|
||||||
if (shopData.data.goods_list.length > 0) {
|
|
||||||
var num = [];
|
|
||||||
for (var i = 0; i < Math.ceil(shopData.data.goods_list.length / 4); i++) {
|
|
||||||
var start = i * 4;
|
|
||||||
var end = start + 4;
|
|
||||||
num.push(shopData.data.goods_list.slice(start, end));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
console.log('num', num)
|
|
||||||
|
|
||||||
// 获取优惠券
|
|
||||||
const
|
|
||||||
coupon = await $get("coupon/getCouponList", {
|
|
||||||
params: {
|
|
||||||
shop_id: query.id
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// 商品分类
|
|
||||||
const
|
|
||||||
goodsClass = await $get("shop_goods_category/getShopGoodsCategory", {
|
|
||||||
params: {
|
|
||||||
shop_id: query.id
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (goodsClass.code == 1) {
|
|
||||||
if (goodsClass.data.length > 0) {
|
|
||||||
var group = [];
|
|
||||||
for (var i = 0; i < Math.ceil(goodsClass.data.length / 6); i++) {
|
|
||||||
var start = i * 6;
|
|
||||||
var end = start + 6;
|
|
||||||
group.push(goodsClass.data.slice(start, end));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
console.log('group', group)
|
|
||||||
|
|
||||||
return {
|
|
||||||
recommend: num, // 推荐列表
|
|
||||||
shopInfo: shopData.data, // 商家信息
|
|
||||||
goodsClassList: goodsClass.data, // 商品分类列表
|
|
||||||
goodsClassListGroup: group, // 商品分类切割列表
|
|
||||||
couponsList: coupon.data.lists, // 优惠券列表
|
|
||||||
};
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
goodsClassListGroup: [],
|
|
||||||
recommend: [],
|
|
||||||
couponsList: [],
|
|
||||||
gClassId: '',
|
|
||||||
shopInfo: [],
|
|
||||||
goodsClassList: [],
|
|
||||||
swiperOptions: {
|
|
||||||
pagination: {
|
|
||||||
el: '.swiper-pagination',
|
|
||||||
clickable: true,
|
|
||||||
},
|
|
||||||
navigation: {
|
|
||||||
nextEl: '.swiper-button-next',
|
|
||||||
prevEl: '.swiper-button-prev',
|
|
||||||
},
|
|
||||||
preventClicks: true,
|
|
||||||
slidesPerView: 'auto',
|
|
||||||
autoplay: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
sortType: "",
|
|
||||||
saleSort: "desc",
|
|
||||||
priceSort: "desc",
|
|
||||||
page: 1,
|
|
||||||
count: 0,
|
|
||||||
goodsList: [],
|
|
||||||
|
|
||||||
more: false,
|
|
||||||
|
|
||||||
keyword: '',
|
|
||||||
xuanIndex: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
this.getGoods();
|
|
||||||
this.changeSortType = trottle(this.changeSortType, 500, this);
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
// 搜索商品
|
|
||||||
search() {
|
|
||||||
this.getGoods()
|
|
||||||
|
|
||||||
// 搜索后跳转到商品列表位置
|
|
||||||
if(this.xuanIndex == '') {
|
|
||||||
setTimeout(() => {
|
|
||||||
document.getElementById('goods-sort').scrollIntoView()
|
|
||||||
}, 500)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 顶部商品分类选择事件
|
|
||||||
changeXuan(id) {
|
|
||||||
this.xuanIndex = id
|
|
||||||
if (id == 'all') {
|
|
||||||
this.gClassId = ''
|
|
||||||
this.getGoods()
|
|
||||||
} else {
|
|
||||||
this.gClassId = id
|
|
||||||
this.getGoods()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 店铺信息
|
|
||||||
async getShopData() {
|
|
||||||
const
|
|
||||||
shopData = await this.$get("shop/getShopInfo", {
|
|
||||||
params: {
|
|
||||||
shop_id: this.$route.query.id
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (shopData.code == 1) {
|
|
||||||
|
|
||||||
this.shopInfo = shopData.data
|
|
||||||
// 切割推荐列表
|
|
||||||
if (shopData.data.goods_list.length > 0) {
|
|
||||||
var num = [];
|
|
||||||
for (var i = 0; i < Math.ceil(shopData.data.goods_list.length / 4); i++) {
|
|
||||||
var start = i * 4;
|
|
||||||
var end = start + 4;
|
|
||||||
num.push(shopData.data.goods_list.slice(start, end));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('num', num)
|
|
||||||
this.recommend = num
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
// 关注店铺
|
|
||||||
shopFollow() {
|
|
||||||
const a = this.$post("shop_follow/changeStatus", {
|
|
||||||
shop_id: this.$route.query.id
|
|
||||||
});
|
|
||||||
this.getShopData()
|
|
||||||
},
|
|
||||||
|
|
||||||
// 领取优惠券
|
|
||||||
async hqCoupon(id) {
|
|
||||||
const {
|
|
||||||
msg,
|
|
||||||
code
|
|
||||||
} = await this.$post("coupon/getCoupon", {
|
|
||||||
coupon_id: id,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: msg,
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.getCouponList()
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取优惠券列表
|
|
||||||
async getCouponList() {
|
|
||||||
const
|
|
||||||
coupon = await this.$get("coupon/getCouponList", {
|
|
||||||
params: {
|
|
||||||
shop_id: this.$route.query.id
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
// 点击商品分类
|
|
||||||
getClassGoods(id) {
|
|
||||||
this.gClassId = id
|
|
||||||
|
|
||||||
if (id == '') {
|
|
||||||
this.xuanIndex = 'all'
|
|
||||||
} else {
|
|
||||||
this.xuanIndex = id
|
|
||||||
}
|
|
||||||
|
|
||||||
this.getGoods()
|
|
||||||
},
|
|
||||||
|
|
||||||
changeSortType(type) {
|
|
||||||
this.sortType = type;
|
|
||||||
switch (type) {
|
|
||||||
case "price":
|
|
||||||
if (this.priceSort == "asc") {
|
|
||||||
this.priceSort = "desc";
|
|
||||||
} else if (this.priceSort == "desc") {
|
|
||||||
this.priceSort = "asc";
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case "sales_sum":
|
|
||||||
if (this.saleSort == "asc") {
|
|
||||||
this.saleSort = "desc";
|
|
||||||
} else if (this.saleSort == "desc") {
|
|
||||||
this.saleSort = "asc";
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
}
|
|
||||||
this.getGoods();
|
|
||||||
},
|
|
||||||
changePage(current) {
|
|
||||||
this.page = current;
|
|
||||||
this.getGoods();
|
|
||||||
},
|
|
||||||
async getGoods() {
|
|
||||||
const {
|
|
||||||
name
|
|
||||||
} = this.$route.query;
|
|
||||||
const {
|
|
||||||
priceSort,
|
|
||||||
sortType,
|
|
||||||
saleSort
|
|
||||||
} = this;
|
|
||||||
let sort = "";
|
|
||||||
switch (sortType) {
|
|
||||||
case "price":
|
|
||||||
sort = priceSort;
|
|
||||||
break;
|
|
||||||
case "sales_sum":
|
|
||||||
sort = saleSort;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
const {
|
|
||||||
data: {
|
|
||||||
list,
|
|
||||||
count
|
|
||||||
},
|
|
||||||
} = await this.$get("pc/goodsList", {
|
|
||||||
params: {
|
|
||||||
page_size: 20,
|
|
||||||
page_no: this.page,
|
|
||||||
sort_type: sortType,
|
|
||||||
sort,
|
|
||||||
category_id: this.gClassId,
|
|
||||||
shop_id: this.$route.query.id,
|
|
||||||
name: this.keyword,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
this.count = count
|
|
||||||
this.goodsList = list;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.shop {
|
|
||||||
width: 227px;
|
|
||||||
padding: 15px;
|
|
||||||
|
|
||||||
.logo-img {
|
|
||||||
width: 62px;
|
|
||||||
height: 62px;
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-rate__icon {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-item {
|
|
||||||
width: 82px;
|
|
||||||
height: 24px;
|
|
||||||
margin-right: 30px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-item-x {
|
|
||||||
border-radius: 100px;
|
|
||||||
background-color: #FF2C3C;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
|
||||||
width: 240px;
|
|
||||||
|
|
||||||
::v-deep .el-input {
|
|
||||||
width: 240px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.shop-details {
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.left {
|
|
||||||
.l-border {
|
|
||||||
padding-bottom: 27px;
|
|
||||||
border-bottom: 1px solid #EEEEEE;
|
|
||||||
margin-bottom: 27px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desc {
|
|
||||||
color: #101010;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desc-b {
|
|
||||||
color: #FFFFFF;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desc-n {
|
|
||||||
color: #FFFFFF;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desc-n {
|
|
||||||
color: #101010;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-btn {
|
|
||||||
width: 82px;
|
|
||||||
height: 29px;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid rgba(187, 187, 187, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-shop {
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
padding: 20px 15px;
|
|
||||||
width: 210px;
|
|
||||||
height: 364px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r-color-h {
|
|
||||||
background-color: #A4ADB3;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-tips {
|
|
||||||
padding: 1px 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-fen {
|
|
||||||
width: 210px;
|
|
||||||
height: 44px;
|
|
||||||
line-height: 20px;
|
|
||||||
color: rgba(16, 16, 16, 100);
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-fen-select {
|
|
||||||
color: #FF2C3C;
|
|
||||||
;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
width: 961px;
|
|
||||||
|
|
||||||
.coupon-list {
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
padding: 20px 0;
|
|
||||||
margin: 0 20px;
|
|
||||||
border-bottom: 1px solid #EEEEEE;
|
|
||||||
|
|
||||||
.coupons-more {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-item-c {
|
|
||||||
width: 760px;
|
|
||||||
// height: 120px;
|
|
||||||
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-item-zk {
|
|
||||||
width: 770px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.shop-list {
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
height: 360px;
|
|
||||||
padding: 0 20px;
|
|
||||||
padding-top: 10px;
|
|
||||||
|
|
||||||
.shop-item {
|
|
||||||
width: 200px;
|
|
||||||
height: 298px;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
margin-right: 12px;
|
|
||||||
|
|
||||||
.name {
|
|
||||||
color: rgba(16, 16, 16, 100);
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: left;
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.sort {
|
|
||||||
padding: 16px 16px 0;
|
|
||||||
|
|
||||||
.sort-name {
|
|
||||||
.item {
|
|
||||||
margin-right: 30px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: #FF2C3C
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper {}
|
|
||||||
|
|
||||||
.swiper-item {
|
|
||||||
width: 672px;
|
|
||||||
// box-sizing: content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
margin-right: 16px;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.coupon-button {
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
width: 240px;
|
|
||||||
height: 30px;
|
|
||||||
padding: 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
padding: 0 10px;
|
|
||||||
background: url("~/static/images/bg_coupon_s.png") no-repeat;
|
|
||||||
width: 240px;
|
|
||||||
height: 80px;
|
|
||||||
background-size: 100%;
|
|
||||||
|
|
||||||
&.gray {
|
|
||||||
background-image: url("~/static/images/bg_coupon.png");
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-hd {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips {
|
|
||||||
position: relative;
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
height: 30px;
|
|
||||||
padding: 0 8px;
|
|
||||||
|
|
||||||
.tips-con {
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
position: absolute;
|
|
||||||
top: 30px;
|
|
||||||
padding: 10px;
|
|
||||||
z-index: 99;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.receice {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0px;
|
|
||||||
width: 58px;
|
|
||||||
height: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.choose {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
background-color: #ffe72c;
|
|
||||||
color: $--color-primary;
|
|
||||||
padding: 1px 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.more {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
right: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,128 +0,0 @@
|
||||||
<!-- 专区内页 -->
|
|
||||||
<template>
|
|
||||||
<div class="special-area">
|
|
||||||
<div class="header-top">
|
|
||||||
<el-breadcrumb style="flex: 1;" separator="/">
|
|
||||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item class="line1" style="max-width: 800px;">{{ name }}</el-breadcrumb-item>
|
|
||||||
</el-breadcrumb>
|
|
||||||
</div>
|
|
||||||
<div class="m-b-20 header-img">
|
|
||||||
<!-- <el-image :src="require('@/static/images/special_area_bg.jpg')" style="height: 240px; width: 1180px;"></el-image> -->
|
|
||||||
<div class="header-img-tile flex-col col-center row-center">
|
|
||||||
<div class="max-title white">
|
|
||||||
{{ name }}
|
|
||||||
</div>
|
|
||||||
<div class="m-t-22 min-title white">
|
|
||||||
{{ title }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<template v-if="goodsList.length">
|
|
||||||
<goods-list :list="goodsList" />
|
|
||||||
<div class="pagination flex m-t-30 row-center" style="padding-bottom: 38px" v-if="count">
|
|
||||||
<el-pagination background layout="prev, pager, next" :total="count" prev-text="上一页" next-text="下一页"
|
|
||||||
hide-on-single-page :page-size="20" @current-change="changePage">
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<null-data v-else :img="require('~/static/images/goods_null.png')" text="暂无商品~"></null-data>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [{
|
|
||||||
rel: 'icon',
|
|
||||||
type: 'image/x-icon',
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
}, ],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async asyncData({ query }) {
|
|
||||||
|
|
||||||
return {
|
|
||||||
name: query.name,
|
|
||||||
title: query.title,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
goodsList: [],
|
|
||||||
page: 1,
|
|
||||||
count: 0,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
// 获取商品
|
|
||||||
async getGoods() {
|
|
||||||
const id = this.$route.query.id
|
|
||||||
let {
|
|
||||||
code,
|
|
||||||
data: {
|
|
||||||
list,
|
|
||||||
count
|
|
||||||
}
|
|
||||||
} = await this.$get("activity_area/activityGoodsList", {
|
|
||||||
params: {
|
|
||||||
id: id,
|
|
||||||
page_no: this.page,
|
|
||||||
page_size: 20,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
if (code == 1) {
|
|
||||||
this.goodsList = list
|
|
||||||
this.count = count
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
changePage(current) {
|
|
||||||
this.page = current;
|
|
||||||
this.getGoods();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
this.getGoods()
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.special-area {
|
|
||||||
.header-top {
|
|
||||||
margin: 16px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-img {
|
|
||||||
width: 1180px;
|
|
||||||
height: 240px;
|
|
||||||
background: url(../static/images/special_area_bg.jpg);
|
|
||||||
|
|
||||||
.header-img-tile {
|
|
||||||
|
|
||||||
.max-title {
|
|
||||||
margin-top: 65px;
|
|
||||||
font-size: 32px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.min-title {
|
|
||||||
padding: 5px 27px;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 100px;
|
|
||||||
background-color: rgba(186, 122, 246);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,164 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="detail">
|
|
||||||
|
|
||||||
<div class="m-t-20">
|
|
||||||
<el-breadcrumb separator="/">
|
|
||||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item :to="{ path: '/store_settled' }"><a>商家入驻</a></el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item :to="{ path: '/store_settled/record' }"><a>申请列表</a></el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item>详情</el-breadcrumb-item>
|
|
||||||
</el-breadcrumb>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="main bg-white m-t-20">
|
|
||||||
|
|
||||||
<div class="header">
|
|
||||||
<div class="m-b-30 pointer" @click="$router.back();">
|
|
||||||
<i class="el-icon-arrow-left"></i>
|
|
||||||
返回
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="detail.audit_status==1">
|
|
||||||
<div class="flex normal xxl bold" style="font-weight:600">
|
|
||||||
<img class="m-r-12" src="~/static/images/time.png" alt="">
|
|
||||||
恭喜您，资料提交成功
|
|
||||||
</div>
|
|
||||||
<div class="xs muted m-t-12 m-l-42">
|
|
||||||
预计在3个工作日内审核完毕，如通过我们将会发送短信通知您，请注意查收！
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="detail.audit_status==3">
|
|
||||||
<div class="flex normal xxl bold" style="font-weight:600">
|
|
||||||
<img class="m-r-12" src="~/static/images/error.png" alt="">
|
|
||||||
很遗憾，审核不通过！
|
|
||||||
</div>
|
|
||||||
<div class="xs muted m-t-12 m-l-42">
|
|
||||||
请尽量完善您的资料信息再重新提交！
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="detail.audit_status==2">
|
|
||||||
<div class="flex normal xxl bold" style="font-weight:600">
|
|
||||||
<img class="m-r-12" src="~/static/images/success.png" alt="">
|
|
||||||
恭喜您，审核已通过！
|
|
||||||
</div>
|
|
||||||
<div class="xs muted m-t-12 m-l-42">
|
|
||||||
您的审核已通过
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="admin m-t-20">
|
|
||||||
<div class="xs p-t-16">
|
|
||||||
<span>PC管理后台地址：</span>
|
|
||||||
<a :href="detail.admin_address">
|
|
||||||
{{detail.admin_address}}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="xs m-t-16">
|
|
||||||
<span>商家账号：</span>
|
|
||||||
<a href="" target="_blank" rel="noopener noreferrer">
|
|
||||||
{{detail.account}}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="xs m-t-16">
|
|
||||||
<span>登录密码：</span>
|
|
||||||
登录密码：密码是您在创建账号时设置的登录密码，如忘记密码可联系官方客服进行修改！
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<div class="xl bold normal m-b-30">资料详情</div>
|
|
||||||
<el-form :model="detail" size="medium" :label-position="'left'" ref="form" label-width="110px"
|
|
||||||
class="demo-form">
|
|
||||||
<el-form-item label="商家名称:" prop="name">
|
|
||||||
<span>{{detail.name}}</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="主营类目:" prop="name">
|
|
||||||
<span>{{detail.cid_desc}}</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系人姓名:" prop="name">
|
|
||||||
<span>{{detail.nickname}}</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="手机号码:" prop="name">
|
|
||||||
<span>{{detail.mobile}}</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="商家账号:" prop="name">
|
|
||||||
<span>{{detail.account}}</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="营业执照:" prop="name">
|
|
||||||
<el-image v-for="(item, index) in detail.license" :key="index"
|
|
||||||
style="width: 72px; height: 72px; margin-right: 10px" :src="item" fit="fit"></el-image>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
detail: {},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
async mounted() {
|
|
||||||
console.log(this.$route.query.id);
|
|
||||||
const { data } = await this.$get("ShopApply/detail", {
|
|
||||||
params: { id: this.$route.query.id },
|
|
||||||
});
|
|
||||||
this.detail = data
|
|
||||||
|
|
||||||
console.log("我艹啊私房话哀诉还是");
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scope>
|
|
||||||
.detail {
|
|
||||||
width: 100%;
|
|
||||||
height: 788px;
|
|
||||||
.main {
|
|
||||||
width: 100%;
|
|
||||||
height: 788px;
|
|
||||||
padding: 30px;
|
|
||||||
.header {
|
|
||||||
padding: 0px 0 40px;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
border-bottom: 1px dotted #e5e5e5;
|
|
||||||
img {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
.admin {
|
|
||||||
background: #f6f6f6;
|
|
||||||
padding: 0 30px;
|
|
||||||
padding-bottom: 16px;
|
|
||||||
a:hover {
|
|
||||||
color: #ff2c3c;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,303 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="m-t-20">
|
|
||||||
<el-breadcrumb separator="/">
|
|
||||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item>商家入驻</el-breadcrumb-item>
|
|
||||||
</el-breadcrumb>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="store bg-white m-t-16">
|
|
||||||
|
|
||||||
<div class="main">
|
|
||||||
<div class="title">入驻申请</div>
|
|
||||||
<el-form :model="form" :rules="rules" ref="form" label-width="110px" class="demo-form">
|
|
||||||
<el-form-item label="商家名称:" prop="name">
|
|
||||||
<el-input v-model="form.name" placeholder="请输入商家名称"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="主营类目:" prop="cid">
|
|
||||||
<el-select v-model="form.cid" placeholder="请选择" style="width: 100%">
|
|
||||||
<el-option v-for="item in category" :key="item.id" :label="item.name" :value="item.id">
|
|
||||||
{{item.name}}
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系人姓名:" prop="nickname">
|
|
||||||
<el-input v-model="form.nickname" placeholder="请输入联系人姓名"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="手机号码:" prop="mobile">
|
|
||||||
<el-input v-model="form.mobile" placeholder="请输入手机号码"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="验证码:" prop="code">
|
|
||||||
<el-input v-model="form.code" placeholder="请输入验证码" style="width:355px"></el-input>
|
|
||||||
<el-button style="margin-left: 14px;width: 175px" @click="sndSmsToPhone">
|
|
||||||
<div v-if="canSendPwd">获取验证码</div>
|
|
||||||
<count-down v-else :time="60" format="ss秒" autoStart @finish="canSendPwd = true" />
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="创建账号:" prop="account">
|
|
||||||
<el-input v-model="form.account" placeholder="请设置登录账号(可用手机号代替)"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="设置密码:" prop="password">
|
|
||||||
<el-input v-model="form.password" placeholder="请输入登录密码"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="营业执照:" prop="">
|
|
||||||
<el-upload class="avatar-uploader" :action="action" :show-file-list="true"
|
|
||||||
list-type="picture-card" :on-success="uploadFileSuccess" :on-remove="handleRemove"
|
|
||||||
:headers="{token: $store.state.token}">
|
|
||||||
<i class="el-icon-picture avatar-uploader-icon"></i>
|
|
||||||
<div class="m-t-20 xs">上传图片</div>
|
|
||||||
</el-upload>
|
|
||||||
<div class="xs muted">支持jpg、png、jpeg格式的图片，最多可上传10张</div>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="">
|
|
||||||
<div class="xs muted m-t-20">
|
|
||||||
<el-checkbox v-model="checked"></el-checkbox>
|
|
||||||
同意并阅读<span class="primary pointer" @click="dialogVisible=true">《服务协议》</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex m-t-10">
|
|
||||||
<el-button style="width: 213px;" class="bg-primary white" @click="onSubmitStore('form')">
|
|
||||||
提交申请
|
|
||||||
</el-button>
|
|
||||||
<span class="m-l-20 xs muted pointer"
|
|
||||||
@click="$router.push('/store_settled/record')">查看申请记录</span>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 服务协议 -->
|
|
||||||
<el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
|
|
||||||
<div style="height: 40vh;overflow-y: auto;">
|
|
||||||
<div v-html="content">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span slot="footer" class="dialog-footer">
|
|
||||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
||||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
|
||||||
</span>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import config from "~/config/app";
|
|
||||||
import { SMSType } from "~/utils/type";
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: 'icon',
|
|
||||||
type: 'image/x-icon',
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
checked: false,
|
|
||||||
action: config.baseUrl + "/api/file/formimage",
|
|
||||||
category: [], //类目
|
|
||||||
fileList: [],
|
|
||||||
content: "", //隐私协议
|
|
||||||
dialogVisible: false, //是否显示服务协议
|
|
||||||
canSendPwd: true, //是否验证码
|
|
||||||
form: {
|
|
||||||
cid: "", //类目ID
|
|
||||||
clabel: "", //类目名称
|
|
||||||
name: "", //商家名称
|
|
||||||
nickname: "", //联系人姓名
|
|
||||||
mobile: "", //手机号码
|
|
||||||
account: "", //账号
|
|
||||||
password: "", //密码
|
|
||||||
code: "", //验证码
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
name: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: "请输入商家名称",
|
|
||||||
trigger: "blur",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
cid: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: "请选择主营类目",
|
|
||||||
trigger: "change",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
nickname: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: "请输入联系人姓名",
|
|
||||||
trigger: "blur",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
mobile: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: "请输入手机号码",
|
|
||||||
trigger: "blur",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pattern: /^1[3|4|5|7|8][0-9]{9}$/,
|
|
||||||
message: "请输入正确的手机号",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
code: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: "请输入验证码",
|
|
||||||
trigger: "blur",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
account: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: "请输入登录账号",
|
|
||||||
trigger: "blur",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
password: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: "请输入设置登录密码",
|
|
||||||
trigger: "blur",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
imageForm: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: "请上传营业执照",
|
|
||||||
trigger: "blur",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
async asyncData({ $get }) {
|
|
||||||
const { data } = await $get("shop_category/getList");
|
|
||||||
return { category: data };
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.getServiceData();
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
async sndSmsToPhone() {
|
|
||||||
if (!/^1[3|4|5|7|8][0-9]{9}$/.test(this.form.mobile))
|
|
||||||
return this.$message.error("请输入正确的手机号码");
|
|
||||||
const { code } = await this.$post("sms/send", {
|
|
||||||
mobile: this.form.mobile,
|
|
||||||
key: SMSType.SJSQYZ,
|
|
||||||
});
|
|
||||||
if (code == 1) {
|
|
||||||
this.canSendPwd = false;
|
|
||||||
return this.$message.success("发送成功");
|
|
||||||
} else return this.$message.error("发送失败");
|
|
||||||
},
|
|
||||||
|
|
||||||
uploadFileSuccess(res, fileList) {
|
|
||||||
this.fileList.push(res.data.uri);
|
|
||||||
console.log(res, this.fileList);
|
|
||||||
},
|
|
||||||
|
|
||||||
handleRemove(file, fileList) {
|
|
||||||
console.log(fileList);
|
|
||||||
if (fileList.length >= 0) {
|
|
||||||
const res = fileList.map((item) => item.response.data.uri);
|
|
||||||
this.fileList = res;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async getServiceData() {
|
|
||||||
const res = await this.$get("ShopApply/getTreaty");
|
|
||||||
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.content = res.data.content;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onSubmitStore(formName) {
|
|
||||||
if (!this.checked)
|
|
||||||
return this.$message.error("请同意并阅读服务协议");
|
|
||||||
this.$refs[formName].validate(async (valid) => {
|
|
||||||
if (valid) {
|
|
||||||
const { data, code, msg } = await this.$post(
|
|
||||||
"ShopApply/apply",
|
|
||||||
{
|
|
||||||
...this.form,
|
|
||||||
license: this.fileList,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
if (code == 1) {
|
|
||||||
// data.id
|
|
||||||
this.$router.push({
|
|
||||||
path: "/store_settled/detail",
|
|
||||||
query: {
|
|
||||||
id: data.id,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else return false;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scope>
|
|
||||||
.store {
|
|
||||||
width: 100%;
|
|
||||||
.main {
|
|
||||||
width: 660px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding-bottom: 52px;
|
|
||||||
.title {
|
|
||||||
padding: 16px 0;
|
|
||||||
color: #101010;
|
|
||||||
font-size: 18px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
::v-deep .el-input__inner {
|
|
||||||
border-radius: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-uploader .el-upload {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
border: 1px solid #d9d9d9;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
line-height: 0px;
|
|
||||||
padding: 20px 0;
|
|
||||||
color: #101010;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
.avatar-uploader .el-upload:hover {
|
|
||||||
border-color: #ff2c3c;
|
|
||||||
}
|
|
||||||
.avatar-uploader-icon {
|
|
||||||
font-size: 28px;
|
|
||||||
color: #8c939d;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.avatar {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,84 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="record">
|
|
||||||
<div class="m-t-20">
|
|
||||||
<el-breadcrumb separator="/">
|
|
||||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item :to="{ path: '/store_settled' }"><a>商家入驻</a></el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item>申请列表</el-breadcrumb-item>
|
|
||||||
</el-breadcrumb>
|
|
||||||
</div>
|
|
||||||
<div class="main bg-white m-t-20">
|
|
||||||
|
|
||||||
<el-table :data="record" style="width: 100%" size="medium"
|
|
||||||
:header-cell-style="{background:'#eee',color:'#606266'}">
|
|
||||||
<el-table-column prop="name" label="商家名称" max-width="180">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="audit_status_desc" label="审核状态" max-width="180">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<div class="primary" v-if="scope.row.audit_status==3">{{scope.row.audit_status_desc}}</div>
|
|
||||||
<div v-else>{{scope.row.audit_status_desc}}</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="apply_time" label="提交时间" max-width="180">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="操作" max-width="180">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<div class="pointer" @click="$router.push({
|
|
||||||
path: '/store_settled/detail',
|
|
||||||
query: {
|
|
||||||
id: scope.row.id
|
|
||||||
}
|
|
||||||
})">查看详情</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
record: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
// console.log("我艹啊私房话哀诉还是");
|
|
||||||
},
|
|
||||||
|
|
||||||
async asyncData({ $get }) {
|
|
||||||
const { data } = await $get("ShopApply/record");
|
|
||||||
console.log(data);
|
|
||||||
return { record: data.lists };
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scope>
|
|
||||||
.record {
|
|
||||||
width: 100%;
|
|
||||||
height: 788px;
|
|
||||||
.main {
|
|
||||||
padding: 18px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,198 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="address-list">
|
|
||||||
<div class="address-header lg">收货地址</div>
|
|
||||||
<div class="address-content" v-show="!isDataNull">
|
|
||||||
<el-table :data="addressList" style="width: 100%">
|
|
||||||
<el-table-column prop="contact" label="收货人" width="200" />
|
|
||||||
<el-table-column prop="telephone" label="手机号码" width="150" />
|
|
||||||
<el-table-column prop="addressDetail" label="收货地区" />
|
|
||||||
<el-table-column fixed="right" label="操作" max-width="216">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<div class="flex">
|
|
||||||
<div class="flex m-r-20" style="margin-left: 36px;cursor: pointer;" @click="setDefault(scope.row)">
|
|
||||||
<div :class="{'default-border': scope.row.is_default == 0}"
|
|
||||||
style="width: 16px;height: 16px;margin-right: 8px;"
|
|
||||||
v-if="scope.row.is_default == 0" />
|
|
||||||
<img :class="{'default-border': scope.row.is_default == 0}"
|
|
||||||
style="width: 16px;height: 16px;margin-right: 8px;" v-else
|
|
||||||
src="~/static/images/logistics_success.png" />
|
|
||||||
<div class="nr" :class="{'primary': scope.row.is_default == 1}">
|
|
||||||
{{scope.row.is_default == 1 ? '设为默认' : '设为默认'}}</div>
|
|
||||||
<!-- <el-radio v-model="scope.row.is_default" >{{scope.row.is_default == 1 ? '默认' : '设为默认'}}</el-radio> logistics_success -->
|
|
||||||
</div>
|
|
||||||
<div style="margin-right: 24px;">
|
|
||||||
<el-button @click="modifyRow(scope.row)" type="text" class="nr" size="small">修改
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info"
|
|
||||||
icon-color="red" title="确定要删除地址吗？" @confirm="deleteAddress(scope.row)">
|
|
||||||
<el-button type="text" slot="reference" size="small" class="nr">删除</el-button>
|
|
||||||
</el-popconfirm>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<div class="add-address-btn flex row-end">
|
|
||||||
<el-button type="primary" style="width: 106px" @click="showAddressPop">添加地址</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="column-center data-null" v-show="isDataNull">
|
|
||||||
<img style="width: 150px;height: 150px" src="@/static/images/address_null.png" />
|
|
||||||
<div class="muted xs m-t-8">暂无地址记录～</div>
|
|
||||||
<div class="m-t-30">
|
|
||||||
<el-button type="primary" style="width: 106px" @click="showAddressPop">添加地址</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<address-add v-model="addressPop" :aid="editId == -1 ? '' : editId" @success="getAddressList" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
layout: "user",
|
|
||||||
async asyncData({ $get, $post }) {
|
|
||||||
let addressList = [];
|
|
||||||
let isDataNull = true;
|
|
||||||
let res = await $get("user_address/lists");
|
|
||||||
if (res.code == 1) {
|
|
||||||
addressList = res.data;
|
|
||||||
addressList.forEach((item) => {
|
|
||||||
item.addressDetail =
|
|
||||||
item.province +
|
|
||||||
" " +
|
|
||||||
item.city +
|
|
||||||
" " +
|
|
||||||
item.district +
|
|
||||||
" " +
|
|
||||||
item.address;
|
|
||||||
});
|
|
||||||
if (addressList.length <= 0) {
|
|
||||||
isDataNull = true;
|
|
||||||
} else {
|
|
||||||
isDataNull = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
addressList,
|
|
||||||
isDataNull,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
addressPop: false,
|
|
||||||
editId: -1,
|
|
||||||
isDataNull: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {},
|
|
||||||
methods: {
|
|
||||||
modifyRow(e) {
|
|
||||||
this.editId = e.id;
|
|
||||||
this.addressPop = true;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 设置默认地址
|
|
||||||
async setDefault(e) {
|
|
||||||
let res = await this.$post("user_address/setdefault", { id: e.id });
|
|
||||||
if (res.code == 1) {
|
|
||||||
await this.getAddressList();
|
|
||||||
this.$message({
|
|
||||||
message: "设置成功",
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取地址列表
|
|
||||||
async getAddressList() {
|
|
||||||
let res = await this.$get("user_address/lists");
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.addressList = res.data;
|
|
||||||
this.addressList.forEach((item) => {
|
|
||||||
item.addressDetail =
|
|
||||||
item.province +
|
|
||||||
" " +
|
|
||||||
item.city +
|
|
||||||
" " +
|
|
||||||
item.district +
|
|
||||||
" " +
|
|
||||||
item.address;
|
|
||||||
});
|
|
||||||
if (this.addressList.length <= 0) {
|
|
||||||
this.isDataNull = true;
|
|
||||||
} else {
|
|
||||||
this.isDataNull = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 删除地址
|
|
||||||
async deleteAddress(e) {
|
|
||||||
let res = await this.$post("user_address/del", { id: e.id });
|
|
||||||
if (res.code == 1) {
|
|
||||||
await this.getAddressList();
|
|
||||||
this.$message({
|
|
||||||
message: "删除成功",
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 显示添加地址
|
|
||||||
showAddressPop() {
|
|
||||||
this.addressPop = true;
|
|
||||||
this.editId = -1;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.address-list {
|
|
||||||
width: 980px;
|
|
||||||
padding: 10px;
|
|
||||||
.address-header {
|
|
||||||
padding: 10px 5px;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
.address-content {
|
|
||||||
margin-top: 15px;
|
|
||||||
.default-border {
|
|
||||||
border: 1px solid #e5e5e5;
|
|
||||||
border-radius: 60px;
|
|
||||||
}
|
|
||||||
::v-deep .el-table {
|
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
::v-deep .el-table .el-button--text {
|
|
||||||
color: #222;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
::v-deep .el-table th {
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
}
|
|
||||||
::v-deep .el-table thead {
|
|
||||||
color: #555555;
|
|
||||||
}
|
|
||||||
.add-address-btn {
|
|
||||||
margin-top: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.data-null {
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 150px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,229 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="apply-detail">
|
|
||||||
<div class="apply-detail-content">
|
|
||||||
<el-table :data="lists.order_goods" style="width: 100%">
|
|
||||||
<el-table-column prop="date" label="商品信息" max-width="180">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<div class="flex">
|
|
||||||
<el-image style="width: 80px; height: 80px" :src="scope.row.image" fit="fit"></el-image>
|
|
||||||
<div class="m-l-10">
|
|
||||||
<div class="line-2">
|
|
||||||
{{scope.row.goods_name}}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{{scope.row.spec_value}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="name" label="价格" width="180">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
¥{{scope.row.goods_price}}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="goods_num" label="数量" width="180">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="address" label="申请状态" width="180">
|
|
||||||
<template>{{lists.status_text}}</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<div class="m-t-30" style="padding: 0 20px">
|
|
||||||
<div class="result-content">
|
|
||||||
<div class="result-item flex">
|
|
||||||
<div class="label">退款类型:</div>
|
|
||||||
<div class="desc">{{lists.refund_type_text}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="result-item flex">
|
|
||||||
<div class="label">退款原因:</div>
|
|
||||||
<div class="desc">{{lists.refund_reason}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="result-item flex">
|
|
||||||
<div class="label">退款金额:</div>
|
|
||||||
<div class="desc">
|
|
||||||
<price-formate :price="lists.refund_price" showSubscript color="red" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="result-item flex">
|
|
||||||
<div class="label">申请时间:</div>
|
|
||||||
<div class="desc">{{lists.create_time}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="result-item flex">
|
|
||||||
<div class="label">退款编号:</div>
|
|
||||||
<div class="desc">{{lists.sn}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="result-item flex">
|
|
||||||
<div class="label">退款说明:</div>
|
|
||||||
<div class="column desc">
|
|
||||||
<div class="m-b-16"></div>
|
|
||||||
<el-image style="width: 76px;height: 76px;" :src="lists.refund_image"
|
|
||||||
v-if="lists.refund_image" :preview-src-list="[lists.refund_image]" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="apply-detail-address flex" v-if="lists.refund_type_text == '退款退货' && lists.status == 2">
|
|
||||||
退货地址：{{lists.shop.contact||'-'}},{{lists.shop.mobile||'-'}}, {{lists.shop.address||'-'}}
|
|
||||||
<div class="copy pointer" @click="onCopy">复制</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="btn-group flex row-center m-t-60">
|
|
||||||
<el-popconfirm title="确定撤销商品吗？" confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info"
|
|
||||||
icon-color="red" @confirm="cancelApply(lists.id)">
|
|
||||||
<el-button class="apply-btn flex row-center sm" size="small" slot="reference"
|
|
||||||
v-if="lists.status!=6">撤销申请</el-button>
|
|
||||||
</el-popconfirm>
|
|
||||||
<el-button class="apply-btn flex row-center sm" size="small" v-if="lists.status==2"
|
|
||||||
@click="showInput=true">填写快递单号</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<input-express v-model="showInput" @success="getDetail" :aid="lists.id" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
layout: "user",
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
lists: {
|
|
||||||
order_goods: [],
|
|
||||||
shop: {},
|
|
||||||
},
|
|
||||||
showInput: false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.getDetail();
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
async getDetail() {
|
|
||||||
let res = await this.$get("after_sale/detail", {
|
|
||||||
params: {
|
|
||||||
id: this.$route.query.afterSaleId,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (res.code == 1) {
|
|
||||||
let goods = [res.data.order_goods];
|
|
||||||
res.data.order_goods = goods;
|
|
||||||
console.log(goods);
|
|
||||||
this.lists = res.data;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onCopy() {
|
|
||||||
// this.deliverOrder.invoice_no;
|
|
||||||
let oInput = document.createElement("input");
|
|
||||||
oInput.value = this.lists.shop.address;
|
|
||||||
document.body.appendChild(oInput);
|
|
||||||
oInput.select();
|
|
||||||
document.execCommand("Copy");
|
|
||||||
this.$message.success("复制成功");
|
|
||||||
oInput.remove();
|
|
||||||
},
|
|
||||||
|
|
||||||
async cancelApply(afterSaleId) {
|
|
||||||
let res = await this.$post("after_sale/cancel", {
|
|
||||||
id: afterSaleId,
|
|
||||||
});
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: res.msg,
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$router.go(-1);
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
goRefund(afterSaleId, orderId, itemId) {
|
|
||||||
this.$router.push(
|
|
||||||
"/user/after_sales/apply_result?afterSaleId=" +
|
|
||||||
afterSaleId +
|
|
||||||
"&order_id=" +
|
|
||||||
orderId +
|
|
||||||
"&item_id=" +
|
|
||||||
itemId
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.apply-detail {
|
|
||||||
padding: 10px;
|
|
||||||
.apply-detail-header {
|
|
||||||
padding: 15px 0;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
.apply-detail-address {
|
|
||||||
margin: 0 10px;
|
|
||||||
padding-top: 16px;
|
|
||||||
border-top: 1px solid #e5e5e5;
|
|
||||||
|
|
||||||
.copy {
|
|
||||||
margin-left: 20px;
|
|
||||||
padding: 2px 6px;
|
|
||||||
color: $--color-primary;
|
|
||||||
background-color: rgba(255, 44, 60, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.result-content {
|
|
||||||
padding: 24px 20px;
|
|
||||||
.result-item {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
&:not(:last-of-type) {
|
|
||||||
.label {
|
|
||||||
width: 82px;
|
|
||||||
align-self: flex-start;
|
|
||||||
text-align: right;
|
|
||||||
&::before {
|
|
||||||
content: "* ";
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.label {
|
|
||||||
width: 82px;
|
|
||||||
align-self: flex-start;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.desc {
|
|
||||||
margin-left: 24px;
|
|
||||||
width: 680px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.apply-detail-content {
|
|
||||||
.btn-group {
|
|
||||||
.apply-btn {
|
|
||||||
border: 1px solid #cccccc;
|
|
||||||
border-radius: 2px;
|
|
||||||
width: 100px;
|
|
||||||
height: 32px;
|
|
||||||
align-self: flex-start;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,106 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="apply-result-container">
|
|
||||||
<div class="result-header flex">
|
|
||||||
<img style="width: 40px;height: 40px;align-self: flex-start" src="~/static/images/pay_success.png" />
|
|
||||||
<div class="m-l-16">
|
|
||||||
<div class="apply-title" style="font-weight: 500;">提交申请</div>
|
|
||||||
<div class="muted m-t-8">申请已提交，请耐心等待商家处理…</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="result-content">
|
|
||||||
<div class="result-item flex">
|
|
||||||
<div class="label">退款类型：</div>
|
|
||||||
<div class="desc">{{lists.refund_type_text}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="result-item flex">
|
|
||||||
<div class="label">退款原因：</div>
|
|
||||||
<div class="desc">{{lists.refund_reason}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="result-item flex">
|
|
||||||
<div class="label">退款金额：</div>
|
|
||||||
<div class="desc">
|
|
||||||
<price-formate :price="lists.refund_price" showSubscript color="red" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="result-item flex">
|
|
||||||
<div class="label">退款说明：</div>
|
|
||||||
<div class="column desc">
|
|
||||||
<div class="m-b-16">{{lists.refund_remark}}</div>
|
|
||||||
<el-image style="width: 76px;height: 76px;" :src="lists.refund_image" v-if="lists.refund_image" :preview-src-list="[lists.refund_image]" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [{ rel: "icon", type: "image/x-icon", href: this.$store.getters.favicon}],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
layout: "user",
|
|
||||||
async asyncData({$get, query}) {
|
|
||||||
const data = {
|
|
||||||
id: query.afterSaleId
|
|
||||||
};
|
|
||||||
let lists = {}
|
|
||||||
let res = await $get("after_sale/detail", {params: data});
|
|
||||||
if(res.code == 1) {
|
|
||||||
lists = res.data;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
lists,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.apply-result-container {
|
|
||||||
padding: 10px;
|
|
||||||
.result-header {
|
|
||||||
padding: 46px 20px;
|
|
||||||
border-bottom: 1px solid #E5E5E5;
|
|
||||||
.apply-title {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.result-content {
|
|
||||||
padding: 24px 20px;
|
|
||||||
.result-item {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
&:not(:last-of-type) {
|
|
||||||
.label {
|
|
||||||
width: 82px;
|
|
||||||
align-self: flex-start;
|
|
||||||
text-align: right;
|
|
||||||
&::before {
|
|
||||||
content: '* ';
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.label {
|
|
||||||
width: 82px;
|
|
||||||
align-self: flex-start;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.desc {
|
|
||||||
margin-left: 24px;
|
|
||||||
width: 680px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,242 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="apply-sale-list">
|
|
||||||
<div class="goods-info">
|
|
||||||
<div class="table-head flex">
|
|
||||||
<div class="info">商品信息</div>
|
|
||||||
<div class="price flex row-center">单价</div>
|
|
||||||
<div class="num flex row-center">数量</div>
|
|
||||||
<div class="sum flex row-center">合计</div>
|
|
||||||
<div class="act-pay flex row-center">实付</div>
|
|
||||||
</div>
|
|
||||||
<div class="table-content flex m-t-10">
|
|
||||||
<div class="info flex">
|
|
||||||
<div class="flex">
|
|
||||||
<el-image style="width: 72px;height: 72px; flex: none" :src="goods.image" />
|
|
||||||
<div class="m-l-10" style="flex: 1; align-self: flex-start">
|
|
||||||
<div class="line2">{{goods.goods_name}}</div>
|
|
||||||
<div class="mt10 muted sm">{{goods.spec_value}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="price flex row-center" style="align-self: flex-start">
|
|
||||||
<price-formate :price="goods.goods_price" />
|
|
||||||
</div>
|
|
||||||
<div class="num flex row-center" style="align-self: flex-start">
|
|
||||||
{{goods.goods_num}}
|
|
||||||
</div>
|
|
||||||
<div class="sum flex row-center" style="align-self: flex-start">
|
|
||||||
<price-formate :price="goods.total_price" />
|
|
||||||
</div>
|
|
||||||
<div class="act-pay flex row-center" style="align-self: flex-start">
|
|
||||||
<price-formate :price="goods.total_pay_price" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="apply-form">
|
|
||||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
|
||||||
<el-form-item label="退款类型：" prop="applyType">
|
|
||||||
<el-radio-group v-model="applyType" @change="applyRadioChange">
|
|
||||||
<el-radio label="仅退款"></el-radio>
|
|
||||||
<el-radio label="退货退款"></el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="退款原因：" prop="reason">
|
|
||||||
<el-select v-model="form.reason" placeholder="请选择">
|
|
||||||
<el-option :label="item" :value="item" v-for="(item, index) in reason" :key="index" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="退款说明：" prop="desc">
|
|
||||||
<el-input style="width: 600px" type="textarea" v-model="form.desc" placeholder="退款说明（200字以内）"
|
|
||||||
maxlength="200" show-word-limit resize="none" rows="5" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<upload isSlot :file-list="fileList" @remove="uploadSuccess" @success="uploadSuccess" :limit="3">
|
|
||||||
<div class="" style="height: 100%">
|
|
||||||
<i class="el-icon-camera xs" style="font-size: 24px" />
|
|
||||||
</div>
|
|
||||||
</upload>
|
|
||||||
<div class="xs muted">最多可上传3张图片，支持jpg、png格式，图片大小1M以内</div>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<div class="flex">
|
|
||||||
<el-button type="primary" @click="onSubmit">提交申请</el-button>
|
|
||||||
<div class="m-l-20">
|
|
||||||
退款金额：<span class="primary">¥{{goods.total_price}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
layout: "user",
|
|
||||||
name: "applySale",
|
|
||||||
async asyncData({ $get, $post, query }) {
|
|
||||||
let goods = {};
|
|
||||||
let reason = [];
|
|
||||||
let res = await $get("after_sale/goodsInfo", {
|
|
||||||
params: {
|
|
||||||
order_id: query.order_id,
|
|
||||||
item_id: query.item_id,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (res.code == 1) {
|
|
||||||
goods = res.data.goods;
|
|
||||||
reason = res.data.reason;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
reason,
|
|
||||||
goods,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
applyType: "仅退款",
|
|
||||||
form: {
|
|
||||||
applyType: 0,
|
|
||||||
reason: "",
|
|
||||||
desc: "",
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
applyType: [{ required: true, message: "请选择退款类型" }],
|
|
||||||
reason: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: "请选择退款原因",
|
|
||||||
triggle: "blur",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
fileList: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
applyRadioChange(value) {
|
|
||||||
value == "仅退款"
|
|
||||||
? (this.form.applyType = 0)
|
|
||||||
: (this.form.applyType = 1);
|
|
||||||
},
|
|
||||||
|
|
||||||
onSubmit(e) {
|
|
||||||
this.$refs["form"].validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
if (this.$route.query.afterSaleId) {
|
|
||||||
this.applyAgainFun();
|
|
||||||
} else {
|
|
||||||
this.$applyAfterSale();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onUploadChange(e) {
|
|
||||||
let fileList = Object.assign([], this.fileList);
|
|
||||||
fileList.push(e);
|
|
||||||
this.fileList = fileList;
|
|
||||||
console.log("onChange", e, " fileList:", this.fileList);
|
|
||||||
},
|
|
||||||
|
|
||||||
uploadSuccess(e) {
|
|
||||||
this.fileList = e.map((item) => item.response.data.uri);
|
|
||||||
},
|
|
||||||
|
|
||||||
// 重新申请
|
|
||||||
async $applyAgain() {
|
|
||||||
const data = {
|
|
||||||
id: this.$route.query.afterSaleId,
|
|
||||||
reason: this.form.reason,
|
|
||||||
refund_type: this.form.applyType,
|
|
||||||
remark: this.form.desc,
|
|
||||||
img: fileList.length <= 0 ? "" : this.fileList[0],
|
|
||||||
};
|
|
||||||
let res = await $post("after_sale/again", data);
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: "提交成功",
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
this.$router.push(
|
|
||||||
"/user/after_sales/apply_result?afterSaleId=" +
|
|
||||||
res.data.after_sale_id
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 初次申请售后
|
|
||||||
async $applyAfterSale() {
|
|
||||||
console.log(this.fileList[0])
|
|
||||||
const data = {
|
|
||||||
item_id: this.$route.query.item_id,
|
|
||||||
order_id: this.$route.query.order_id,
|
|
||||||
reason: this.form.reason,
|
|
||||||
refund_type: this.form.applyType,
|
|
||||||
remark: this.form.desc,
|
|
||||||
// 目前只支持单个
|
|
||||||
img: this.fileList[0],
|
|
||||||
};
|
|
||||||
let res = await this.$post("after_sale/add", data);
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: "提交成功",
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
this.$router.push(
|
|
||||||
"/user/after_sales/apply_result?afterSaleId=" +
|
|
||||||
res.data.after_sale_id
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.apply-sale-list {
|
|
||||||
padding: 10px;
|
|
||||||
.goods-info {
|
|
||||||
.table-head {
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
.table-content {
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
.info {
|
|
||||||
width: 500px;
|
|
||||||
}
|
|
||||||
.price {
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
.num {
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
.sum {
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
.act-pay {
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.apply-form {
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,148 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="after-sales">
|
|
||||||
<div class="after-sales-header">
|
|
||||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
||||||
<el-tab-pane v-for="(item, index) in afterSale" :key="index" :label="item.name" :name="item.type">
|
|
||||||
<template v-if="item.list.length">
|
|
||||||
<after-sales-list :type="item.type" :lists="item.list" @refresh="getAfterSaleList"
|
|
||||||
@show="onInputShow" />
|
|
||||||
<div class="pagination row-center" v-if="item.count">
|
|
||||||
<el-pagination hide-on-single-page background layout="prev, pager, next" :total="item.count"
|
|
||||||
prev-text="上一页" next-text="下一页" :page-size="10" @current-change="changePage">
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<null-data :img="require('~/static/images/order_null.png')" text="暂无售后~"></null-data>
|
|
||||||
</template>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
<input-express v-model="showInput" :aid="aid" @success="getAfterSaleList" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { AfterSaleType } from "@/utils/type";
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
layout: "user",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
activeName: AfterSaleType.NORMAL,
|
|
||||||
afterSale: [
|
|
||||||
{
|
|
||||||
type: AfterSaleType.NORMAL,
|
|
||||||
list: [],
|
|
||||||
name: "售后申请",
|
|
||||||
count: 0,
|
|
||||||
page: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: AfterSaleType.HANDLING,
|
|
||||||
list: [],
|
|
||||||
name: "处理中",
|
|
||||||
count: 0,
|
|
||||||
page: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: AfterSaleType.FINISH,
|
|
||||||
list: [],
|
|
||||||
name: "已处理",
|
|
||||||
count: 0,
|
|
||||||
page: 1,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
showInput: false,
|
|
||||||
aid: -1,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
async asyncData({ $get, $post }) {
|
|
||||||
let afterList = [];
|
|
||||||
let res = await $get("after_sale/lists", {
|
|
||||||
params: { page_no: 1, page_size: 10 },
|
|
||||||
});
|
|
||||||
if (res.code == 1) {
|
|
||||||
const { list, count } = res.data;
|
|
||||||
afterList = { list, count };
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
afterList: afterList,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleClick() {
|
|
||||||
this.getAfterSaleList();
|
|
||||||
},
|
|
||||||
|
|
||||||
onInputShow(e) {
|
|
||||||
this.aid = e;
|
|
||||||
this.showInput = true;
|
|
||||||
},
|
|
||||||
|
|
||||||
changePage(val) {
|
|
||||||
this.afterSale.some((item) => {
|
|
||||||
if (item.type == this.activeName) {
|
|
||||||
item.page = val;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.getAfterSaleList();
|
|
||||||
},
|
|
||||||
async getAfterSaleList() {
|
|
||||||
const { activeName, afterSale } = this;
|
|
||||||
const item = afterSale.find((item) => item.type == activeName);
|
|
||||||
const {
|
|
||||||
data: { list, count },
|
|
||||||
code,
|
|
||||||
} = await this.$get("after_sale/lists", {
|
|
||||||
params: {
|
|
||||||
page_size: 10,
|
|
||||||
page_no: item.page,
|
|
||||||
type: activeName,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (code == 1) {
|
|
||||||
this.afterList = { list, count };
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
afterList: {
|
|
||||||
immediate: true,
|
|
||||||
handler(val) {
|
|
||||||
this.afterSale.some((item) => {
|
|
||||||
if (item.type == this.activeName) {
|
|
||||||
Object.assign(item, val);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.after-sales {
|
|
||||||
.after-sales-header {
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
::v-deep .el-tabs__header {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
::v-deep .el-tabs .el-tabs__nav-scroll {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,336 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="user-collection-container">
|
|
||||||
<div class="user-collection-content">
|
|
||||||
<el-tabs v-model="activeName" class="mt10" @tab-click="handleClick">
|
|
||||||
<el-tab-pane v-for="(item, index) in userCollection" :label="item.name" :name="item.type+''"
|
|
||||||
:key="index">
|
|
||||||
<div v-if="index == activeName">
|
|
||||||
|
|
||||||
<template v-if="userCollection[activeName].lists.length">
|
|
||||||
<!-- 商品收藏 -->
|
|
||||||
<template v-if="activeName == 0">
|
|
||||||
<div @click.stop="$router.push({
|
|
||||||
path: '/goods_details/'+item2.id
|
|
||||||
})" class="goods"
|
|
||||||
v-for="(item2, index2) in item.lists" :key="index2">
|
|
||||||
<div class="goods-image">
|
|
||||||
<el-image style="width: 180px; height: 180px" :src="item2.image" fit="fit">
|
|
||||||
</el-image>
|
|
||||||
<div class="goods-image-wrap flex">
|
|
||||||
<div @click.stop="cancelColl(item2.id)">取消收藏</div>
|
|
||||||
<div @click.stop="$router.push({
|
|
||||||
path: '/shop_street_detail',
|
|
||||||
query: {
|
|
||||||
id: item2.shop_id
|
|
||||||
}
|
|
||||||
})">进入店铺</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="goods-name m-t-10">
|
|
||||||
<div class="line-2">{{item2.name}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="m-t-14">
|
|
||||||
<span class="primary xl">¥{{item2.min_price}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 店铺收藏 -->
|
|
||||||
<template v-if="activeName == 1">
|
|
||||||
<div class="shop flex" style="width:100%" v-for="(item2, index2) in item.lists" :key="index2">
|
|
||||||
<!-- 店铺 -->
|
|
||||||
<div class="shop-item flex-col row-right" :style="{
|
|
||||||
'background-image': `url(${item2.cover})`,
|
|
||||||
}">
|
|
||||||
<div class="shop-wrap xs flex">
|
|
||||||
<div @click.stop="cancelColl(item2.id)">取消收藏</div>
|
|
||||||
<div @click.stop="$router.push({
|
|
||||||
path: '/shop_street_detail',
|
|
||||||
query: {
|
|
||||||
id: item2.shop_id
|
|
||||||
}
|
|
||||||
})">进入店铺</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-white shop-info text-center">
|
|
||||||
<el-image class="logo" :src="item2.logo"></el-image>
|
|
||||||
<div class="m-t-12 line-1 lg">
|
|
||||||
{{ item2.name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 店铺下的商品 -->
|
|
||||||
<div style="width: 100%" class="flex-1 m-l-20" v-if="item2.goods_list.length >= 1">
|
|
||||||
<div class="shop-title flex row-between">
|
|
||||||
<span>店铺推荐</span>
|
|
||||||
<div class="pointer" @click.stop="$router.push({
|
|
||||||
path: '/shop_street_detail',
|
|
||||||
query: {
|
|
||||||
id: item2.shop_id
|
|
||||||
}
|
|
||||||
})">
|
|
||||||
进入店铺<i class="el-icon-arrow-right"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="m-t-20 flex">
|
|
||||||
<div class="m-r-16" @click.stop="$router.push({
|
|
||||||
path: '/goods_details/'+item3.id
|
|
||||||
})" v-for="(item3, index3) in item2.goods_list" :key="index3">
|
|
||||||
<el-image style="width: 150px; height: 150px" :src="item3.image"
|
|
||||||
fit="fit">
|
|
||||||
</el-image>
|
|
||||||
<div class="primary flex row-center m-t-10">
|
|
||||||
¥{{item3.min_price}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else>
|
|
||||||
<null-data :img="require('~/static/images/profit_null.png')" text="暂无收藏~"></null-data>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
<!-- <null-data
|
|
||||||
style="padding: 150px"
|
|
||||||
img-style="width: 94px;height:118px"
|
|
||||||
:img="require('~/assets/images/img_null.png')"
|
|
||||||
text="请前往移动端进行查看"
|
|
||||||
></null-data> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
layout: "user",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
activeName: 0,
|
|
||||||
recodeList: {},
|
|
||||||
userCollection: [
|
|
||||||
{
|
|
||||||
type: 0,
|
|
||||||
lists: [],
|
|
||||||
name: "商品",
|
|
||||||
count: 0,
|
|
||||||
page: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 1,
|
|
||||||
lists: [],
|
|
||||||
name: "店铺",
|
|
||||||
count: 0,
|
|
||||||
page: 1,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
fetch() {
|
|
||||||
this.handleClick();
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getRecodeList();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleClick() {
|
|
||||||
this.getRecodeList();
|
|
||||||
},
|
|
||||||
|
|
||||||
changePage(val) {
|
|
||||||
this.userCollection.some((item) => {
|
|
||||||
if (item.type == this.activeName) {
|
|
||||||
item.page = val;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.getRecodeList();
|
|
||||||
},
|
|
||||||
|
|
||||||
async getRecodeList() {
|
|
||||||
const { activeName, userCollection } = this;
|
|
||||||
const item = userCollection.find((item) => item.type == activeName);
|
|
||||||
const {
|
|
||||||
data: { lists, count },
|
|
||||||
code,
|
|
||||||
} =
|
|
||||||
activeName == 0
|
|
||||||
? await this.$get("goods_collect/lists", {
|
|
||||||
params: {
|
|
||||||
page_size: 10,
|
|
||||||
page_no: item.page,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
: await this.$get("pc/shopFollowList", {
|
|
||||||
params: {
|
|
||||||
page_size: 10,
|
|
||||||
page_no: item.page,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (code == 1) {
|
|
||||||
this.recodeList = { lists, count };
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async cancelColl(id) {
|
|
||||||
const { code, msg } =
|
|
||||||
this.activeName == 0
|
|
||||||
? await this.$post("goods_collect/changeStatus", {
|
|
||||||
goods_id: id,
|
|
||||||
})
|
|
||||||
: await this.$post("shop_follow/changeStatus", {
|
|
||||||
shop_id: id,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (code == 1) {
|
|
||||||
this.$message.success("取消成功");
|
|
||||||
}
|
|
||||||
this.getRecodeList();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
recodeList: {
|
|
||||||
immediate: true,
|
|
||||||
handler(val) {
|
|
||||||
console.log("val:", val);
|
|
||||||
this.userCollection.some((item) => {
|
|
||||||
if (item.type == this.activeName) {
|
|
||||||
Object.assign(item, val);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.user-collection-container {
|
|
||||||
width: 980px;
|
|
||||||
padding: 10px 10px 60px 10px;
|
|
||||||
|
|
||||||
::v-deep .el-tabs__header {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-tabs .el-tabs__nav-scroll {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-collection-content {
|
|
||||||
// margin-top: 17px;
|
|
||||||
.goods {
|
|
||||||
width: 180px;
|
|
||||||
height: 260px;
|
|
||||||
margin-right: 15px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
float: left;
|
|
||||||
&-image {
|
|
||||||
width: 180px;
|
|
||||||
height: 180px;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
&-image:hover .goods-image-wrap {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
&-image-wrap {
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 180px;
|
|
||||||
height: 26px;
|
|
||||||
padding: 8px 0;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s linear;
|
|
||||||
background-color: rgba(0, 0, 0, 0.2);
|
|
||||||
> div {
|
|
||||||
width: 90px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
> div:first-child {
|
|
||||||
border-right: 1px solid #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.goods:nth-child(5n) {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
.goods-name {
|
|
||||||
height: 36px;
|
|
||||||
color: #101010;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shop {
|
|
||||||
padding: 20px 0;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
|
|
||||||
.shop-item:hover .shop-wrap {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.shop-item {
|
|
||||||
width: 148px;
|
|
||||||
height: 220px;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 6px;
|
|
||||||
position: relative;
|
|
||||||
.shop-wrap {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
width: 148px;
|
|
||||||
height: 26px;
|
|
||||||
padding: 8px 0;
|
|
||||||
color: #fff;
|
|
||||||
opacity: 0;
|
|
||||||
text-align: center;
|
|
||||||
transition: opacity 0.2s linear;
|
|
||||||
background-color: rgba(0, 0, 0, 0.2);
|
|
||||||
> div {
|
|
||||||
width: 74px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
> div:first-child {
|
|
||||||
border-right: 1px solid #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shop-info {
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 18px 15px;
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-top: -45px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shop:last-child {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,133 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="user-coupons">
|
|
||||||
<div class="coupons-header lg">
|
|
||||||
我的优惠券
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tabs">
|
|
||||||
<el-button v-for="(value,key,index) in expand" @click="changeTabs(index)" :key="key" class="button m-l-18"
|
|
||||||
:class="index==active?'active':''" type="primary">
|
|
||||||
{{coupons[index].title}}({{value}})</el-button>
|
|
||||||
|
|
||||||
<div v-for="(item2, index2) in coupons" :key="index2">
|
|
||||||
<div class="m-t-20" v-if="index2==active">
|
|
||||||
<coupons-list v-if="item2.hasData" :list="item2.list" :type="active" />
|
|
||||||
<null-data v-else :img="require('~/static/images/coupon_null.png')" text="暂无优惠券~"></null-data>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
layout: "user",
|
|
||||||
components: {},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
active: 0,
|
|
||||||
expand: {
|
|
||||||
valid: 0,
|
|
||||||
used: 0,
|
|
||||||
expired: 0,
|
|
||||||
},
|
|
||||||
coupons: [
|
|
||||||
{
|
|
||||||
title: "可使用",
|
|
||||||
type: "valid",
|
|
||||||
list: [],
|
|
||||||
hasData: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "已使用",
|
|
||||||
type: "used",
|
|
||||||
list: [],
|
|
||||||
hasData: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "已过期",
|
|
||||||
type: "expired",
|
|
||||||
list: [],
|
|
||||||
hasData: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getMyCoupons();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changeTabs(index) {
|
|
||||||
this.active = index;
|
|
||||||
this.getMyCoupons();
|
|
||||||
},
|
|
||||||
async getMyCoupons() {
|
|
||||||
let { data, code } = await this.$get("coupon/myCouponList", {
|
|
||||||
params: {
|
|
||||||
type: this.coupons[this.active].type + "",
|
|
||||||
page_size: 100,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (code == 1) {
|
|
||||||
for (const key in this.expand) {
|
|
||||||
this.$set(this.expand, key, data.expand[key]);
|
|
||||||
}
|
|
||||||
this.changeData(data);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
changeData(data) {
|
|
||||||
this.coupons.some((item, index) => {
|
|
||||||
console.log(data, index);
|
|
||||||
if (index == this.active) {
|
|
||||||
Object.assign(item, {
|
|
||||||
list: data.lists,
|
|
||||||
hasData: data.lists.length,
|
|
||||||
});
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.user-coupons {
|
|
||||||
width: 980px;
|
|
||||||
.coupons-header {
|
|
||||||
padding: 20px 15px;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs {
|
|
||||||
padding: 15px 0;
|
|
||||||
.button {
|
|
||||||
width: 104px;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 0px;
|
|
||||||
display: inline-block;
|
|
||||||
background: #fff;
|
|
||||||
color: #666;
|
|
||||||
border: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
.active {
|
|
||||||
color: #fff;
|
|
||||||
border: 0;
|
|
||||||
background: $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,240 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="evaluate">
|
|
||||||
<div class="goods">
|
|
||||||
<div class="goods-hd lighter flex">
|
|
||||||
<div class="info flex flex-1">商品信息</div>
|
|
||||||
<div class="price flex row-center">单价</div>
|
|
||||||
<div class="num flex row-center">数量</div>
|
|
||||||
<div class="total flex row-center">合计</div>
|
|
||||||
</div>
|
|
||||||
<div class="goods-con">
|
|
||||||
<div class="goods-item flex ">
|
|
||||||
<div class="info flex flex-1">
|
|
||||||
<img class="goods-img" :src="goodsInfo.goods_item.image" alt="" />
|
|
||||||
<div class="goods-info flex flex-1">
|
|
||||||
<div class="goods-name line-2">
|
|
||||||
{{ goodsInfo.name }}
|
|
||||||
</div>
|
|
||||||
<div class="sm lighter m-t-8">{{goodsInfo.spec_value_str}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="price flex row-center">
|
|
||||||
<price-formate :price="goodsInfo.goods_price" weight="400" />
|
|
||||||
</div>
|
|
||||||
<div class="num flex row-center">{{ goodsInfo.goods_num }}</div>
|
|
||||||
<div class="total flex row-center">
|
|
||||||
<price-formate :price="goodsInfo.total_price" weight="400" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="evaluate-con">
|
|
||||||
<div class="goods-rate">
|
|
||||||
<div class="flex item">
|
|
||||||
<div class="name">商品评价</div>
|
|
||||||
<el-rate v-model="goodsRate" show-text text-color="#FF9E2C" :texts="goodsTexts"></el-rate>
|
|
||||||
</div>
|
|
||||||
<div class="flex item">
|
|
||||||
<div class="name">描述相符</div>
|
|
||||||
<el-rate v-model="descRate"></el-rate>
|
|
||||||
</div>
|
|
||||||
<div class="flex item">
|
|
||||||
<div class="name">服务态度</div>
|
|
||||||
<el-rate v-model="serverRate"></el-rate>
|
|
||||||
</div>
|
|
||||||
<div class="flex item">
|
|
||||||
<div class="name">配送服务</div>
|
|
||||||
<el-rate v-model="deliveryRate"></el-rate>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="evaluate-input flex">
|
|
||||||
<div class="name">商品评价</div>
|
|
||||||
<div>
|
|
||||||
<el-input type="textarea" placeholder="收到商品您有什么想法或者反馈，用几个字来评价下商品吧～" v-model="comment"
|
|
||||||
maxlength="150" :rows="6" show-word-limit resize="none">
|
|
||||||
</el-input>
|
|
||||||
<div class="upload m-t-16">
|
|
||||||
<upload :limit="9" @success="onSuccess" />
|
|
||||||
<div class="muted m-t-8">
|
|
||||||
最多可上传9张图片，支持jpg、png格式，图片大小1M以内
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="submit-btn white bg-primary m-t-16 flex row-center" @click="onSubmit">
|
|
||||||
提交评价
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
}, ],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
async asyncData({
|
|
||||||
$get,
|
|
||||||
query
|
|
||||||
}) {
|
|
||||||
const id = query.id;
|
|
||||||
let {
|
|
||||||
data
|
|
||||||
} = await $get("goods_comment/getCommentPage", {
|
|
||||||
params: {
|
|
||||||
order_goods_id: id,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
goodsInfo: data,
|
|
||||||
id,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
layout: "user",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
goodsInfo: {},
|
|
||||||
goodsRate: 0,
|
|
||||||
descRate: 0,
|
|
||||||
serverRate: 0,
|
|
||||||
deliveryRate: 0,
|
|
||||||
comment: "",
|
|
||||||
fileList: [],
|
|
||||||
goodsTexts: ["差评", "差评", "中评", "好评", "好评"],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onSuccess(res) {
|
|
||||||
console.log('res', res)
|
|
||||||
this.fileList = res.map((item) => item.response.data);
|
|
||||||
console.log('fileList', this.fileList)
|
|
||||||
},
|
|
||||||
onSubmit() {
|
|
||||||
let {
|
|
||||||
goodsRate,
|
|
||||||
fileList,
|
|
||||||
comment,
|
|
||||||
deliveryRate,
|
|
||||||
descRate,
|
|
||||||
serverRate,
|
|
||||||
} = this;
|
|
||||||
let image = fileList.map((item) => item.uri);
|
|
||||||
if (!goodsRate)
|
|
||||||
return this.$message({
|
|
||||||
message: "请对商品进行评分",
|
|
||||||
type: "error",
|
|
||||||
});
|
|
||||||
if (!descRate)
|
|
||||||
return this.$message({
|
|
||||||
message: "请对描述相符进行评分",
|
|
||||||
type: "error",
|
|
||||||
});
|
|
||||||
if (!serverRate)
|
|
||||||
return this.$message({
|
|
||||||
message: "请对服务态度进行评分",
|
|
||||||
type: "error",
|
|
||||||
});
|
|
||||||
if (!deliveryRate)
|
|
||||||
return this.$message({
|
|
||||||
message: "请对配送服务进行评分",
|
|
||||||
type: "error",
|
|
||||||
});
|
|
||||||
this.$post("goods_comment/addGoodsComment", {
|
|
||||||
id: parseInt(this.id),
|
|
||||||
goods_comment: goodsRate,
|
|
||||||
service_comment: serverRate,
|
|
||||||
express_comment: deliveryRate,
|
|
||||||
description_comment: descRate,
|
|
||||||
comment,
|
|
||||||
image,
|
|
||||||
order_goods_id: this.$route.query.id
|
|
||||||
}).then((res) => {
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: "评价成功",
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$router.replace({
|
|
||||||
path: "/user/evaluation",
|
|
||||||
// query: {
|
|
||||||
// type: 2,
|
|
||||||
// },
|
|
||||||
});
|
|
||||||
}, 1500);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.evaluate {
|
|
||||||
width: 1010px;
|
|
||||||
padding: 0 10px;
|
|
||||||
|
|
||||||
.goods {
|
|
||||||
|
|
||||||
.goods-hd,
|
|
||||||
.goods-con {
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
|
|
||||||
.goods-item {
|
|
||||||
padding: 10px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
.goods-img {
|
|
||||||
width: 72px;
|
|
||||||
height: 72px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.price,
|
|
||||||
.num,
|
|
||||||
.total {
|
|
||||||
width: 150px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.evaluate-con {
|
|
||||||
padding: 20px;
|
|
||||||
|
|
||||||
.goods-rate {
|
|
||||||
.item {
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
margin-right: 24px;
|
|
||||||
flex: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.evaluate-input {
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
.el-textarea {
|
|
||||||
width: 630px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submit-btn {
|
|
||||||
width: 100px;
|
|
||||||
height: 32px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,149 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="user-evaluate">
|
|
||||||
<el-tabs v-model="type" @tab-click="handleClick">
|
|
||||||
<el-tab-pane v-for="(item, index) in evaluate" :key="index" :label="item.name" :name="item.type">
|
|
||||||
<template v-if="item.lists.length">
|
|
||||||
<evaluation-list :list="item.lists" :type="item.type" :userInfo="userInfo"/>
|
|
||||||
<div class="pagination flex row-center" v-if="item.count">
|
|
||||||
<el-pagination hide-on-single-page background layout="prev, pager, next" :total="item.count"
|
|
||||||
prev-text="上一页" next-text="下一页" :page-size="10" @current-change="changePage">
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<null-data v-else :img="require('~/static/images/news_null.png')" text="暂无评价~"></null-data>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
}, ],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
layout: "user",
|
|
||||||
|
|
||||||
watchQuery: true,
|
|
||||||
async asyncData({
|
|
||||||
$get,
|
|
||||||
query
|
|
||||||
}) {
|
|
||||||
const type = query.type || "1";
|
|
||||||
let {
|
|
||||||
data: {
|
|
||||||
lists,
|
|
||||||
count
|
|
||||||
}
|
|
||||||
} = await $get("goods_comment/getUnCommentOrder", { // 未评价列表
|
|
||||||
params: {
|
|
||||||
page_size: 10
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
let {
|
|
||||||
data: userInfo
|
|
||||||
} = await $get("user/info"); // 用户信息
|
|
||||||
|
|
||||||
return {
|
|
||||||
commentList: {
|
|
||||||
lists,
|
|
||||||
count
|
|
||||||
},
|
|
||||||
type,
|
|
||||||
userInfo,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
components: {},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
evaluate: [{
|
|
||||||
type: "1",
|
|
||||||
lists: [],
|
|
||||||
name: "待评价",
|
|
||||||
count: 0,
|
|
||||||
page: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "2",
|
|
||||||
lists: [],
|
|
||||||
name: "已评价",
|
|
||||||
count: 0,
|
|
||||||
page: 1,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleClick() {
|
|
||||||
this.getEvaluateList();
|
|
||||||
},
|
|
||||||
async getEvaluateList() {
|
|
||||||
const {
|
|
||||||
type,
|
|
||||||
evaluate
|
|
||||||
} = this;
|
|
||||||
const item = evaluate.find((item) => item.type == type);
|
|
||||||
const {
|
|
||||||
data: {
|
|
||||||
lists,
|
|
||||||
count
|
|
||||||
},
|
|
||||||
code,
|
|
||||||
} = type == 1 ? await this.$get("goods_comment/getUnCommentOrder", { // 未评价列表
|
|
||||||
params: {
|
|
||||||
page_size: 10,
|
|
||||||
page_no: item.page,
|
|
||||||
},
|
|
||||||
}) : await this.$get("goods_comment/getCommentOrder", { // 已评价列表
|
|
||||||
params: {
|
|
||||||
page_size: 10,
|
|
||||||
page_no: item.page,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (code == 1) {
|
|
||||||
this.commentList = {
|
|
||||||
lists,
|
|
||||||
count
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
changePage(val) {
|
|
||||||
this.evaluate.some((item) => {
|
|
||||||
if (item.type == this.type) {
|
|
||||||
item.page = val;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.getEvaluateList();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
commentList: {
|
|
||||||
immediate: true,
|
|
||||||
handler(val) {
|
|
||||||
this.evaluate.some((item) => {
|
|
||||||
if (item.type == this.type) {
|
|
||||||
Object.assign(item, val);
|
|
||||||
console.log(item);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.user-evaluate {
|
|
||||||
width: 1000px;
|
|
||||||
padding: 20px 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,453 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="order-detail">
|
|
||||||
<div class="detail-hd row-between">
|
|
||||||
<div class="lg">订单详情</div>
|
|
||||||
<div :class="[
|
|
||||||
'status lg',
|
|
||||||
{ primary: orderDetail.order_status == 0 },
|
|
||||||
]">
|
|
||||||
{{ orderDetail.order_status_desc }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="address">
|
|
||||||
<div class="address-item">
|
|
||||||
<div class="lighter address-item-label">收件人：</div>
|
|
||||||
<div>{{ orderDetail.consignee }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="address-item">
|
|
||||||
<div class="lighter address-item-label">联系方式：</div>
|
|
||||||
<div>{{ orderDetail.mobile }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="address-item">
|
|
||||||
<div class="lighter address-item-label">收货地址：</div>
|
|
||||||
<div>{{ orderDetail.delivery_address }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="detail-con">
|
|
||||||
<div class="title flex">
|
|
||||||
<nuxt-link class="flex-1 lighter sm line-1 m-r-20" style="min-width: 0"
|
|
||||||
:to="`/shop_street_detail?id=${orderDetail.shop.id}`">
|
|
||||||
{{ orderDetail.shop.name }}
|
|
||||||
</nuxt-link>
|
|
||||||
<div class="flex-1 lighter sm">
|
|
||||||
下单时间：{{ orderDetail.create_time }}
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 lighter sm">
|
|
||||||
订单编号：{{ orderDetail.order_sn }}
|
|
||||||
</div>
|
|
||||||
<div :class="[
|
|
||||||
'status sm',
|
|
||||||
{ primary: orderDetail.order_status == 0 },
|
|
||||||
]">
|
|
||||||
{{ getOrderStatus(orderDetail.order_status) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="goods">
|
|
||||||
<div class="goods-hd lighter flex">
|
|
||||||
<div class="info flex-1">商品信息</div>
|
|
||||||
<div class="price flex row-center">商品价格</div>
|
|
||||||
<div class="num flex row-center">数量</div>
|
|
||||||
<div class="total flex row-center">合计</div>
|
|
||||||
</div>
|
|
||||||
<div class="goods-list">
|
|
||||||
<div class="goods-item flex" v-for="(item, index) in orderDetail.order_goods" :key="index">
|
|
||||||
<nuxt-link :to="`/goods_details/${item.goods_id}`" class="info flex flex-1">
|
|
||||||
<el-image class="goods-img" :src="item.image" alt="" />
|
|
||||||
<div class="goods-info flex-1">
|
|
||||||
<div class="goods-name line-2">
|
|
||||||
<el-tag size="mini" effect="plain" v-if="item.is_seckill">秒杀</el-tag>
|
|
||||||
{{ item.goods_name }}
|
|
||||||
</div>
|
|
||||||
<div class="sm lighter m-t-8">
|
|
||||||
{{ item.spec_value }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nuxt-link>
|
|
||||||
<div class="price">
|
|
||||||
<price-formate :price="item.goods_price" />
|
|
||||||
</div>
|
|
||||||
<div class="num flex row-center">{{ item.goods_num }}</div>
|
|
||||||
<div class="total flex row-center">
|
|
||||||
<price-formate :price="item.sum_price" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="m-t-16" v-if="orderDetail.user_remark">
|
|
||||||
<span class="lighter m-r-8">买家留言：</span>
|
|
||||||
<span>{{ orderDetail.user_remark }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="m-t-16" v-if="orderDetail.delivery_content">
|
|
||||||
<span class="lighter m-r-8">发货内容：</span>
|
|
||||||
<span>{{ orderDetail.delivery_content }}</span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="detail-footer flex">
|
|
||||||
<div>
|
|
||||||
<div class="flex-col" style="align-items: flex-end">
|
|
||||||
<div class="money flex m-b-8">
|
|
||||||
<div class="lighter">商品总价：</div>
|
|
||||||
<div>
|
|
||||||
<price-formate :price="orderDetail.goods_price" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="money flex m-b-8">
|
|
||||||
<div class="lighter">运费：</div>
|
|
||||||
<div>
|
|
||||||
<price-formate :price="orderDetail.shipping_price" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="money flex m-b-8">
|
|
||||||
<div class="lighter">会员抵扣：</div>
|
|
||||||
<div class="primary">
|
|
||||||
-<price-formate :price="orderDetail.member_amount" color="#FF0808" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="money flex m-b-16" v-if="orderDetail.discount_amount != 0">
|
|
||||||
<div class="lighter">优惠券：</div>
|
|
||||||
<div>
|
|
||||||
-
|
|
||||||
<price-formate :price="orderDetail.discount_amount" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="money flex">
|
|
||||||
<div class="lighter">实付金额：</div>
|
|
||||||
<div class="primary">
|
|
||||||
<price-formate :price="orderDetail.order_amount" :subscript-size="14" :first-size="28"
|
|
||||||
:second-size="28" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="oprate-btn flex row-right m-t-16">
|
|
||||||
<div class="btn plain flex row-center lighter" v-if="orderDetail.cancel_btn"
|
|
||||||
@click="handleOrder(0)">
|
|
||||||
取消订单
|
|
||||||
</div>
|
|
||||||
<div class="btn plain flex row-center m-l-8 lighter" v-if="orderDetail.delivery_btn"
|
|
||||||
@click="showDeliverPop = true">
|
|
||||||
物流查询
|
|
||||||
</div>
|
|
||||||
<div class="btn bg-primary flex row-center white m-l-8" v-if="orderDetail.take_btn"
|
|
||||||
@click="handleOrder(2)">
|
|
||||||
确认收货
|
|
||||||
</div>
|
|
||||||
<div class="btn plain flex row-center lighter m-l-8" v-if="orderDetail.del_btn"
|
|
||||||
@click="handleOrder(1)">
|
|
||||||
删除订单
|
|
||||||
</div>
|
|
||||||
<nuxt-link :to="`/payment?id=${orderDetail.id}&from=order`"
|
|
||||||
class="btn bg-primary flex row-center white m-l-8" v-if="orderDetail.pay_btn">
|
|
||||||
<span class="mr8">去付款</span>
|
|
||||||
<count-down v-if="
|
|
||||||
getCancelTime(orderDetail.order_cancel_time) > 0
|
|
||||||
" :time="getCancelTime(orderDetail.order_cancel_time)" format="hh:mm:ss"
|
|
||||||
@finish="getOrderDetail" />
|
|
||||||
</nuxt-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="detail-upload" v-if="orderDetail.frontend_array.length > 0">
|
|
||||||
<div class="tit">上传合同列表</div>
|
|
||||||
<div class="img-boxs">
|
|
||||||
<div class="img" v-for="(item, index) in orderDetail.frontend_array" :key="index">
|
|
||||||
<el-image
|
|
||||||
style="width: 100%; height: 100%"
|
|
||||||
:src="baseUrl + item"
|
|
||||||
:preview-src-list="frontend_arrayNew"
|
|
||||||
>
|
|
||||||
</el-image>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<deliver-search v-model="showDeliverPop" :aid="id" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { copyClipboard } from '@/utils/tools'
|
|
||||||
import config from "~/config/app";
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: 'icon',
|
|
||||||
type: 'image/x-icon',
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
layout: 'user',
|
|
||||||
async asyncData({ $get, query }) {
|
|
||||||
const { data, code } = await $get('order/getOrderDetail', {
|
|
||||||
params: {
|
|
||||||
id: query.id,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
if (code == 1) {
|
|
||||||
return {
|
|
||||||
orderDetail: data,
|
|
||||||
id: query.id,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
orderDetail: {},
|
|
||||||
showDeliverPop: false,
|
|
||||||
baseUrl:config.baseUrl + '/',
|
|
||||||
frontend_arrayNew:[], //大图带域名
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
if (this.orderDetail.delivery_type === 2) {
|
|
||||||
this.creatQrCode(this.orderDetail.pickup_code)
|
|
||||||
}
|
|
||||||
if(this.orderDetail.frontend_array) {
|
|
||||||
this.frontend_arrayNew = this.orderDetail.frontend_array.map(item => {
|
|
||||||
return this.baseUrl + item
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
async getOrderDetail() {
|
|
||||||
const { data, code } = await this.$get('order/getOrderDetail', {
|
|
||||||
params: {
|
|
||||||
id: this.id,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
if (code == 1) {
|
|
||||||
this.orderDetail = data
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleOrder(type) {
|
|
||||||
this.type = type
|
|
||||||
this.$confirm(this.getTipsText(type), {
|
|
||||||
title: '温馨提示',
|
|
||||||
center: true,
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
width: '300px',
|
|
||||||
callback: (action) => {
|
|
||||||
if (action == 'confirm') {
|
|
||||||
this.postOrder()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
},
|
|
||||||
async postOrder() {
|
|
||||||
const { type, id } = this
|
|
||||||
let url = ''
|
|
||||||
switch (type) {
|
|
||||||
case 0:
|
|
||||||
url = 'order/cancel'
|
|
||||||
break
|
|
||||||
case 1:
|
|
||||||
url = 'order/del'
|
|
||||||
break
|
|
||||||
case 2:
|
|
||||||
url = 'order/confirm'
|
|
||||||
break
|
|
||||||
}
|
|
||||||
let { code, data, msg } = await this.$post(url, { id })
|
|
||||||
if (code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: msg,
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
if (type == 1) {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$router.go(-1)
|
|
||||||
}, 1500)
|
|
||||||
} else {
|
|
||||||
this.getOrderDetail()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getTipsText(type) {
|
|
||||||
switch (type) {
|
|
||||||
case 0:
|
|
||||||
return '确认取消订单吗？'
|
|
||||||
case 1:
|
|
||||||
return '确认删除订单吗?'
|
|
||||||
case 2:
|
|
||||||
return '确认收货吗?'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
getOrderStatus() {
|
|
||||||
return (status) => {
|
|
||||||
let text = ''
|
|
||||||
switch (status) {
|
|
||||||
case 0:
|
|
||||||
text = '待支付'
|
|
||||||
break
|
|
||||||
case 1:
|
|
||||||
text = '待发货'
|
|
||||||
break
|
|
||||||
case 2:
|
|
||||||
text = '待收货'
|
|
||||||
break
|
|
||||||
case 3:
|
|
||||||
text = '已完成'
|
|
||||||
break
|
|
||||||
case 4:
|
|
||||||
text = '订单已关闭'
|
|
||||||
break
|
|
||||||
}
|
|
||||||
return text
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getCancelTime() {
|
|
||||||
return (time) => time - Date.now() / 1000
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.order-detail {
|
|
||||||
padding: 0 16px 20px;
|
|
||||||
|
|
||||||
.detail-hd {
|
|
||||||
padding: 14px 5px;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.address {
|
|
||||||
padding: 16px 0;
|
|
||||||
|
|
||||||
>div {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-item {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
&-label {
|
|
||||||
width: 70px;
|
|
||||||
text-align: justify;
|
|
||||||
text-align-last: justify;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-con {
|
|
||||||
.title {
|
|
||||||
height: 40px;
|
|
||||||
background: #f2f2f2;
|
|
||||||
border: 1px solid #e5e5e5;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods {
|
|
||||||
|
|
||||||
.goods-hd,
|
|
||||||
.goods-list {
|
|
||||||
padding: 10px 20px;
|
|
||||||
border: 1px solid #e5e5e5;
|
|
||||||
border-top-width: 0;
|
|
||||||
|
|
||||||
.goods-item {
|
|
||||||
padding: 10px 0;
|
|
||||||
|
|
||||||
.goods-name {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
.goods-img {
|
|
||||||
width: 72px;
|
|
||||||
height: 72px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.price,
|
|
||||||
.num,
|
|
||||||
.total {
|
|
||||||
width: 150px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-footer {
|
|
||||||
padding: 25px 20px;
|
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
.money {
|
|
||||||
>div {
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
&:first-of-type {
|
|
||||||
width: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-of-type {
|
|
||||||
width: 120px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.oprate-btn {
|
|
||||||
.btn {
|
|
||||||
width: 152px;
|
|
||||||
height: 44px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 2px;
|
|
||||||
|
|
||||||
&.plain {
|
|
||||||
border: $--border-base;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.qr-container {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
padding: 6px;
|
|
||||||
border: $--border-base;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.detail-upload {
|
|
||||||
.tit {
|
|
||||||
font-size: 20px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 1;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
border-left: 4px solid #f00;
|
|
||||||
padding-left: 14px;
|
|
||||||
}
|
|
||||||
.img-boxs {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.img {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-right: 15px;
|
|
||||||
border: 1px solid #ededed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,184 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="user-order">
|
|
||||||
<div class="download-box">
|
|
||||||
<a target="_blank" :href="download_contract.domain + '/' + download_contract.path"><el-button type="success" icon="el-icon-download" size="medium">下载合同</el-button></a>
|
|
||||||
</div>
|
|
||||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
||||||
<el-tab-pane
|
|
||||||
v-for="(item, index) in order"
|
|
||||||
:key="index"
|
|
||||||
:label="item.name"
|
|
||||||
:name="item.type"
|
|
||||||
>
|
|
||||||
<template v-if="item.list.length">
|
|
||||||
<order-list :list="item.list" @refresh="getOrderList" />
|
|
||||||
<div class="pagination flex row-center" v-if="item.count">
|
|
||||||
<el-pagination
|
|
||||||
hide-on-single-page
|
|
||||||
background
|
|
||||||
layout="prev, pager, next"
|
|
||||||
:total="item.count"
|
|
||||||
prev-text="上一页"
|
|
||||||
next-text="下一页"
|
|
||||||
:page-size="10"
|
|
||||||
@current-change="changePage"
|
|
||||||
>
|
|
||||||
</el-pagination>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<null-data
|
|
||||||
v-else
|
|
||||||
:img="require('~/static/images/order_null.png')"
|
|
||||||
text="暂无订单~"
|
|
||||||
></null-data>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Message } from 'element-ui';
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: 'icon',
|
|
||||||
type: 'image/x-icon',
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
layout: 'user',
|
|
||||||
async asyncData({query, $get, $post }) {
|
|
||||||
let that = this;
|
|
||||||
let download_contract = {};
|
|
||||||
const {
|
|
||||||
data: { list, count },
|
|
||||||
code,
|
|
||||||
} = await $get('order/lists', {
|
|
||||||
params: {
|
|
||||||
page_size: 10,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
await $post('order/contractDownload', {}).then(({ code, data, msg }) => {
|
|
||||||
if (code == 1) {
|
|
||||||
download_contract = data;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
if(query.is_frontend == 1) {
|
|
||||||
Message.success('订单前置成功')
|
|
||||||
}
|
|
||||||
if (code == 1) {
|
|
||||||
return {
|
|
||||||
orderList: { list, count },
|
|
||||||
download_contract
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
activeName: 'all',
|
|
||||||
order: [
|
|
||||||
{
|
|
||||||
type: 'all',
|
|
||||||
list: [],
|
|
||||||
name: '全部',
|
|
||||||
count: 0,
|
|
||||||
page: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'pay',
|
|
||||||
list: [],
|
|
||||||
name: '待付款',
|
|
||||||
count: 0,
|
|
||||||
page: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'delivery',
|
|
||||||
list: [],
|
|
||||||
name: '待收货',
|
|
||||||
count: 0,
|
|
||||||
page: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'finish',
|
|
||||||
list: [],
|
|
||||||
name: '已完成',
|
|
||||||
count: 0,
|
|
||||||
page: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'close',
|
|
||||||
list: [],
|
|
||||||
name: '已关闭',
|
|
||||||
count: 0,
|
|
||||||
page: 1,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
download_contract:{} //下载合同地址
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleClick() {
|
|
||||||
this.getOrderList()
|
|
||||||
},
|
|
||||||
async getOrderList() {
|
|
||||||
const { activeName, order } = this
|
|
||||||
const item = order.find((item) => item.type == activeName)
|
|
||||||
const {
|
|
||||||
data: { list, count },
|
|
||||||
code,
|
|
||||||
} = await this.$get('order/lists', {
|
|
||||||
params: {
|
|
||||||
page_size: 10,
|
|
||||||
page_no: item.page,
|
|
||||||
type: activeName,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
if (code == 1) {
|
|
||||||
this.orderList = { list, count }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
changePage(val) {
|
|
||||||
this.order.some((item) => {
|
|
||||||
if (item.type == this.activeName) {
|
|
||||||
item.page = val
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.getOrderList()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
orderList: {
|
|
||||||
immediate: true,
|
|
||||||
handler(val) {
|
|
||||||
this.order.some((item) => {
|
|
||||||
if (item.type == this.activeName) {
|
|
||||||
Object.assign(item, val)
|
|
||||||
console.log(item)
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.user-order {
|
|
||||||
padding: 20px 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-box {
|
|
||||||
position: absolute;
|
|
||||||
right: 16px;
|
|
||||||
top: 22px;
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,426 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="user-profile">
|
|
||||||
<div class="user-header lg">
|
|
||||||
个人资料
|
|
||||||
</div>
|
|
||||||
<div class="user-container">
|
|
||||||
<div class="user-form-item flex">
|
|
||||||
<label class="user-form-label nr">头像</label>
|
|
||||||
<div class="user-avatar-upload">
|
|
||||||
<el-upload class="avatar-uploader" :action="action" :show-file-list="false" :file-list="fileList"
|
|
||||||
:on-success="uploadFileSuccess" :headers="{token: $store.state.token}"
|
|
||||||
accept="image/jpg,image/jpeg,image/png"
|
|
||||||
:before-upload="beforeAvatarUpload">
|
|
||||||
<div class="avatar">
|
|
||||||
<el-image style="width: 64px;height: 64px;border-radius: 60px" :src="avatar" />
|
|
||||||
<div class="mask white"></div>
|
|
||||||
</div>
|
|
||||||
</el-upload>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="user-form-item flex">
|
|
||||||
<label class="user-form-label nr">用户ID</label>
|
|
||||||
<div class="normal nr">{{sn}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="user-form-item flex">
|
|
||||||
<label class="user-form-label nr">昵称</label>
|
|
||||||
<el-input v-model="nickName" class="user-input" suffix-icon="el-icon-edit" />
|
|
||||||
</div>
|
|
||||||
<div class="user-form-item flex">
|
|
||||||
<label class="user-form-label nr">性别</label>
|
|
||||||
<el-radio-group v-model="radio">
|
|
||||||
<el-radio :label="'男'">男</el-radio>
|
|
||||||
<el-radio :label="'女'">女</el-radio>
|
|
||||||
<!-- <el-radio :label="3">保密</el-radio> -->
|
|
||||||
</el-radio-group>
|
|
||||||
</div>
|
|
||||||
<div class="user-form-item flex">
|
|
||||||
<label class="user-form-label nr">手机号</label>
|
|
||||||
<div class="normal nr">{{mobile}}</div>
|
|
||||||
<div style="color: #6699CC;margin-left: 13px;cursor: pointer;" @click="openChangeNumber">
|
|
||||||
{{mobile?'修改号码':'绑定手机号'}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="user-form-item flex">
|
|
||||||
<label class="user-form-label nr">注册时间</label>
|
|
||||||
<div class="normal nr">{{createTime}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="user-form-item flex">
|
|
||||||
<label class="user-form-label nr">登录密码</label>
|
|
||||||
<div class="nr" style="color: #6699CC;cursor: pointer;" @click="openChangePwdPop">修改密码</div>
|
|
||||||
</div>
|
|
||||||
<div class="user-form-item flex">
|
|
||||||
<label class="user-form-label nr">我的团队</label>
|
|
||||||
<div class="normal nr flex">
|
|
||||||
<div class="name">团队名称：<span class="primary">{{team_info.name}}</span></div>
|
|
||||||
<div class="phone m-l-30">联系电话：<span class="primary">{{team_info.phone}}</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="primary-btn bg-primary flex-center white" @click="saveUserInfo">
|
|
||||||
保存
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 修改手机号 -->
|
|
||||||
<el-dialog :center="true" :title="mobile ? '更换手机号': '绑定手机'" :visible.sync="showChangeNumber" width="40%">
|
|
||||||
<div>
|
|
||||||
<el-form style="width: 50%;margin: 0 auto">
|
|
||||||
<el-form-item>
|
|
||||||
<el-input v-model="telephone" placeholder="请输入新的手机号码" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<div class="flex">
|
|
||||||
<el-input v-model="verifyCode" placeholder="短信验证码" />
|
|
||||||
<el-button style="margin-left: 14px;" @click="sndSmsToPhone">
|
|
||||||
<div v-if="canSendNumber">获取验证码</div>
|
|
||||||
<count-down v-else :time="60" format="ss秒" autoStart @finish="canSendNumber = true" />
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div slot="footer">
|
|
||||||
<el-button style="width:134px" type="primary" @click="changeUserMobile">确认</el-button>
|
|
||||||
<el-button style="width:134px" @click="closeChangeNumber">取消</el-button>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
|
|
||||||
<!-- 登录密码设置 -->
|
|
||||||
<el-dialog title="设置登录密码" :center="true" :visible.sync="showPwdPop" width="40%">
|
|
||||||
<div>
|
|
||||||
<el-form style="width: 50%;margin: 0 auto;">
|
|
||||||
<el-form-item>
|
|
||||||
<el-input v-model="mobile" placeholder="请输入手机号码" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<div class="flex">
|
|
||||||
<el-input v-model="verifyCode" placeholder="短信验证码" />
|
|
||||||
<el-button style="margin-left: 14px;" @click="sndSmsToPhone">
|
|
||||||
<div v-if="canSendPwd">获取验证码</div>
|
|
||||||
<count-down v-else :time="60" format="ss秒" autoStart @finish="canSendPwd = true" />
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-input v-model="pwd" type="password" placeholder="请输入密码 (数字与字母自由组合)" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-input v-model="againPwd" type="password" placeholder="再次输入密码" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div slot="footer">
|
|
||||||
<el-button style="width:134px" type="primary" @click="setPassWord">确认</el-button>
|
|
||||||
<el-button style="width:134px" @click="closePwdPop">取消</el-button>
|
|
||||||
</div>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { SMSType, client, FieldType } from "~/utils/type";
|
|
||||||
import Cookies from "js-cookie";
|
|
||||||
import { mapActions } from "vuex";
|
|
||||||
import config from "~/config/app";
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
layout: "user",
|
|
||||||
mounted() {
|
|
||||||
this.getUserInfoFun();
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
avatar: "",
|
|
||||||
mobile: "",
|
|
||||||
sex: 0,
|
|
||||||
createTime: "",
|
|
||||||
sn: "",
|
|
||||||
action: config.baseUrl + "/api/file/formimage",
|
|
||||||
nickName: "",
|
|
||||||
radio: 1,
|
|
||||||
showChangeNumber: false,
|
|
||||||
showPwdPop: false,
|
|
||||||
telephone: "",
|
|
||||||
verifyCode: "",
|
|
||||||
pwd: "",
|
|
||||||
againPwd: "",
|
|
||||||
smsType: SMSType.CHANGE_MOBILE,
|
|
||||||
canSendNumber: true,
|
|
||||||
canSendPwd: true,
|
|
||||||
fileList: [],
|
|
||||||
team_info:{} //团队
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
beforeAvatarUpload(file) {
|
|
||||||
var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
|
|
||||||
console.log('fdsadsf')
|
|
||||||
const extension = testmsg === 'jpg'
|
|
||||||
const extension2 = testmsg === 'png'
|
|
||||||
const extension4 = testmsg === 'jpeg'
|
|
||||||
if (!extension && !extension2) {
|
|
||||||
this.$message({
|
|
||||||
message: '上传文件只能是 jpg, jpeg, png格式!',
|
|
||||||
type: 'warning'
|
|
||||||
})
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
return extension || extension2 || extension4
|
|
||||||
},
|
|
||||||
|
|
||||||
...mapActions(["getPublicData"]),
|
|
||||||
|
|
||||||
async getUserInfoFun() {
|
|
||||||
let res = await this.$get("user/info");
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.avatar = res.data.avatar;
|
|
||||||
this.nickName = res.data.nickname;
|
|
||||||
this.mobile = res.data.mobile;
|
|
||||||
this.sex = res.data.sex;
|
|
||||||
this.radio = this.sex;
|
|
||||||
this.createTime = res.data.create_time;
|
|
||||||
this.sn = res.data.sn;
|
|
||||||
}
|
|
||||||
|
|
||||||
let resData = await this.$get("user/center");
|
|
||||||
if (resData.code == 1) {
|
|
||||||
this.team_info = resData.data.team_info;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async saveUserInfo() {
|
|
||||||
let res = await this.$post("pc/changeUserInfo", {
|
|
||||||
sex: this.radio == "男" ? 1 : 2,
|
|
||||||
nickname: this.nickName,
|
|
||||||
});
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: res.msg,
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
this.getPublicData();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
closeChangeNumber() {
|
|
||||||
this.telephone = "";
|
|
||||||
this.verifyCode = "";
|
|
||||||
this.showChangeNumber = false;
|
|
||||||
},
|
|
||||||
closePwdPop() {
|
|
||||||
this.telephone = "";
|
|
||||||
this.verifyCode = "";
|
|
||||||
this.showPwdPop = false;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 打开修改手机号的弹窗
|
|
||||||
openChangeNumber() {
|
|
||||||
this.showChangeNumber = true;
|
|
||||||
this.smsType = this.mobile ? SMSType.CHANGE_MOBILE : SMSType.BIND;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 打开修改登录密码的弹窗
|
|
||||||
openChangePwdPop() {
|
|
||||||
if (this.mobile == "") return this.$message.error("请先绑定手机号");
|
|
||||||
this.showPwdPop = true;
|
|
||||||
this.smsType = SMSType.FINDPWD;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 发送验证码
|
|
||||||
async sndSmsToPhone() {
|
|
||||||
if (
|
|
||||||
(this.smsType == SMSType.CHANGE_MOBILE ||
|
|
||||||
this.smsType == SMSType.BIND) &&
|
|
||||||
!this.canSendNumber
|
|
||||||
)
|
|
||||||
return;
|
|
||||||
else if (this.smsType == SMSType.FINDPWD && !this.canSendPwd)
|
|
||||||
return;
|
|
||||||
if (this.smsType == SMSType.CHANGE_MOBILE && !this.telephone)
|
|
||||||
return this.$message.error("请输入手机号");
|
|
||||||
|
|
||||||
let res = await this.$post("sms/send", {
|
|
||||||
mobile:
|
|
||||||
this.smsType == SMSType.FINDPWD
|
|
||||||
? this.mobile
|
|
||||||
: this.telephone,
|
|
||||||
key: this.smsType,
|
|
||||||
});
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.smsType == SMSType.FINDPWD
|
|
||||||
? (this.canSendPwd = false)
|
|
||||||
: (this.canSendNumber = false);
|
|
||||||
this.$message.success("发送成功");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 修改手机号码
|
|
||||||
async changeUserMobile() {
|
|
||||||
if (!this.telephone)
|
|
||||||
return this.$message.error("请输入新的手机号码");
|
|
||||||
if (!this.verifyCode) return this.$message.error("请输入验证码");
|
|
||||||
let res = await this.$post("user/changeMobile", {
|
|
||||||
mobile: this.mobile,
|
|
||||||
new_mobile: this.telephone,
|
|
||||||
code: this.verifyCode,
|
|
||||||
action: this.mobile ? "change" : "",
|
|
||||||
client: client,
|
|
||||||
});
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.showChangeNumber = false;
|
|
||||||
this.$message.success(res.msg);
|
|
||||||
this.getPublicData();
|
|
||||||
this.getUserInfoFun();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 设置登录密码
|
|
||||||
async setPassWord() {
|
|
||||||
if (!this.verifyCode) return this.$message.error("请输入验证码");
|
|
||||||
if (!this.pwd) return this.$message.error("请输入密码");
|
|
||||||
if (!this.againPwd) return this.$message.error("请输入确认密码");
|
|
||||||
if (this.pwd != this.againPwd)
|
|
||||||
return this.$message.error("两次密码输入不一致");
|
|
||||||
let res = await this.$post("login_password/forget", {
|
|
||||||
mobile: this.mobile,
|
|
||||||
code: this.verifyCode,
|
|
||||||
password: this.pwd,
|
|
||||||
repassword: this.againPwd,
|
|
||||||
client: client,
|
|
||||||
});
|
|
||||||
if (res.code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: res.msg,
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
this.showPwdPop = false;
|
|
||||||
const token = res.data.token;
|
|
||||||
Cookies.set("token", token, { expires: 60 });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async uploadFileSuccess(res, fileList) {
|
|
||||||
let respond = await this.$post("user/setInfo", {
|
|
||||||
field: FieldType.AVATAR,
|
|
||||||
value: res.data.uri,
|
|
||||||
});
|
|
||||||
if (respond.code == 1) {
|
|
||||||
this.$message({
|
|
||||||
message: respond.msg,
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
let userRes = await this.$get("user/info");
|
|
||||||
if (userRes.code == 1) {
|
|
||||||
this.avatar = userRes.data.avatar;
|
|
||||||
this.nickName = userRes.data.nickname;
|
|
||||||
this.mobile = userRes.data.mobile;
|
|
||||||
this.sex = userRes.data.sex;
|
|
||||||
this.radio = this.sex;
|
|
||||||
this.createTime = userRes.data.create_time;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.user-profile {
|
|
||||||
width: 980px;
|
|
||||||
padding: 10px;
|
|
||||||
.user-header {
|
|
||||||
padding: 10px 5px;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
.user-container {
|
|
||||||
margin-top: 35px;
|
|
||||||
.user-form-item {
|
|
||||||
padding-left: 13px;
|
|
||||||
margin-top: 24px;
|
|
||||||
.user-form-label {
|
|
||||||
width: 60px;
|
|
||||||
text-align: left;
|
|
||||||
margin-right: 24px;
|
|
||||||
}
|
|
||||||
.user-avatar-upload {
|
|
||||||
.avatar-uploader {
|
|
||||||
&:hover {
|
|
||||||
.avatar {
|
|
||||||
.mask {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.avatar {
|
|
||||||
position: relative;
|
|
||||||
.mask {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
content: "更换头像";
|
|
||||||
position: absolute;
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
opacity: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 64px;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
border-radius: 60px;
|
|
||||||
background-color: rgba(
|
|
||||||
$color: #000000,
|
|
||||||
$alpha: 0.3
|
|
||||||
);
|
|
||||||
color: white;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.user-input {
|
|
||||||
width: 240px;
|
|
||||||
}
|
|
||||||
.el-radio__input.is-checked + .el-radio__label {
|
|
||||||
color: #007aff;
|
|
||||||
}
|
|
||||||
.el-input__inner:focus {
|
|
||||||
border-color: #007aff;
|
|
||||||
}
|
|
||||||
.el-radio__input.is-checked .el-radio__inner {
|
|
||||||
border-color: #007aff;
|
|
||||||
background: #007aff;
|
|
||||||
}
|
|
||||||
.el-radio__inner:hover {
|
|
||||||
border-color: #007aff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.primary-btn {
|
|
||||||
height: 32px;
|
|
||||||
width: 100px;
|
|
||||||
margin-top: 32px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
&:focus {
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,211 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="user-wallet-container">
|
|
||||||
<div class="user-wallet-header lg">
|
|
||||||
我的钱包
|
|
||||||
</div>
|
|
||||||
<div class="user-wallet-content">
|
|
||||||
<div class="wallet-info-box flex">
|
|
||||||
<div class="user-wallet-info">
|
|
||||||
<div class="xs title">我的余额</div>
|
|
||||||
<div class="nr white flex" style="font-weight: 500;align-items: baseline;">¥<label
|
|
||||||
style="font-size: 24px;">{{wallet.user_money || 0}}</label></div>
|
|
||||||
</div>
|
|
||||||
<div class="user-wallet-info" style="margin-left: 144px">
|
|
||||||
<div class="xs title">累计消费</div>
|
|
||||||
<div class="nr white flex" style="font-weight: 500;align-items: baseline;">¥<label
|
|
||||||
style="font-size: 24px;">{{wallet.total_order_amount || 0}}</label></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-tabs v-model="activeName" class="mt10" @tab-click="handleClick">
|
|
||||||
<el-tab-pane v-for="(item, index) in userWallet" :label="item.name" :name="item.type" :key="index">
|
|
||||||
<div class="user-wallet-table">
|
|
||||||
<el-table :data="item.list" style="width: 100%">
|
|
||||||
<el-table-column prop="source_type" label="类型" />
|
|
||||||
<el-table-column prop="change_amount" label="金额">
|
|
||||||
<div slot-scope="scope" :class="{'primary': scope.row.change_type == 1}">
|
|
||||||
{{scope.row.change_amount}}
|
|
||||||
</div>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="create_time" label="时间" />
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
<!-- <null-data
|
|
||||||
style="padding: 150px"
|
|
||||||
img-style="width: 94px;height:118px"
|
|
||||||
:img="require('~/assets/images/img_null.png')"
|
|
||||||
text="请前往移动端进行查看"
|
|
||||||
></null-data> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
head() {
|
|
||||||
return {
|
|
||||||
title: this.$store.getters.headTitle,
|
|
||||||
link: [
|
|
||||||
{
|
|
||||||
rel: "icon",
|
|
||||||
type: "image/x-icon",
|
|
||||||
href: this.$store.getters.favicon,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
layout: "user",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
activeName: "all",
|
|
||||||
userWallet: [
|
|
||||||
{
|
|
||||||
type: "all",
|
|
||||||
list: [],
|
|
||||||
name: "全部记录",
|
|
||||||
count: 0,
|
|
||||||
page: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "output",
|
|
||||||
list: [],
|
|
||||||
name: "收入记录",
|
|
||||||
count: 0,
|
|
||||||
page: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "income",
|
|
||||||
list: [],
|
|
||||||
name: "消费记录",
|
|
||||||
count: 0,
|
|
||||||
page: 1,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
async asyncData({ $get, query }) {
|
|
||||||
let wallet = {};
|
|
||||||
let recodeList = [];
|
|
||||||
let walletRes = await $get("user/myWallet");
|
|
||||||
let recodeRes = await $get("user/accountLog", {
|
|
||||||
params: {
|
|
||||||
page_no: 1,
|
|
||||||
page_size: 10,
|
|
||||||
source: 1,
|
|
||||||
type: 0,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (walletRes.code == 1) {
|
|
||||||
wallet = walletRes.data;
|
|
||||||
}
|
|
||||||
if (recodeRes.code == 1) {
|
|
||||||
recodeList = recodeRes.data.list;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
wallet,
|
|
||||||
recodeList,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
fetch() {
|
|
||||||
this.handleClick();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleClick() {
|
|
||||||
this.getRecodeList();
|
|
||||||
},
|
|
||||||
|
|
||||||
changePage(val) {
|
|
||||||
this.userWallet.some((item) => {
|
|
||||||
if (item.type == this.activeName) {
|
|
||||||
item.page = val;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.getRecodeList();
|
|
||||||
},
|
|
||||||
|
|
||||||
async getRecodeList() {
|
|
||||||
const { activeName, userWallet } = this;
|
|
||||||
let type = activeName == "all" ? 0 : activeName == "income" ? 2 : 1;
|
|
||||||
const item = userWallet.find((item) => item.type == activeName);
|
|
||||||
const {
|
|
||||||
data: { list, count },
|
|
||||||
code,
|
|
||||||
} = await this.$get("user/accountLog", {
|
|
||||||
params: {
|
|
||||||
page_size: 10,
|
|
||||||
page_no: item.page,
|
|
||||||
type: type,
|
|
||||||
source: 1,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (code == 1) {
|
|
||||||
this.recodeList = { list, count };
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
recodeList: {
|
|
||||||
immediate: true,
|
|
||||||
handler(val) {
|
|
||||||
console.log("val:", val);
|
|
||||||
this.userWallet.some((item) => {
|
|
||||||
if (item.type == this.activeName) {
|
|
||||||
Object.assign(item, val);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.user-wallet-container {
|
|
||||||
width: 980px;
|
|
||||||
padding: 10px 10px 60px 10px;
|
|
||||||
.user-wallet-header {
|
|
||||||
padding: 10px 5px;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
::v-deep .el-tabs__header {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .el-tabs .el-tabs__nav-scroll {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.user-wallet-content {
|
|
||||||
margin-top: 17px;
|
|
||||||
.wallet-info-box {
|
|
||||||
padding: 24px;
|
|
||||||
background: linear-gradient(87deg, #ff2c3c 0%, #ff9e2c 100%);
|
|
||||||
.user-wallet-info {
|
|
||||||
.title {
|
|
||||||
color: #ffdcd7;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-wallet-table {
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
::v-deep .el-table {
|
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
::v-deep .el-table .el-button--text {
|
|
||||||
color: #222;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
::v-deep .el-table th {
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
}
|
|
||||||
::v-deep .el-table thead {
|
|
||||||
color: #555555;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
import { Message } from 'element-ui';
|
|
||||||
import config from '~/config/app'
|
|
||||||
export default function ({ $axios, redirect, store }, inject) {
|
|
||||||
|
|
||||||
$axios.setBaseURL(config.baseUrl + '/api')
|
|
||||||
$axios.onRequest(config => {
|
|
||||||
config.headers.token = store.state.token
|
|
||||||
|
|
||||||
})
|
|
||||||
$axios.onResponse((response) => {
|
|
||||||
const {
|
|
||||||
code,
|
|
||||||
show,
|
|
||||||
msg
|
|
||||||
} = response.data;
|
|
||||||
console.log(response.data)
|
|
||||||
if (code == 0 && show && msg) {
|
|
||||||
Message({
|
|
||||||
message: msg,
|
|
||||||
type: 'error'
|
|
||||||
})
|
|
||||||
}else if(code == -1){
|
|
||||||
store.commit('logout')
|
|
||||||
redirect('/account/login')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
$axios.onError(error => {
|
|
||||||
Message({
|
|
||||||
message: '系统错误',
|
|
||||||
type: 'error'
|
|
||||||
})
|
|
||||||
})
|
|
||||||
inject('get', $axios.$get)
|
|
||||||
inject('post', $axios.$post)
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
import Vue from 'vue'
|
|
||||||
import Element from 'element-ui'
|
|
||||||
import locale from 'element-ui/lib/locale/lang/zh-CN'
|
|
||||||
|
|
||||||
Vue.use(Element, { locale })
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
import Cookies from 'js-cookie'
|
|
||||||
export default function ({ store }) {
|
|
||||||
const token = Cookies.get('token')
|
|
||||||
token && store.commit('setToken', token)
|
|
||||||
store.dispatch('getCategory')
|
|
||||||
store.dispatch('getPublicData')
|
|
||||||
store.dispatch('getConfig')
|
|
||||||
}
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
import Vue from 'vue'
|
|
||||||
import VueAwesomeSwiper from 'vue-awesome-swiper'
|
|
||||||
Vue.use(VueAwesomeSwiper)
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.9 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue