修改搜索和隐藏品牌
xcw
parent
af23d76c52
commit
b6d325a110
|
|
@ -0,0 +1,13 @@
|
|||
# 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
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
# 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
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
# 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).
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
|
||||
|
||||
/** 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;
|
||||
}
|
||||
|
|
@ -0,0 +1,985 @@
|
|||
|
||||
|
||||
/* 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";
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
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;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
/* 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;
|
||||
|
|
@ -0,0 +1,539 @@
|
|||
/* 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;
|
||||
}
|
||||
|
|
@ -0,0 +1,579 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
@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
|
|
@ -0,0 +1,128 @@
|
|||
{
|
||||
"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
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<?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>
|
||||
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,16 @@
|
|||
#!/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"
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,243 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,257 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,368 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,309 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,366 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<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>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
|
||||
// 本地访问域名
|
||||
// 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
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
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)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
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
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,209 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,448 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,437 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,486 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,867 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,233 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,348 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,233 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,303 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,326 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,479 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!-- 店铺街 -->
|
||||
<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>
|
||||
|
|
@ -0,0 +1,780 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<!-- 专区内页 -->
|
||||
<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>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,303 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,242 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,336 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,453 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,426 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
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)
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
import locale from 'element-ui/lib/locale/lang/zh-CN'
|
||||
|
||||
Vue.use(Element, { locale })
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
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')
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import Vue from 'vue'
|
||||
import VueAwesomeSwiper from 'vue-awesome-swiper'
|
||||
Vue.use(VueAwesomeSwiper)
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After 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