Skip to content

I
integral-mall
Commit ab62dc8d by damodmg
Options

引用eslint

parent daec9508
Showing with 3958 additions and 3808 deletions
.eslintignore 0 → 100644
.DS_Store
node_modules/
/build/
/config/
/dist/
/*.js
.eslintrc.js 0 → 100644
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
// "standard",
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'plugin:prettier/recommended'
],
// required to lint *.vue files
plugins: ['vue', 'prettier'],
// add your custom rules here
rules: {
'prettier/prettier': [
'error',
{
endOfLine: 'auto'
}
],
// allow async-await
'generator-star-spacing': 'off',
'no-console': process.env.NODE_ENV === 'production' ? 2 : 0,
'no-alert': process.env.NODE_ENV === 'production' ? 2 : 0, //禁止使用alert confirm prompt
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
// --------------------静态检测-----------------------------
/**
* 静态检测：
* 以下基本位能够帮助发现代码错误的规则
* */
// 禁止与负零进行比较
'no-compare-neg-zero': 2,
// 禁止将常量作为 if 或三元表达式的测试条件，比如 if (true), let foo = 0 ? 'foo' : 'bar'
'no-constant-condition': [
2,
{
checkLoops: false
}
],
// 禁止在函数参数中出现重复名称的参数 【辅助检测】
'no-dupe-args': 2,
// 禁止在对象字面量中出现重复名称的键名 【辅助检测】
'no-dupe-keys': 2,
// 禁止出现空代码块 【可读性差】
'no-empty': [
2,
{
"allowEmptyCatch": true
}
],
// 禁止将 catch 的第一个参数 error 重新赋值 【重新赋值，error将没有意义】
'no-ex-assign': 2,
// @fixable 禁止函数表达式中出现多余的括号，比如 let foo = (function () { return 1 }) 【一般不会这么写，可读性差】
'no-extra-parens': [2, 'functions'],
// 禁止将一个函数申明重新赋值，如：
// function foo() {}
// foo = bar [静态检测：无意义]
'no-func-assign': 2,
// 禁止在 if 内出现函数申明或使用 var 定义变量
'no-inner-declarations': [2, 'both'],
// 禁止使用特殊空白符（比如全角空格），除非是出现在字符串、正则表达式或模版字符串中
'no-irregular-whitespace': [
2,
{
skipStrings: true,
skipComments: false,
skipRegExps: true,
skipTemplates: true
}
],
// typeof 表达式比较的对象必须是 'undefined', 'object', 'boolean', 'number', 'string', 'function' 或 'symbol'
'valid-typeof': 2,
// -----------------------------------最佳实践----------------------------------------------
/**
* 最佳实践
* 这些规则通过一些最佳实践帮助你避免问题
*/
// 禁止函数的循环复杂度超过 20，【https://en.wikipedia.org/wiki/Cyclomatic_complexity】
complexity: [
2,
{
"max": 20
}
],
// 不允许有空函数，除非是将一个空函数设置为某个项的默认值 【否则空函数并没有实际意义】
'no-empty-function': [
2,
{
allow: ['functions', 'arrowFunctions']
}
],
// 禁止修改原生对象 【例如 Array.protype.xxx=funcion(){}，很容易出问题，比如for in 循环数组 会出问题】
'no-extend-native': 2,
// @fixable 表示小数时，禁止省略 0，比如 .5 【可读性】
'no-floating-decimal': 2,
// 禁止直接 new 一个类而不赋值 【 那么除了占用内存还有什么意义呢？ @off vue语法糖大量存在此类语义 先手动关闭】
'no-new': 0,
// 禁止使用 new Function，比如 let x = new Function("a", "b", "return a + b"); 【可读性差】
'no-new-func': 2,
// 禁止将自己赋值给自己 [规则帮助检测]
'no-self-assign': 2,
// 禁止将自己与自己比较 [规则帮助检测]
'no-self-compare': 2,
// @fixable 立即执行的函数必须符合如下格式 (function () { alert('Hello') })() 【立即函数写法很多，这个是最易读最标准的】
'wrap-iife': [
2,
'inside',
{
functionPrototypeMethods: true
}
],
// 禁止使用保留字作为变量名 [规则帮助检测保留字，通常ide难以发现，生产会出现问题]
'no-shadow-restricted-names': 2,
// 禁止使用未定义的变量
'no-undef': [
2,
{
typeof: false
}
],
// 定义过的变量必须使用 【正规应该是这样的，具体可以大家讨论】
'no-unused-vars': [
2,
{
vars: 'all',
args: 'none',
caughtErrors: 'none',
ignoreRestSiblings: true
}
],
// 变量必须先定义后使用 【ps:涉及到es6存在不允许变量提升的问题，以免引起意想不到的错误，具体可以大家讨论】
'no-use-before-define': [
2,
{
functions: false,
classes: false,
variables: false
}
],
// ----------------------------------------------------代码规范----------------------------------------------------------
/**
* 代码规范
* 有关【空格】、【链式换行】、【缩进】、【=、{}、（）、首位空格】规范没有添加，怕大家一时间接受不了，目前所挑选的规则都是：保障我们的代码可读性、可维护性的
* */
// 变量名必须是 camelcase 驼峰风格的
// @off 【涉及到 很多 api 或文件名可能都不是 camelcase 先关闭】
camelcase: 0,
// @fixable 禁止在行首写逗号
'comma-style': [2, 'last'],
// @fixable 一个缩进必须用两个空格替代
// @off 【不限制大家，为了关闭eslint默认值，所以手动关闭，off不可去掉】 讨论
indent: [2, 2, { SwitchCase: 1 }],
//@off 手动关闭//前面需要回车的规则 注释
'spaced-comment': 0,
//@off 手动关闭: 禁用行尾空白
'no-trailing-spaces': 2,
//@off 手动关闭: 不允许多行回车
'no-multiple-empty-lines': 1,
//@off 手动关闭: 逗号前必须加空格
'comma-spacing': 0,
//@off 手动关闭: 冒号后必须加空格
'key-spacing': 1,
// @fixable 结尾禁止使用分号
//@off [vue官方推荐无分号,不知道大家是否可以接受？先手动off掉] 讨论
// "semi": [2,"never"],
semi: 0,
// 代码块嵌套的深度禁止超过 5 层
'max-depth': [1, 10],
// 回调函数嵌套禁止超过 5 层，多了请用 async await 替代
'max-nested-callbacks': [2, 5],
// 函数的参数禁止超过 7 个
'max-params': [2, 7],
// new 后面的类名必须首字母大写 【面向对象编程原则】
'new-cap': [
2,
{
newIsCap: true,
capIsNew: false,
properties: true
}
],
// @fixable new 后面的类必须有小括号 【没有小括号、指针指过去没有意义】
'new-parens': 2,
// @fixable 禁止属性前有空格，比如 foo. bar() 【可读性太差，一般也没人这么写】
'no-whitespace-before-property': 2,
// @fixable 禁止 if 后面不加大括号而写两行代码 eg: if(a>b) a=0 b=0
'nonblock-statement-body-position': [2, 'beside', { overrides: { while: 'below' } }],
// 禁止变量申明时用逗号一次申明多个 eg: let a,b,c,d,e,f,g = [] 【debug并不好审查、并且没办法单独写注释】
'one-var': [2, 'never'],
// @fixable 【变量申明必须每行一个，同上】
'one-var-declaration-per-line': [2, 'always'],
//是否使用全等
eqeqeq: 0,
//this别名
'consistent-this': [2, 'that'],
// -----------------------------ECMAScript 6-------------------------------------
/**
* ECMAScript 6
* 这些规则与 ES6 有关 【请大家 尝试使用正确使用const和let代替var，以后大家熟悉之后可能会提升规则】
* */
// 禁止对定义过的 class 重新赋值
'no-class-assign': 2,
// @fixable 禁止出现难以理解的箭头函数，比如 let x = a => 1 ? 2 : 3
'no-confusing-arrow': [2, { allowParens: true }],
// 禁止对使用 const 定义的常量重新赋值
'no-const-assign': 2,
// 禁止重复定义类
'no-dupe-class-members': 2,
// 禁止重复 import 模块
'no-duplicate-imports': 2,
//@off 以后可能会开启 禁止 var
'no-var': 0,
// ---------------------------------被关闭的规则-----------------------
// parseInt必须指定第二个参数 parseInt("071",10);
radix: 0,
//强制使用一致的反勾号、双引号或单引号 (quotes) 关闭
quotes: 0,
//要求或禁止函数圆括号之前有一个空格
'space-before-function-paren': [0, 'always'],
//禁止或强制圆括号内的空格
'space-in-parens': [0, 'never'],
//关键字后面是否要空一格
'space-after-keywords': [0, 'always'],
// 要求或禁止在函数标识符和其调用之间有空格
'func-call-spacing': [0, 'never']
}
};
.prettierrc 0 → 100644
{
"printWidth": 400,
"tabWidth": 2,
"useTabs": false,
"singleQuote": true,
"semi": true,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": true,
"proseWrap": "preserve"
}
build/utils.js
...@@ -47,6 +47,7 @@ exports.cssLoaders = function (options) { ...@@ -47,6 +47,7 @@ exports.cssLoaders = function (options) {
if (options.extract) { if (options.extract) {
return ExtractTextPlugin.extract({ return ExtractTextPlugin.extract({
use: loaders, use: loaders,
publicPath:"../../",
fallback: 'vue-style-loader' fallback: 'vue-style-loader'
}) })
} else { } else {
......
config/index.js
...@@ -27,20 +27,21 @@ module.exports = { ...@@ -27,20 +27,21 @@ module.exports = {
errorOverlay: true, errorOverlay: true,
notifyOnErrors: true, notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader? // Use Eslint Loader?
// If true, your code will be linted during bundling and // If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console. // linting errors and warnings will be shown in the console.
useEslint: false, useEslint: true,
// If true, eslint errors and warnings will also be shown in the error overlay // If true, eslint errors and warnings will also be shown in the error overlay
// in the browser. // in the browser.
showEslintErrorsInOverlay: false,
// showEslintErrorsInOverlay: false,
/** /**
* Source Maps * Source Maps
*/ */
// https://webpack.js.org/configuration/devtool/#development // https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map', devtool: 'cheap-module-eval-source-map',
...@@ -59,7 +60,7 @@ module.exports = { ...@@ -59,7 +60,7 @@ module.exports = {
// Paths // Paths
assetsRoot: path.resolve(__dirname, '../dist'), assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static', assetsSubDirectory: 'static',
assetsPublicPath: '/integral-mall/', assetsPublicPath: './',
/** /**
* Source Maps * Source Maps
......
dist/index.html
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><link rel="shortcut icon" href=./static/img/favicon.ico><title>GIC后台</title><link rel=stylesheet type=text/css href=static/css/iconfont.css><link rel=stylesheet type=text/css href=static/css/common.css><link href=/integral-mall/static/css/app.dc7515ded3a783d66118c49b81d6e3a7.css rel=stylesheet></head><body><div id=app></div><script src=//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vuex/3.1.0/vuex.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/elementUI/index.2.5.4.js></script><script src=//web-1251519181.file.myqcloud.com/components/header.2.0.03.js></script><script src=//web-1251519181.file.myqcloud.com/components/aside-menu.2.0.02.js></script><script src=//web-1251519181.file.myqcloud.com/components/export-excel.2.0.01.js></script><script src=//web-1251519181.file.myqcloud.com/components/footer.2.0.02.js></script><script src=//web-1251519181.file.myqcloud.com/components/img-preview.2.0.00.js></script><script src=//web-1251519181.file.myqcloud.com/components/upload-image.2.0.00.js></script><script type=text/javascript src=/integral-mall/static/js/manifest.003beacb9c9ae622c7f2.js></script><script type=text/javascript src=/integral-mall/static/js/vendor.001c8c8c5c313dc75bd0.js></script><script type=text/javascript src=/integral-mall/static/js/app.f1feb583bfa10eac0636.js></script></body></html> <!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><link rel="shortcut icon" href=./static/img/favicon.ico><title>GIC后台</title><link rel=stylesheet type=text/css href=static/css/iconfont.css><link rel=stylesheet type=text/css href=static/css/common.css><link href=./static/css/app.6b0d26a45c323d2bf6448589ccd55867.css rel=stylesheet></head><body><div id=app></div><script src=//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/vuex/3.1.0/vuex.min.js></script><script src=//web-1251519181.file.myqcloud.com/lib/elementUI/index.2.5.4.js></script><script src=//web-1251519181.file.myqcloud.com/components/header.2.0.03.js></script><script src=//web-1251519181.file.myqcloud.com/components/aside-menu.2.0.02.js></script><script src=//web-1251519181.file.myqcloud.com/components/export-excel.2.0.01.js></script><script src=//web-1251519181.file.myqcloud.com/components/footer.2.0.02.js></script><script src=//web-1251519181.file.myqcloud.com/components/img-preview.2.0.00.js></script><script src=//web-1251519181.file.myqcloud.com/components/upload-image.2.0.00.js></script><script src=//web-1251519181.file.myqcloud.com/components/input.2.0.00.js></script><script src=//web-1251519181.file.myqcloud.com/components/delete.2.0.00.js></script><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.264a1f7323512c77f7a5.js></script><script type=text/javascript src=./static/js/app.1ee2eaac00ac61d77731.js></script></body></html>
\ No newline at end of file \ No newline at end of file
dist/static/css/app.6b0d26a45c323d2bf6448589ccd55867.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/css/app.dc7515ded3a783d66118c49b81d6e3a7.css deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/css/common.css
...@@ -301,7 +301,7 @@ a:hover{ ...@@ -301,7 +301,7 @@ a:hover{
input::-webkit-outer-spin-button, input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { input::-webkit-inner-spin-button {
-webkit-appearance: none !important; -webkit-appearance: none !important;
margin: 0; margin: 0;
} }
input[type="number"] { input[type="number"] {
-moz-appearance: textfield; -moz-appearance: textfield;
......
dist/static/js/app.1ee2eaac00ac61d77731.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/js/app.f1feb583bfa10eac0636.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/js/manifest.003beacb9c9ae622c7f2.js deleted 100644 → 0
!function(r){var n=window.webpackJsonp;window.webpackJsonp=function(e,u,c){for(var f,i,l,a=0,p=[];a<e.length;a++)i=e[a],t[i]&&p.push(t[i][0]),t[i]=0;for(f in u)Object.prototype.hasOwnProperty.call(u,f)&&(r[f]=u[f]);for(n&&n(e,u,c);p.length;)p.shift()();if(c)for(a=0;a<c.length;a++)l=o(o.s=c[a]);return l};var e={},t={2:0};function o(n){if(e[n])return e[n].exports;var t=e[n]={i:n,l:!1,exports:{}};return r[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=r,o.c=e,o.d=function(r,n,e){o.o(r,n)||Object.defineProperty(r,n,{configurable:!1,enumerable:!0,get:e})},o.n=function(r){var n=r&&r.__esModule?function(){return r.default}:function(){return r};return o.d(n,"a",n),n},o.o=function(r,n){return Object.prototype.hasOwnProperty.call(r,n)},o.p="/integral-mall/",o.oe=function(r){throw console.error(r),r}}([]);
\ No newline at end of file
dist/static/js/manifest.3ad1d5771e9b13dbdad2.js 0 → 100644
!function(r){var n=window.webpackJsonp;window.webpackJsonp=function(e,u,c){for(var f,i,p,a=0,l=[];a<e.length;a++)i=e[a],o[i]&&l.push(o[i][0]),o[i]=0;for(f in u)Object.prototype.hasOwnProperty.call(u,f)&&(r[f]=u[f]);for(n&&n(e,u,c);l.length;)l.shift()();if(c)for(a=0;a<c.length;a++)p=t(t.s=c[a]);return p};var e={},o={2:0};function t(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return r[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=r,t.c=e,t.d=function(r,n,e){t.o(r,n)||Object.defineProperty(r,n,{configurable:!1,enumerable:!0,get:e})},t.n=function(r){var n=r&&r.__esModule?function(){return r.default}:function(){return r};return t.d(n,"a",n),n},t.o=function(r,n){return Object.prototype.hasOwnProperty.call(r,n)},t.p="./",t.oe=function(r){throw console.error(r),r}}([]);
\ No newline at end of file
dist/static/js/vendor.001c8c8c5c313dc75bd0.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/static/js/vendor.264a1f7323512c77f7a5.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
index.html
...@@ -16,17 +16,21 @@ ...@@ -16,17 +16,21 @@
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<!-- 库引用cdn --> <!-- 库引用cdn -->
<script src="//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js"></script> <script src='//web-1251519181.file.myqcloud.com/lib/vue/2.6.6/vue.min.js'></script>
<script src="//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js"></script> <script src='//web-1251519181.file.myqcloud.com/lib/vue-router/3.0.2/vue-router.min.js'></script>
<script src="//web-1251519181.file.myqcloud.com/lib/vuex/3.1.0/vuex.min.js"></script> <script src='//web-1251519181.file.myqcloud.com/lib/vuex/3.1.0/vuex.min.js'></script>
<script src="//web-1251519181.file.myqcloud.com/lib/elementUI/index.2.5.4.js"></script> <script src='//web-1251519181.file.myqcloud.com/lib/elementUI/index.2.5.4.js'></script>
<!-- 组件引用cdn --> <!-- 组件引用cdn -->
<script src="//web-1251519181.file.myqcloud.com/components/header.2.0.03.js"></script> <script src='//web-1251519181.file.myqcloud.com/components/header.2.0.03.js'></script>
<script src="//web-1251519181.file.myqcloud.com/components/aside-menu.2.0.02.js"></script> <script src='//web-1251519181.file.myqcloud.com/components/aside-menu.2.0.02.js'></script>
<script src="//web-1251519181.file.myqcloud.com/components/export-excel.2.0.01.js"></script> <script src='//web-1251519181.file.myqcloud.com/components/export-excel.2.0.01.js'></script>
<script src="//web-1251519181.file.myqcloud.com/components/footer.2.0.02.js"></script> <script src='//web-1251519181.file.myqcloud.com/components/footer.2.0.02.js'></script>
<script src="//web-1251519181.file.myqcloud.com/components/img-preview.2.0.00.js"></script> <script src='//web-1251519181.file.myqcloud.com/components/img-preview.2.0.00.js'></script>
<script src="//web-1251519181.file.myqcloud.com/components/upload-image.2.0.00.js"></script> <script src='//web-1251519181.file.myqcloud.com/components/upload-image.2.0.00.js'></script>
<!-- 二次封装的input -->
<script src='//web-1251519181.file.myqcloud.com/components/input.2.0.00.js'></script>
<!-- 删除确认弹窗 -->
<script src='//web-1251519181.file.myqcloud.com/components/delete.2.0.00.js'></script>
</body> </body>
</html> </html>
\ No newline at end of file
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
...@@ -8,7 +8,9 @@ ...@@ -8,7 +8,9 @@
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev", "start": "npm run dev",
"build": "node build/build.js", "build": "node build/build.js",
"publish": "publish.bat" "publish": "publish.bat",
"format": "onchange 'test/**/*.js' 'src/**/*.js' 'src/**/*.vue' -- prettier --write {{changed}}",
"formater": "onchange \"test/**/*.js\" \"src/**/*.js\" \"src/**/*.vue\" -- prettier --write {{changed}}"
}, },
"dependencies": { "dependencies": {
"@gic-test/vue-gic-store-linkage": "^1.0.7", "@gic-test/vue-gic-store-linkage": "^1.0.7",
...@@ -17,7 +19,6 @@ ...@@ -17,7 +19,6 @@
"@tinymce/tinymce-vue": "^1.1.0", "@tinymce/tinymce-vue": "^1.1.0",
"axios": "^0.18.0", "axios": "^0.18.0",
"element-ui": "^2.4.1", "element-ui": "^2.4.1",
"packele": "^1.0.8",
"scriptjs": "^2.5.8", "scriptjs": "^2.5.8",
"tinymce": "^4.8.5", "tinymce": "^4.8.5",
"vue": "^2.5.2", "vue": "^2.5.2",
...@@ -30,19 +31,29 @@ ...@@ -30,19 +31,29 @@
"devDependencies": { "devDependencies": {
"ansi-html": "^0.0.7", "ansi-html": "^0.0.7",
"autoprefixer": "^7.1.2", "autoprefixer": "^7.1.2",
"babel-cli": "^6.26.0",
"babel-core": "^6.22.1", "babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1", "babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0", "babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2", "babel-preset-env": "^1.3.2",
"babel-preset-flow": "^6.23.0",
"babel-preset-stage-2": "^6.22.0", "babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1", "chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1", "copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0", "css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-prettier": "^3.6.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"element-theme-chalk": "^2.4.1", "element-theme-chalk": "^2.4.1",
"extract-text-webpack-plugin": "^3.0.0", "extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4", "file-loader": "^1.1.4",
...@@ -51,12 +62,14 @@ ...@@ -51,12 +62,14 @@
"localforage": "^1.7.2", "localforage": "^1.7.2",
"node-notifier": "^5.1.2", "node-notifier": "^5.1.2",
"node-sass": "^4.9.0", "node-sass": "^4.9.0",
"onchange": "^5.2.0",
"optimize-css-assets-webpack-plugin": "^3.2.0", "optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0", "ora": "^1.2.0",
"portfinder": "^1.0.13", "portfinder": "^1.0.13",
"postcss-import": "^11.0.0", "postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8", "postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1", "postcss-url": "^7.2.1",
"prettier": "^1.16.4",
"rimraf": "^2.6.0", "rimraf": "^2.6.0",
"sass-loader": "^7.0.3", "sass-loader": "^7.0.3",
"semver": "^5.3.0", "semver": "^5.3.0",
......
src/App.vue
<template> <template>
<div id="app"> <div id="app">
<keep-alive :include="include"> <keep-alive :include="include">
...@@ -10,19 +9,19 @@ ...@@ -10,19 +9,19 @@
<script> <script>
export default { export default {
name: 'App', name: 'App',
data(){ data() {
return { return {
include:[] include: []
} };
} }
} };
</script> </script>
<style lang="scss"> <style lang="scss">
@import './assets/theme/index.css'; @import './assets/theme/index.css';
@import './assets/style/base/index.scss'; @import './assets/style/base/index.scss';
@import './assets/iconfont/iconfont.css'; @import './assets/iconfont/iconfont.css';
#app{ #app {
height: 100%; height: 100%;
background-color: #f0f2f5; background-color: #f0f2f5;
} }
......
src/api/request.js
/*eslint-disable*/
import axios from 'axios' import axios from 'axios'
import store from '../store/index' import store from '../store/index'
// import router from '../router' // import router from '../router'
...@@ -35,13 +36,12 @@ request.interceptors.request.use( ...@@ -35,13 +36,12 @@ request.interceptors.request.use(
request.interceptors.response.use( request.interceptors.response.use(
response => { response => {
if(response.status == 200 && response.data.errorCode === 401) { if(response.status == 200 && response.data.errorCode === 401) {
window.location.href = window.location.origin + ('/integral-mall') window.location.href = window.location.origin + ('/integral-mall')
// window.location.href = 'http://gicdev.com/gic-web' // window.location.href = 'http://gicdev.com/gic-web'
} }
return response; return response;
}, },
error => { error => {
console.log(error)
if (error.response) { if (error.response) {
switch (error.response.status) { switch (error.response.status) {
case 401: case 401:
......
src/components/aside-menu/component.vue
<template> <template>
<div class="left-aside-contain" :style="{height: asideHeight}"> <div class="left-aside-contain" :style="{ height: asideHeight }">
<div class="leftBar-wrap" > <div class="leftBar-wrap">
<div class="cardmenu" :class="{collapse: leftCollapse}"> <div class="cardmenu" :class="{ collapse: leftCollapse }">
<div class="cardtitle" v-show="!leftCollapse"> <div class="cardtitle" v-show="!leftCollapse">
<span>{{leftModuleName}}</span> <span>{{ leftModuleName }}</span>
</div> </div>
<div class="cardmenu-item"> <div class="cardmenu-item">
<el-menu :default-active="selectMenu" :data-path="'/' + $route.path" style="border-right: 0;" class="el-menu-vertical-demo cardmenupanel" :router="true" text-color="#c0c4cc" active-text-color="#ffffff" :collapse="leftCollapse" unique-opened @open="handleOpen" @select="handleSelect"> <el-menu :default-active="selectMenu" :data-path="'/' + $route.path" style="border-right: 0;" class="el-menu-vertical-demo cardmenupanel" :router="true" text-color="#c0c4cc" active-text-color="#ffffff" :collapse="leftCollapse" unique-opened @select="handleSelect">
<!--:default-openeds="defaultSub"--> <!--:default-openeds="defaultSub"-->
<template v-for="(menuItem,index) in menuLeftRouter" > <template v-for="(menuItem, index) in menuLeftRouter">
<el-submenu :index="index+''" v-if="menuItem.level4List.length>0" :key="index"> <el-submenu :index="index + ''" v-if="menuItem.level4List.length > 0" :key="index">
<template slot="title" > <template slot="title">
<i :class="['iconfont','menu-icon',menuItem.iconUrl]"></i> <i :class="['iconfont', 'menu-icon', menuItem.iconUrl]"></i>
<span slot="title">{{menuItem.menuName}}</span> <span slot="title">{{ menuItem.menuName }}</span>
</template> </template>
<!-- <el-menu-item-group > --> <!-- <el-menu-item-group > -->
<el-menu-item v-for="(childMenu,index) in menuItem.level4List" :index="childMenu.menuUrl" :key="index" style="padding-left: 53px;"><label slot="title" :data-index="$route.path==childMenu.menuUrl? $route.path:false" :data-path="childMenu.menuUrl">{{childMenu.menuName}}</label></el-menu-item> <el-menu-item v-for="(childMenu, index) in menuItem.level4List" :index="childMenu.menuUrl" :key="index" style="padding-left: 53px;"
<!-- </el-menu-item-group> --> ><label slot="title" :data-index="$route.path == childMenu.menuUrl ? $route.path : false" :data-path="childMenu.menuUrl">{{ childMenu.menuName }}</label></el-menu-item
</el-submenu> >
<el-menu-item :index="menuItem.menuUrl" v-if="!menuItem.level4List.length" :key="index"> <!-- </el-menu-item-group> -->
<i :class="['iconfont','menu-icon',menuItem.iconUrl]"></i> </el-submenu>
<span slot="title">{{menuItem.menuName}}</span> <el-menu-item :index="menuItem.menuUrl" v-if="!menuItem.level4List.length" :key="index">
</el-menu-item> <i :class="['iconfont', 'menu-icon', menuItem.iconUrl]"></i>
</template> <span slot="title">{{ menuItem.menuName }}</span>
</el-menu> </el-menu-item>
</template>
</el-menu>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
// import { getRequest } from './api'; // import { getRequest } from './api';
import qs from 'qs'; import qs from 'qs';
export default { export default {
name: 'vue-gic-aside-menu', name: 'vue-gic-aside-menu',
props: ['collapseFlag','projectName'],//'leftMenuRouter','leftModulesName', props: ['collapseFlag', 'projectName'], //'leftMenuRouter','leftModulesName',
data () { data() {
return { return {
repProjectName: 'gic-web', // 项目名 repProjectName: 'gic-web', // 项目名
// 高度 // 高度
asideHeight: '0px', asideHeight: '0px',
pathName: '', // 路由名 pathName: '', // 路由名
leftCollapse: false,// 是否收起左侧 leftCollapse: false, // 是否收起左侧
leftModuleName: '', leftModuleName: '',
// defaultSub: ['1','2','3','4','5','6','7','8','9'], // 默认打开子菜单 // defaultSub: ['1','2','3','4','5','6','7','8','9'], // 默认打开子菜单
menuLeftRouter: [ menuLeftRouter: [],
// 获取 location origin
], baseUrl: '',
// 获取 location origin
baseUrl: '', //已选菜单
selectMenu: ''
//已选菜单 };
selectMenu: '', },
} beforeMount() {
}, var that = this;
beforeMount() { var host = window.location.origin;
var that = this if (host.indexOf('localhost') != '-1') {
var host = window.location.origin; that.baseUrl = 'http://gicdev.demogic.com';
// console.log("当前host:",host) } else {
if (host.indexOf('localhost') != '-1') { that.baseUrl = host;
that.baseUrl = 'http://gicdev.demogic.com'; }
}else { },
that.baseUrl = host methods: {
} // handleOpen(key, keyPath) {
// },
handleSelect(key, keyPath) {
var that = this;
that.selectMenu = key;
}, },
methods: {
// 设置新数据
handleOpen(key, keyPath) { setNewData(newData) {
// console.log(key, keyPath); var that = this;
},
// 处理成需要的路由
handleSelect(key, keyPath){ // var list = [],lists = [];
var that = this newData.forEach(function(ele, index) {
// console.log(key, keyPath); if (ele.level4List == null || ele.level4List.length == 0) {
that.selectMenu = key // 设置 url
}, ele.menuUrl = '/' + ele.menuUrl;
} else {
// 设置新数据 ele.level4List.forEach(function(el, key) {
setNewData(newData) {
var that = this;
// 处理成需要的路由
// var list = [],lists = [];
newData.forEach(function(ele,index){
if (ele.level4List==null || ele.level4List.length==0) {
// 设置 url // 设置 url
ele.menuUrl = '/'+ ele.menuUrl; el.menuUrl = '/' + el.menuUrl;
}else { });
ele.level4List.forEach(function(el,key){
// 设置 url
el.menuUrl = '/'+ el.menuUrl;
})
}
})
// console.log("左侧list:",list)
// list.forEach(function(ele,index){
// if(ele.parentCode == 0){
// ele.children = [];
// }
//
// lists.forEach(function(el,ind) {
// if(el.parentCode == ele.menuCode ){
// // console.log(index,ind)
// ele.children.push(el)
// }
// })
// })
// console.log("处理后的左侧菜单 list:",newData)
that.menuLeftRouter = newData;
},
// 触发父组件路由
toRouter(path) {
var that = this;
that.$emit('toLeftRouterView', '/'+path)
},
// 刷新路由
refreshRoute() {
var that = this
//获取项目名 pathname (路由的hash)
that.routePathName = window.location.hash.split('/')[1];
if (that.routePathName.indexOf('?')!= -1) {
that.routePathName = that.routePathName.split('?')[0]
}
if (that.routePathName.indexOf('/')!= -1) {
that.routePathName = that.routePathName.split('/')[0]
}
// console.log("routePathname:",that.routePathName)
that.pathName = that.routePathName
that.getLeftMenu()
},
// 获取左侧菜单
getLeftMenu() {
var that = this
var para = {
project: that.repProjectName,
path: that.pathName,
requestProject: that.repProjectName
} }
});
that.menuLeftRouter = newData;
},
that.axios.post(that.baseUrl+'/api-auth/get-current-memu-data',qs.stringify(para)) // 触发父组件路由
.then((res) => { toRouter(path) {
// console.log(res,res.data,res.data.errorCode) var that = this;
var resData = res.data that.$emit('toLeftRouterView', '/' + path);
},
// 刷新路由
refreshRoute() {
var that = this;
//获取项目名 pathname (路由的hash)
that.routePathName = window.location.hash.split('/')[1];
if (that.routePathName.indexOf('?') != -1) {
that.routePathName = that.routePathName.split('?')[0];
}
if (that.routePathName.indexOf('/') != -1) {
that.routePathName = that.routePathName.split('/')[0];
}
that.pathName = that.routePathName;
that.getLeftMenu();
},
// 获取左侧菜单
getLeftMenu() {
var that = this;
var para = {
project: that.repProjectName,
path: that.pathName,
requestProject: that.repProjectName
};
that.axios
.post(that.baseUrl + '/api-auth/get-current-memu-data', qs.stringify(para))
.then(res => {
var resData = res.data;
if (resData.errorCode == 0) { if (resData.errorCode == 0) {
if (!resData.result) { if (!resData.result) {
// console.log("resData.result: ",resData.result)
return; return;
} }
that.leftModuleName = resData.result.level2.menuName; that.leftModuleName = resData.result.level2.menuName;
that.setNewData(resData.result.leftMenu) that.setNewData(resData.result.leftMenu);
that.selectMenu = that.$route.path that.selectMenu = that.$route.path;
if (!!resData.result.level4) { if (!!resData.result.level4) {
// 设置选中menu // 设置选中menu
that.selectMenu = '/'+resData.result.level4.menuUrl that.selectMenu = '/' + resData.result.level4.menuUrl;
return; return;
} }
if (!!resData.result.level3) { if (!!resData.result.level3) {
// 设置选中menu // 设置选中menu
that.selectMenu = '/'+resData.result.level3.menuUrl that.selectMenu = '/' + resData.result.level3.menuUrl;
} }
// sessionStorage.setItem('activeHead',resData.result.level2.menuCode) // sessionStorage.setItem('activeHead',resData.result.level2.menuCode)
...@@ -172,88 +152,69 @@ ...@@ -172,88 +152,69 @@
that.$message.error({ that.$message.error({
duration: 1000, duration: 1000,
message: resData.message message: resData.message
}) });
}) })
.catch(function (error) { .catch(function(error) {
// console.log(error);
// that.toLogin()
that.$message.error({ that.$message.error({
duration: 1000, duration: 1000,
message: error.message message: error.message
}) });
}); });
} }
}, },
watch: { watch: {
'$route'(val, oldVal){ $route(val, oldVal) {
console.log(this.$route); this.selectMenu = this.$route.meta.path;
this.selectMenu = this.$route.meta.path;
},
collapseFlag: function(newData,oldData){
var that = this;
// console.log("左侧新数据:",newData,oldData)
that.leftCollapse = newData;
},
// defaultSub: function(newData,oldData){
// var that = this;
// console.log("左侧新数据:",newData,oldData)
// that.defaultSub = newData;
// },
projectName: function(newData,oldData){
var that = this;
// console.log("新数据:",newData,oldData)
that.repProjectName = newData || 'gic-web';
},
}, },
/* 接收数据 */ collapseFlag: function(newData, oldData) {
mounted(){
// console.log("传递的左侧菜单参数:",this.projectName,this.$route)
var that = this; var that = this;
that.leftCollapse = newData;
},
projectName: function(newData, oldData) {
var that = this;
that.repProjectName = newData || 'gic-web';
}
},
// 项目名 /* 接收数据 */
that.repProjectName = that.projectName || 'gic-web'; mounted() {
var that = this;
// 获取高度
that.asideHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 64 +'px';
//获取项目名 pathname (路由的hash)
that.pathName = window.location.hash.split('/')[1];
if (that.pathName.indexOf('?')!= -1) {
that.pathName = that.pathName.split('?')[0]
}
// console.log("pathname:",that.pathName)
// 获取菜单 // 项目名
that.getLeftMenu(); that.repProjectName = that.projectName || 'gic-web';
// 设置默认打开子菜单
// that.defaultSub = [];
// that.defaultSub.push(this.$route.path);
// console.log("that.defaultSub:",that.defaultSub)
// 模块名字 // 获取高度
// that.leftModuleName = that.leftModulesName; that.asideHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 64 + 'px';
//折叠参数 //获取项目名 pathname (路由的hash)
that.leftCollapse = that.collapseFlag; that.pathName = window.location.hash.split('/')[1];
if (that.pathName.indexOf('?') != -1) {
// that.setNewData(that.leftMenuRouter) that.pathName = that.pathName.split('?')[0];
}
// 获取菜单
that.getLeftMenu();
}, //折叠参数
that.leftCollapse = that.collapseFlag;
// that.setNewData(that.leftMenuRouter)
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.attention-wrap{ .attention-wrap {
.item-label{ .item-label {
font-size: 14px; font-size: 14px;
color: #606266; color: #606266;
margin-bottom: 30px; margin-bottom: 30px;
span{ span {
display: inline-block; display: inline-block;
width: 80px; width: 80px;
} }
...@@ -265,7 +226,7 @@ ...@@ -265,7 +226,7 @@
display: inline-block; display: inline-block;
/*overflow: auto; /*overflow: auto;
overflow-x: hidden;*/ overflow-x: hidden;*/
&::-webkit-scrollbar{ &::-webkit-scrollbar {
width: 0; width: 0;
height: 0; height: 0;
} }
...@@ -283,7 +244,7 @@ ...@@ -283,7 +244,7 @@
// height: 0; // height: 0;
// } // }
.cardmenu{ .cardmenu {
flex: 0 0 200px; flex: 0 0 200px;
width: 200px; width: 200px;
height: 100%; height: 100%;
...@@ -291,23 +252,23 @@ ...@@ -291,23 +252,23 @@
overflow-x: hidden; overflow-x: hidden;
background-color: #020b21; background-color: #020b21;
cursor: pointer; cursor: pointer;
transition: all .2s ease; transition: all 0.2s ease;
&::-webkit-scrollbar{ &::-webkit-scrollbar {
width: 0; width: 0;
height: 0; height: 0;
} }
} }
.collapse{ .collapse {
transition: all .3s ease; transition: all 0.3s ease;
flex: 0 0 64px; flex: 0 0 64px;
width: 64px; width: 64px;
/*transform: translateX(-8px);*/ /*transform: translateX(-8px);*/
overflow: hidden; overflow: hidden;
} }
.cardtitle{ .cardtitle {
font-size: 20px; font-size: 20px;
color: #fff; color: #fff;
padding-left: 20px; padding-left: 20px;
...@@ -320,139 +281,140 @@ ...@@ -320,139 +281,140 @@
} }
} }
.leftBar-wrap .el-menu .el-menu-item,.el-menu .el-submenu{ .leftBar-wrap .el-menu .el-menu-item,
background: #020b21; .el-menu .el-submenu {
} background: #020b21;
.leftBar-wrap { }
/deep/ .el-submenu__title:hover { .leftBar-wrap {
background-color: #020b21; /deep/ .el-submenu__title:hover {
}
}
.leftBar-wrap .cardmenu-item /deep/ .el-menu-item-group .el-menu-item-group__title{
background-color: #020b21; background-color: #020b21;
display: none;
}
.leftBar-wrap .cardmenu-item /deep/ .el-submenu__title i {
color: #c0c4cc;
}
.leftBar-wrap .cardmenu-item /deep/ .el-menu-item span {
color: #c0c4cc;
}
.leftBar-wrap .cardmenu-item /deep/ .el-submenu .el-menu-item label {
color: #c0c4cc;
} }
}
.leftBar-wrap .cardmenu-item /deep/ .el-menu-item-group .el-menu-item-group__title {
background-color: #020b21;
display: none;
}
.leftBar-wrap .cardmenu-item /deep/ .el-submenu__title i {
color: #c0c4cc;
}
.leftBar-wrap .cardmenu-item .el-menu-item.is-active { .leftBar-wrap .cardmenu-item /deep/ .el-menu-item span {
color: #fff; color: #c0c4cc;
background-color: #1890ff; }
}
.leftBar-wrap .cardmenu-item /deep/ .el-menu-item.is-active span { .leftBar-wrap .cardmenu-item /deep/ .el-submenu .el-menu-item label {
color: #fff; color: #c0c4cc;
} }
.leftBar-wrap .cardmenu-item /deep/ .el-submenu .el-menu-item.is-active label { .leftBar-wrap .cardmenu-item .el-menu-item.is-active {
color: #fff; color: #fff;
} background-color: #1890ff;
}
.el-menu.el-menu--popup { .leftBar-wrap .cardmenu-item /deep/ .el-menu-item.is-active span {
background: #020b21; color: #fff;
border-radius: 4px; }
}
.el-menu--popup .el-menu-item { .leftBar-wrap .cardmenu-item /deep/ .el-submenu .el-menu-item.is-active label {
height: 40px; color: #fff;
line-height: 40px; }
}
.el-menu--popup .el-menu-item label{ .el-menu.el-menu--popup {
display: block; background: #020b21;
margin-left: -34px; border-radius: 4px;
color: #c0c4cc; }
cursor: pointer;
}
.el-menu--popup .el-menu-item:hover { .el-menu--popup .el-menu-item {
background-color: #020b21; height: 40px;
} line-height: 40px;
}
.el-menu--popup .el-menu-item:hover label { .el-menu--popup .el-menu-item label {
color: #fff; display: block;
} margin-left: -34px;
color: #c0c4cc;
cursor: pointer;
}
.leftBar-wrap .cardmenu-item /deep/ .el-submenu__title,.leftBar-wrap .cardmenu-item /deep/ .el-menu-item,.leftBar-wrap .cardmenu-item /deep/ .el-submenu .el-menu-item{ .el-menu--popup .el-menu-item:hover {
height: 40px; background-color: #020b21;
line-height: 40px; }
}
.leftBar-wrap .cardmenu-item /deep/ li.el-menu-item:hover i{
/*background-color: #1890ff;*/
color: #fff;
}
.leftBar-wrap .cardmenu-item /deep/ li.el-menu-item:hover span{ .el-menu--popup .el-menu-item:hover label {
/*background-color: #1890ff;*/ color: #fff;
color: #fff; }
}
.leftBar-wrap .cardmenu-item /deep/ li.el-submenu:hover i{ .leftBar-wrap .cardmenu-item /deep/ .el-submenu__title,
/*background-color: #1890ff;*/ .leftBar-wrap .cardmenu-item /deep/ .el-menu-item,
color: #fff; .leftBar-wrap .cardmenu-item /deep/ .el-submenu .el-menu-item {
} height: 40px;
line-height: 40px;
}
.leftBar-wrap .cardmenu-item /deep/ li.el-menu-item:hover i {
/*background-color: #1890ff;*/
color: #fff;
}
.leftBar-wrap .cardmenu-item /deep/ li.el-submenu:hover span{ .leftBar-wrap .cardmenu-item /deep/ li.el-menu-item:hover span {
/*background-color: #1890ff;*/ /*background-color: #1890ff;*/
color: #fff; color: #fff;
} }
.leftBar-wrap .cardmenu-item /deep/ li.el-submenu .el-menu-item:hover label{ .leftBar-wrap .cardmenu-item /deep/ li.el-submenu:hover i {
/*background-color: #1890ff;*/ /*background-color: #1890ff;*/
color: #fff; color: #fff;
cursor: pointer; }
}
.leftBar-wrap .el-submenu .el-menu-item-group .el-menu-item { .leftBar-wrap .cardmenu-item /deep/ li.el-submenu:hover span {
position: relative; /*background-color: #1890ff;*/
color: #fff;
}
} .leftBar-wrap .cardmenu-item /deep/ li.el-submenu .el-menu-item:hover label {
.leftBar-wrap .el-submenu .el-menu-item::before{ /*background-color: #1890ff;*/
position: absolute; color: #fff;
content: '●'; cursor: pointer;
left: 35px; }
top: 0px;
font-size: 10px;
/* color: #fff;*/
}
.leftBar-wrap .el-submenu .el-menu-item:hover::before{ .leftBar-wrap .el-submenu .el-menu-item-group .el-menu-item {
color: #fff; position: relative;
} }
.leftBar-wrap .el-submenu .el-menu-item::before {
position: absolute;
content: '●';
left: 35px;
top: 0px;
font-size: 10px;
/* color: #fff;*/
}
.leftBar-wrap .el-submenu .el-menu-item:hover::before {
color: #fff;
}
.leftBar-wrap .slide-fade-enter-active { .leftBar-wrap .slide-fade-enter-active {
transition: all .3s ease; transition: all 0.3s ease;
} }
.leftBar-wrap .slide-fade-leave-active { .leftBar-wrap .slide-fade-leave-active {
transition: all .3s ease; transition: all 0.3s ease;
} }
.leftBar-wrap .cardmenu-item .menu-icon{ .leftBar-wrap .cardmenu-item .menu-icon {
/*margin-right: 5px;*/ /*margin-right: 5px;*/
width: 24px; width: 24px;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
color: #c0c4cc; color: #c0c4cc;
} }
.leftBar-wrap .cardmenu-item .el-menu-item.is-active .menu-icon { .leftBar-wrap .cardmenu-item .el-menu-item.is-active .menu-icon {
color: #fff; color: #fff;
} }
.el-menu-item-group { .el-menu-item-group {
.el-menu-item{ .el-menu-item {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
} }
} }
</style> </style>
src/components/aside-menu/index.js
import vueGicAsideMenu from './component.vue' // 导入组件 import vueGicAsideMenu from './component.vue'; // 导入组件
const vueGicAside = { const vueGicAside = {
install(Vue, options) { install(Vue, options) {
Vue.component(vueGicAsideMenu.name, vueGicAsideMenu) // vueGicAsideMenu.name 组件的name属性 Vue.component(vueGicAsideMenu.name, vueGicAsideMenu); // vueGicAsideMenu.name 组件的name属性
// 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已 // 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
// Vue.prototype.$xxx // 最终可以在任何地方通过 this.$xxx 调用 // Vue.prototype.$xxx // 最终可以在任何地方通过 this.$xxx 调用
// 虽然没有明确规定用$开头 但是大家都默认遵守这个规定 // 虽然没有明确规定用$开头 但是大家都默认遵守这个规定
} }
} };
if (typeof window !== 'undefined' && window.Vue) { if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(vueGicAside); window.Vue.use(vueGicAside);
} }
export default vueGicAside export default vueGicAside;
// export { // export {
// vueGicAsideMenu // vueGicAsideMenu
// } // }
src/components/index.js
...@@ -2,4 +2,4 @@ import upload from './upload'; ...@@ -2,4 +2,4 @@ import upload from './upload';
export default { export default {
upload upload
} };
src/components/layout/index.vue
...@@ -3,16 +3,18 @@ ...@@ -3,16 +3,18 @@
<vue-gic-header class="user-header-pop" style="z-index: 1999;min-width:1400px" :projectName="projectName" :collapseFlag="collapseFlag" @collapseTag="collapseTagHandler" @toRouterView="toRouterView"></vue-gic-header> <vue-gic-header class="user-header-pop" style="z-index: 1999;min-width:1400px" :projectName="projectName" :collapseFlag="collapseFlag" @collapseTag="collapseTagHandler" @toRouterView="toRouterView"></vue-gic-header>
<div class="layout"> <div class="layout">
<vue-gic-aside-menu class="layout-left" v-if="asideShow" :projectName="projectName" :leftModulesName="leftModulesName" :collapseFlag.sync="collapseFlag"></vue-gic-aside-menu> <vue-gic-aside-menu class="layout-left" v-if="asideShow" :projectName="projectName" :leftModulesName="leftModulesName" :collapseFlag.sync="collapseFlag"></vue-gic-aside-menu>
<div class="layout-right" :class="[{'asideShow': asideShow},{'collapseFlag':asideShow && collapseFlag}]"> <div class="layout-right" :class="[{ asideShow: asideShow }, { collapseFlag: asideShow && collapseFlag }]">
<div class="layout-title"> <div class="layout-title">
<el-breadcrumb class="dm-breadcrumb" separator="/"> <el-breadcrumb class="dm-breadcrumb" separator="/">
<el-breadcrumb-item :to="{ path: '' }"><a href="/report/#/memberSummary">首页</a></el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '' }"><a href="/report/#/memberSummary">首页</a></el-breadcrumb-item>
<el-breadcrumb-item :class="{'no-link':!v.path}" v-for="(v,i) in breadcrumb" :key="i" :to="{ path: v.path }">{{v.name}}</el-breadcrumb-item> <el-breadcrumb-item :class="{ 'no-link': !v.path }" v-for="(v, i) in breadcrumb" :key="i" :to="{ path: v.path }">{{ v.name }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<h3><span>{{contentTitle}}</span></h3> <h3>
<span>{{ contentTitle }}</span>
</h3>
</div> </div>
<div class="layout-content__wrap"> <div class="layout-content__wrap">
<div class="layout-content" :class="[{'asideShow': asideShow},{'collapseFlag':asideShow && collapseFlag}]"> <div class="layout-content" :class="[{ asideShow: asideShow }, { collapseFlag: asideShow && collapseFlag }]">
<router-view></router-view> <router-view></router-view>
</div> </div>
</div> </div>
...@@ -23,165 +25,165 @@ ...@@ -23,165 +25,165 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data() {
return { return {
collapseFlag: false, collapseFlag: false,
projectName: "integral-mall", projectName: 'integral-mall',
leftModulesName: '公众号配置', leftModulesName: '公众号配置'
} };
}, },
created(){ created() {
$bus.$on('aside-menu',val => { /* eslint-disable */
this.leftMenuRouter = val $bus.$on('aside-menu', val => {
}) this.leftMenuRouter = val;
});
},
/* eslint-disable */
destroyed() {
$bus.$off('aside-menu');
},
computed: {
asideShow() {
return this.$store.state.marketing.asideShow;
}, },
destroyed() { contentTitle() {
$bus.$off('aside-menu'); return this.$route.name;
},
computed: {
asideShow() {
console.log(this.$store.state)
return this.$store.state.marketing.asideShow;
},
contentTitle() {
return this.$route.name
},
breadcrumb() {
return this.$store.state.marketing.breadcrumb;
}
}, },
// watch:{ breadcrumb() {
// asideShow(val) { return this.$store.state.marketing.breadcrumb;
// this.collapseFlag = this.asideShow; }
// } },
// watch:{
// asideShow(val) {
// this.collapseFlag = this.asideShow;
// }
// },
methods: {
// // 处理路由跳转
// toRouterView(val) {
// var that = this;
// // 模拟检查数据
// // //有两个参数
// //{
// // name:,
// // path:
// //}
// that.$router.push({
// path: val
// });
// }, // },
methods: { // 处理路由跳转
// 处理路由跳转 toRouterView(val) {
toRouterView(val) { //有两个参数
var that = this; //{
// 模拟检查数据 // name:,
// //有两个参数 // path:
//{ //}
// name:, this.$router.push({
// path: path: val.path
//} });
that.$router.push({ },
path: val // 折叠事件
}) collapseTagHandler(val) {
}, this.collapseFlag = val;
// 处理路由跳转
toRouterView(val) {
//有两个参数
//{
// name:,
// path:
//}
this.$router.push({
path: val.path
})
},
// 折叠事件
collapseTagHandler(val){
this.collapseFlag = val
}
} }
} }
};
</script> </script>
<style lang="scss"> <style lang="scss">
.layout-container{ .layout-container {
height:100%; height: 100%;
display:flex; display: flex;
}
.layout {
display: flex;
flex-direction: row;
background-color: #f0f2f5;
height: calc(100% - 64px);
overflow-x: auto;
overflow-y: hidden;
margin-top: 64px;
width: 100%;
&-left {
width: 200px;
display: inline-block;
position: fixed;
left: 0;
z-index: 9;
} }
.layout { &-right {
display: flex; position: relative;
flex-direction: row; flex: 1;
background-color: #f0f2f5;
height: calc(100% - 64px);
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; transition: width 0.5s;
margin-top: 64px; -moz-transition: width 0.5s;
width: 100%; -webkit-transition: width 0.5s;
&-left { -o-transition: width 0.5s;
width: 200px; height: 100%;
display: inline-block; // overflow-y: auto;
position: fixed; margin-left: 0px;
left: 0; &.asideShow {
z-index: 9; margin-left: 200px;
} }
&-right{ &.collapseFlag {
position: relative; margin-left: 64px;
flex: 1;
overflow-x:auto;
transition: width 0.5s;
-moz-transition: width 0.5s;
-webkit-transition: width 0.5s;
-o-transition: width 0.5s;
height: 100%;
// overflow-y: auto;
margin-left:0px;
&.asideShow{
margin-left: 200px;
}
&.collapseFlag{
margin-left: 64px;
}
} }
&-title{ }
// position: absolute; &-title {
// width: 100%; // position: absolute;
// top:0; // width: 100%;
// left:0; // top:0;
height:85px; // left:0;
background:#fff; height: 85px;
// box-shadow: 0 3px 5px rgba(147,165,184,.13); background: #fff;
padding:15px 0 0 30px; // box-shadow: 0 3px 5px rgba(147,165,184,.13);
border-bottom: 1px solid #e4e7ed; padding: 15px 0 0 30px;
h3 { border-bottom: 1px solid #e4e7ed;
color:#303133; h3 {
font-size:20px; color: #303133;
padding:24px 0; font-size: 20px;
font-weight:500; padding: 24px 0;
span{ font-weight: 500;
color:#303133; span {
font-size:20px; color: #303133;
font-weight:500; font-size: 20px;
} font-weight: 500;
i{
font-size:20px;
color:#c0c4ce;
cursor: pointer;
&:hover{
color:#909399;
}
}
} }
} i {
&-content__wrap { font-size: 20px;
overflow-y: auto; color: #c0c4ce;
position: relative; cursor: pointer;
top:-1px; &:hover {
&::-webkit-scrollbar { color: #909399;
display: none; }
} }
} }
&-content { }
// margin-top: 100px; &-content__wrap {
min-height: calc(100% - 200px); overflow-y: auto;
min-width: 1400px; position: relative;
&.asideShow{ top: -1px;
min-width: 1200px; &::-webkit-scrollbar {
} display: none;
&.collapseFlag{
min-width: 1336px;
}
} }
} }
.dm-breadcrumb{ &-content {
display: inline-block; // margin-top: 100px;
vertical-align: middle; min-height: calc(100% - 200px);
min-width: 1400px;
&.asideShow {
min-width: 1200px;
}
&.collapseFlag {
min-width: 1336px;
}
} }
}
.dm-breadcrumb {
display: inline-block;
vertical-align: middle;
}
.user-header-pop { .user-header-pop {
min-width: 95px; min-width: 95px;
...@@ -189,5 +191,4 @@ ...@@ -189,5 +191,4 @@
.el-popover.user-header-pop { .el-popover.user-header-pop {
min-width: 95px; min-width: 95px;
} }
</style> </style>
src/config/index.js
/*eslint-disable*/
const config = { const config = {
development: { development: {
api: '/dmApi/' api: '/dmApi/'
}, },
production: { production: {
// api: 'https://hope.demogic.com/', // api: 'https://hope.demogic.com/',
api: (window.location.protocol + '//' + window.location.host +'/') || '' api: window.location.protocol + '//' + window.location.host + '/' || ''
} }
} };
export default { export default {
api: config[process.env['NODE_ENV']]['api'] api: config[process.env['NODE_ENV']]['api']
} };
src/config/interceptors/axios.js
export default axios export default axios;
\ No newline at end of file
src/main.js
import Vue from 'vue' import Vue from 'vue';
import App from './App' import App from './App';
import router from './router' import router from './router';
import store from './store' import store from './store';
import { axios } from './service/api/index' import { axios } from './service/api/index';
import ElementUI from 'element-ui' import ElementUI from 'element-ui';
// import vueGicHeader from '@gic-test/vue-gic-header' // import vueGicHeader from '@gic-test/vue-gic-header'
// import vueGicFooter from '@gic-test/vue-gic-footer' // import vueGicFooter from '@gic-test/vue-gic-footer'
// 单个图片预览插件 // 单个图片预览插件
// import vueGicImgPreview from '@gic-test/vue-gic-img-preview' // import vueGicImgPreview from '@gic-test/vue-gic-img-preview'
import vueGicStoreLinkage from '@gic-test/vue-gic-store-linkage/src/lib' import vueGicStoreLinkage from '@gic-test/vue-gic-store-linkage/src/lib';
// import vueGicAsideMenu from '@/components/aside-menu' // import vueGicAsideMenu from '@/components/aside-menu'
// 图片墙上传插件 // 图片墙上传插件
// import vueGicUploadImage from '@gic-test/vue-gic-upload-image/src/lib' // import vueGicUploadImage from '@gic-test/vue-gic-upload-image/src/lib'
import VueClipboard from 'vue-clipboard2' import VueClipboard from 'vue-clipboard2';
// import vueGicExportExcel from '@gic-test/vue-gic-export-excel' // import vueGicExportExcel from '@gic-test/vue-gic-export-excel'
Vue.config.productionTip = false;
Vue.use(ElementUI);
import packele from 'packele'
Vue.config.productionTip = false
Vue.use(packele)
Vue.use(ElementUI)
// Vue.use(vueGicHeader) // Vue.use(vueGicHeader)
// Vue.use(vueGicFooter) // Vue.use(vueGicFooter)
// Vue.use(vueGicAsideMenu) // Vue.use(vueGicAsideMenu)
Vue.use(vueGicStoreLinkage) Vue.use(vueGicStoreLinkage);
// Vue.use(vueGicImgPreview) // Vue.use(vueGicImgPreview)
// Vue.use(vueGicUploadImage) // Vue.use(vueGicUploadImage)
Vue.use(VueClipboard) Vue.use(VueClipboard);
// Vue.use(vueGicExportExcel) // Vue.use(vueGicExportExcel)
Vue.prototype.axios = axios; Vue.prototype.axios = axios;
Vue.prototype.axios.withCredentials = true Vue.prototype.axios.withCredentials = true;
/* eslint-disable */
window.$bus = new Vue(); window.$bus = new Vue();
let flag = false let flag = false;
Vue.prototype.$tips = function({ message = '提示', type = 'success' }) { Vue.prototype.$tips = function({ message = '提示', type = 'success' }) {
if (flag) { return } else { this.$message({ message, type }) } if (flag) {
flag = true; return;
setTimeout(_ => { flag = false }, 1000) } else {
} this.$message({ message, type });
/* eslint-disable no-new */ }
flag = true;
setTimeout(_ => {
flag = false;
}, 1000);
};
/* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: '#app',
router, router,
store, store,
components: { App }, components: { App },
template: '<App/>' template: '<App/>'
}) });
\ No newline at end of file
src/router/index.js
import Vue from 'vue' import Vue from 'vue';
import Router from 'vue-router' import Router from 'vue-router';
import routes from './routes' import routes from './routes';
Vue.use(Router) Vue.use(Router);
let router = new Router({ let router = new Router({
routes, routes,
...@@ -13,17 +13,14 @@ let router = new Router({ ...@@ -13,17 +13,14 @@ let router = new Router({
} }
const layoutRight = document.querySelector('.layout-right'); const layoutRight = document.querySelector('.layout-right');
if (layoutRight) { if (layoutRight) {
layoutRight.scrollTo(0,0); layoutRight.scrollTo(0, 0);
} }
} }
});
}) router.beforeEach((to, from, next) => {
router.beforeEach((to,from,next) => {
document.title = to.name; document.title = to.name;
next() next();
}) });
export default router
export default router;
src/router/routes.js
import Layout from '@/components/layout' import Layout from '@/components/layout';
import page401 from '@/views/error/401' import page401 from '@/views/error/401';
import page403 from '@/views/error/403' import page403 from '@/views/error/403';
import page404 from '@/views/error/404' import page404 from '@/views/error/404';
import page500 from '@/views/error/500' import page500 from '@/views/error/500';
//积分商城 //积分商城
import mall from '../views/mall/index'; import mall from '../views/mall/index';
import couponList from '../views/mall/coupon/list'; import couponList from '../views/mall/coupon/list';
...@@ -13,144 +13,146 @@ import giftExchange from '../views/mall/gift/exchange'; ...@@ -13,144 +13,146 @@ import giftExchange from '../views/mall/gift/exchange';
import giftInfo from '../views/mall/gift/info.vue'; import giftInfo from '../views/mall/gift/info.vue';
import goodsList from '../views/mall/goods/list'; import goodsList from '../views/mall/goods/list';
export default [
{
path: '/',
name: 'layout',
component: Layout,
redirect: '/mall',
children: [
{
path: 'mall',
name: '积分商城',
component: mall,
redirect: '/coupon',
meta: {},
children: [
{
path: '/coupon',
name: '优惠券',
component: couponList,
meta: {
menu: 'coupon'
}
},
{
path: '/coupon/exchange/:id',
name: '优惠券兑换记录',
component: couponExchange,
meta: {
menu: 'coupon'
}
},
{
path: '/coupon/info',
name: '新增优惠券',
component: couponInfo,
meta: {
type: 'add',
menu: 'coupon'
}
},
{
path: '/coupon/info/:id',
name: '编辑优惠券',
component: couponInfo,
meta: {
type: 'edit',
menu: 'coupon'
}
},
{
path: '/coupon/queryinfo/:id',
name: '优惠券详情',
component: couponInfo,
meta: {
type: 'info',
menu: 'coupon'
}
},
{
path: '/gift',
name: '礼品',
component: giftList,
meta: {
menu: 'gift'
}
},
{
path: '/gift/exchange/:id',
name: '礼品兑换记录',
component: giftExchange,
meta: {
menu: 'gift'
}
},
{
path: '/gift/wxexchange/:id',
name: '微信兑换券兑换记录',
component: giftExchange,
meta: {
menu: 'gift',
type: 'wx'
}
},
{
path: '/gift/info',
name: '新增礼品',
component: giftInfo,
meta: {
type: 'add',
menu: 'gift'
}
},
{
path: '/gift/info/:id',
name: '编辑礼品',
component: giftInfo,
meta: {
type: 'edit',
menu: 'gift'
}
},
{
path: '/gift/queryinfo/:id',
name: '礼品详情',
component: giftInfo,
meta: {
type: 'info',
menu: 'gift'
}
},
export default [{ {
path: '/', path: '/goods',
name: 'layout', name: '待发货',
component: Layout, component: goodsList,
redirect: '/mall', meta: {
children: [{ menu: 'goods'
path: 'mall', }
name: '积分商城', }
component: mall, ]
redirect: '/coupon', }
meta: {}, ]
children: [{ },
path: '/coupon', {
name: '优惠券', path: '/401',
component: couponList, name: '未授权',
meta: { component: page401
menu: 'coupon' },
} {
}, path: '/403',
{ name: '禁止访问',
path: '/coupon/exchange/:id', component: page403
name: '优惠券兑换记录', },
component: couponExchange, {
meta: { path: '/500',
menu: 'coupon' name: '系统错误',
} component: page500
}, },
{ {
path: '/coupon/info', path: '*',
name: '新增优惠券', name: '未知领域',
component: couponInfo, component: page404
meta: { }
type: 'add', ];
menu: 'coupon'
}
},
{
path: '/coupon/info/:id',
name: '编辑优惠券',
component: couponInfo,
meta: {
type: 'edit',
menu: 'coupon'
}
},
{
path: '/coupon/queryinfo/:id',
name: '优惠券详情',
component: couponInfo,
meta: {
type: 'info',
menu: 'coupon'
}
},
{
path: '/gift',
name: '礼品',
component: giftList,
meta: {
menu: 'gift'
}
},
{
path: '/gift/exchange/:id',
name: '礼品兑换记录',
component: giftExchange,
meta: {
menu: 'gift'
}
},
{
path: '/gift/wxexchange/:id',
name: '微信兑换券兑换记录',
component: giftExchange,
meta: {
menu: 'gift',
type: 'wx'
}
},
{
path: '/gift/info',
name: '新增礼品',
component: giftInfo,
meta: {
type: 'add',
menu: 'gift'
}
},
{
path: '/gift/info/:id',
name: '编辑礼品',
component: giftInfo,
meta: {
type: 'edit',
menu: 'gift'
}
},
{
path: '/gift/queryinfo/:id',
name: '礼品详情',
component: giftInfo,
meta: {
type: 'info',
menu: 'gift'
}
},
{
path: '/goods',
name: '待发货',
component: goodsList,
meta: {
menu: 'goods'
}
},
]
}]
},
{
path: '/401',
name: '未授权',
component: page401
},
{
path: '/403',
name: '禁止访问',
component: page403
},
{
path: '/500',
name: '系统错误',
component: page500
},
{
path: '*',
name: '未知领域',
component: page404
},
]
\ No newline at end of file
src/service/api/commonApi.js
import {requests} from './index'; import { requests } from './index';
import router from '@/router'; import router from '@/router';
const MARKET_PREFIX = 'api-marketing/'; const MARKET_PREFIX = 'api-marketing/';
const PLUG_PREFIX = 'api-plug/'; const PLUG_PREFIX = 'api-plug/';
const GOODS_PREFIX = 'api-admin/'; const GOODS_PREFIX = 'api-admin/';
import Vue from 'vue'; import Vue from 'vue';
const _vm = new Vue(); const _vm = new Vue();
//获取营销场景 //获取营销场景
export const sceneSettingList = (params) => requests(MARKET_PREFIX + 'scene-setting-list', params); export const sceneSettingList = params => requests(MARKET_PREFIX + 'scene-setting-list', params);
//获取营销场景 //获取营销场景
export const getCardList = (params) => requests(PLUG_PREFIX + 'get-coupon-list', params); export const getCardList = params => requests(PLUG_PREFIX + 'get-coupon-list', params);
//所有门店分组 //所有门店分组
export const storeGroupList = (params) => requests(GOODS_PREFIX + 'store-group-list', params); export const storeGroupList = params => requests(GOODS_PREFIX + 'store-group-list', params);
//上传图片 //上传图片
export const uploadImgText = (params) => requests(PLUG_PREFIX + 'upload-img', params); export const uploadImgText = params => requests(PLUG_PREFIX + 'upload-img', params);
src/service/api/index.js
import Vue from 'vue' /*eslint-disable*/
import axios from 'axios' import Vue from 'vue';
import config from '@/config' import axios from 'axios';
import { log } from '@/utils' import config from '@/config';
import qs from 'qs' import { log } from '@/utils';
import Router from 'vue-router' import qs from 'qs';
import Router from 'vue-router';
const router = new Router(); const router = new Router();
// 加载最小时间 // 加载最小时间
const MINI_TIME = 300 const MINI_TIME = 300;
// 超时时间 // 超时时间
let TIME_OUT_MAX = 20000 let TIME_OUT_MAX = 20000;
// 环境value // 环境value
let _isDev = process.env.NODE_ENV === 'development' let _isDev = process.env.NODE_ENV === 'development';
// 请求接口host // 请求接口host
let _apiHost = config.api let _apiHost = config.api;
// 请求组（判断当前请求数） // 请求组（判断当前请求数）
let _requests = [] let _requests = [];
//创建一个请求实例 //创建一个请求实例
const instance = axios.create({ const instance = axios.create({
baseURL: _apiHost, baseURL: _apiHost,
timeout: TIME_OUT_MAX, timeout: TIME_OUT_MAX,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}, headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}) });
/** /**
* 添加请求，显示loading * 添加请求，显示loading
* @param {请求配置} config * @param {请求配置} config
*/ */
function pushRequest(config) { function pushRequest(config) {
log(`${config.url}--begin`) log(`${config.url}--begin`);
_requests.push(config) _requests.push(config);
} }
/** /**
...@@ -38,12 +39,12 @@ function pushRequest(config) { ...@@ -38,12 +39,12 @@ function pushRequest(config) {
* @param {请求配置} config * @param {请求配置} config
*/ */
function popRequest(config) { function popRequest(config) {
log(`${config.url}--end`) log(`${config.url}--end`);
let _index = _requests.findIndex(r => { let _index = _requests.findIndex(r => {
return r === config return r === config;
}) });
if (_index > -1) { if (_index > -1) {
_requests.splice(_index, 1) _requests.splice(_index, 1);
} }
} }
/** /**
...@@ -51,91 +52,86 @@ function popRequest(config) { ...@@ -51,91 +52,86 @@ function popRequest(config) {
* @param {*} code * @param {*} code
* @param {string} [message='请求错误'] * @param {string} [message='请求错误']
*/ */
function handlerErr(code,message = '请求错误') { function handlerErr(code, message = '请求错误') {
switch (code) { switch (code) {
case 404: case 404:
message = '404,错误请求' message = '404,错误请求';
router.push('/404') router.push('/404');
break break;
case 401: case 401:
if (!_isDev) { if (!_isDev) {
window.location.href = config.api+'/gic-web/#/' window.location.href = config.api + '/gic-web/#/';
} }
message = '登录失效' message = '登录失效';
break break;
case 403: case 403:
message = '禁止访问' message = '禁止访问';
router.push('/403') router.push('/403');
break break;
case 408: case 408:
message = '请求超时' message = '请求超时';
break break;
case 500: case 500:
message = '服务器内部错误' message = '服务器内部错误';
// router.push('/500') // router.push('/500')
break break;
case 501: case 501:
message = '功能未实现' message = '功能未实现';
break break;
case 503: case 503:
message = '服务不可用' message = '服务不可用';
break break;
case 504: case 504:
message = '网关错误' message = '网关错误';
break break;
} }
Vue.prototype.$tips({type:'warning',message:message}) Vue.prototype.$tips({ type: 'warning', message: message });
} }
/** /**
* 请求地址，请求数据，是否静默，请求方法 * 请求地址，请求数据，是否静默，请求方法
*/ */
const requests = (url, data = {},contentTypeIsJSON = false, isSilence = false, method = 'POST') => { const requests = (url, data = {}, contentTypeIsJSON = false, isSilence = false, method = 'POST') => {
let _opts = { method, url } let _opts = { method, url };
const _query = {} const _query = {};
let _timer = null let _timer = null;
if (method.toLocaleUpperCase() === 'POST') { if (method.toLocaleUpperCase() === 'POST') {
if (contentTypeIsJSON) { if (contentTypeIsJSON) {
_opts.data = data; _opts.data = data;
_opts.headers = {'Content-Type': 'application/json'}; _opts.headers = { 'Content-Type': 'application/json' };
_opts.url += '?requestProject=marketing'; _opts.url += '?requestProject=marketing';
} else { } else {
_opts.data = qs.stringify(Object.assign({requestProject:'gic-web'},data)) _opts.data = qs.stringify(Object.assign({ requestProject: 'integral-mall' }, data));
} }
} else { } else {
_opts.params = _query _opts.params = _query;
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let _random = { stamp: Date.now(), url: `${_apiHost + url}` } let _random = { stamp: Date.now(), url: `${_apiHost + url}` };
if (!isSilence) { if (!isSilence) {
_timer = setTimeout(() => { _timer = setTimeout(() => {
pushRequest(_random) pushRequest(_random);
}, MINI_TIME) }, MINI_TIME);
} }
instance(_opts) instance(_opts)
.then(res => { .then(res => {
clearTimeout(_timer) clearTimeout(_timer);
popRequest(_random) popRequest(_random);
if (res.data.errorCode !== 0) { if (res.data.errorCode !== 0) {
reject(res); reject(res);
handlerErr(res.data.errorCode,res.data.message); handlerErr(res.data.errorCode, res.data.message);
} else { } else {
resolve(res.data) resolve(res.data);
} }
}) })
.catch(res => { .catch(res => {
clearTimeout(_timer) clearTimeout(_timer);
popRequest(_random) popRequest(_random);
if (res) { if (res) {
handlerErr(res.response.status,'接口异常') handlerErr(res.response.status, '接口异常');
} }
reject(res) reject(res);
}) });
}) });
} };
export { instance as axios, requests };
export {
instance as axios,
requests
}
src/service/api/mallApi.js
import { requests } from './index'; import { requests } from './index';
import config from '@/config'; import config from '@/config';
const PREFIX = 'api-integral-mall/'; const PREFIX = 'api-integral-mall/';
// 卡券列表 // 卡券列表
export const getCardList = (params) => requests(PREFIX + 'list-card', params); export const getCardList = params => requests(PREFIX + 'list-card', params);
// 首页优惠券 // 首页优惠券
export const getPageCardsList = (params) => requests(PREFIX + 'page-cards', params); export const getPageCardsList = params => requests(PREFIX + 'page-cards', params);
//更新库存 //更新库存
export const updateStockService = (params) => requests(PREFIX + 'update-stock', params); export const updateStockService = params => requests(PREFIX + 'update-stock', params);
//更新兑换所需积分 //更新兑换所需积分
export const updateIntegralCostService = (params) => requests(PREFIX + 'update-integral-cost', params); export const updateIntegralCostService = params => requests(PREFIX + 'update-integral-cost', params);
//更新兑换所需现金 //更新兑换所需现金
export const updateCashCostService = (params) => requests(PREFIX + 'update-cash-cost', params); export const updateCashCostService = params => requests(PREFIX + 'update-cash-cost', params);
//删除商品 //删除商品
export const deleteProService = (params) => requests(PREFIX + 'delete-pro', params); export const deleteProService = params => requests(PREFIX + 'delete-pro', params);
//查看兑换记录 //查看兑换记录
export const getPageExchangeLogsList = (params) => requests(PREFIX + 'page-exchange-logs', params); export const getPageExchangeLogsList = params => requests(PREFIX + 'page-exchange-logs', params);
//查询单个商品 //查询单个商品
export const getIntegralMallProInfo = (params) => requests(PREFIX + 'get-integral-mall-pro', params); export const getIntegralMallProInfo = params => requests(PREFIX + 'get-integral-mall-pro', params);
//基础数据-会员等级 //基础数据-会员等级
export const getGradeList = (params) => requests(PREFIX + 'load-grade', params); export const getGradeList = params => requests(PREFIX + 'load-grade', params);
//创建修改积分商品 //创建修改积分商品
export const createIntegralProService = (params) => requests(PREFIX + 'create-integral-pro', params, true); export const createIntegralProService = params => requests(PREFIX + 'create-integral-pro', params, true);
// 首页礼品列表 // 首页礼品列表
export const getPageGiftList = (params) => requests(PREFIX + 'page-gift', params); export const getPageGiftList = params => requests(PREFIX + 'page-gift', params);
// 基础数据-分类列表 // 基础数据-分类列表
export const getCategoryList = (params) => requests(PREFIX + 'load-category', params); export const getCategoryList = params => requests(PREFIX + 'load-category', params);
// 导出优惠券兑换记录 // 导出优惠券兑换记录
export const exportExchangeListExcel = config.api + PREFIX + 'download-exchange-list-execl'; export const exportExchangeListExcel = config.api + PREFIX + 'download-exchange-list-execl';
// 导出代发货商品 // 导出代发货商品
export const exportOnlineListExcel = config.api + PREFIX + 'download-integral-online-excel'; export const exportOnlineListExcel = config.api + PREFIX + 'download-integral-online-excel';
// 查看物流 // 查看物流
export const getLogisticsInfo = (params) => requests(PREFIX + 'list-logistics-traces', params); export const getLogisticsInfo = params => requests(PREFIX + 'list-logistics-traces', params);
// 基础数据-物流列表 // 基础数据-物流列表
export const getLogisticsList = (params) => requests(PREFIX + 'load-logisties', params); export const getLogisticsList = params => requests(PREFIX + 'load-logisties', params);
// 订单发货，取消，修改物流 // 订单发货，取消，修改物流
export const orderOptService = (params) => requests(PREFIX + 'order-opt', params); export const orderOptService = params => requests(PREFIX + 'order-opt', params);
// 首页待发货 // 首页待发货
export const getPageUndeliverList = (params) => requests(PREFIX + 'page-undeliver', params); export const getPageUndeliverList = params => requests(PREFIX + 'page-undeliver', params);
// 首页代发货数量 // 首页代发货数量
export const getNotSendCount = (params) => requests(PREFIX + 'get-not-send-count', params); export const getNotSendCount = params => requests(PREFIX + 'get-not-send-count', params);
// 礼品设置热门商品 // 礼品设置热门商品
export const setHotStatusService = (params) => requests(PREFIX + 'update-hot-status', params); export const setHotStatusService = params => requests(PREFIX + 'update-hot-status', params);
// 新建礼品分类 // 新建礼品分类
export const createCategoryService = (params) => requests(PREFIX + 'create-gift-category', params); export const createCategoryService = params => requests(PREFIX + 'create-gift-category', params);
// 删除礼品分类 // 删除礼品分类
export const delCategoryService = (params) => requests(PREFIX + 'del-gift-category', params); export const delCategoryService = params => requests(PREFIX + 'del-gift-category', params);
// 获取卡券成本 // 获取卡券成本
export const getCashCostService = (params) => requests(PREFIX + 'get-integral-mall-CashCost', params); export const getCashCostService = params => requests(PREFIX + 'get-integral-mall-CashCost', params);
// 获取卡券成本 // 获取卡券成本
export const getMemberInfo = (params) => requests(PREFIX + 'get-member', params); export const getMemberInfo = params => requests(PREFIX + 'get-member', params);
\ No newline at end of file
src/store/index.js
import Vue from 'vue' import Vue from 'vue';
import Vuex from 'vuex' import Vuex from 'vuex';
import marketing from './modules/marketing' import marketing from './modules/marketing';
Vue.use(Vuex);
Vue.use(Vuex)
export default new Vuex.Store({ export default new Vuex.Store({
modules: { modules: {
marketing, marketing
}, }
}) });
src/store/modules/marketing.js
// initial state // initial state
const state = { const state = {
all: 0, all: 0,
cartData: [], cartData: [],
total: 0, total: 0,
leftMenu:[], leftMenu: [],
storeObj:{}, storeObj: {},
asideShow:false, asideShow: false,
breadcrumb:[] breadcrumb: []
} };
// getters // getters
const getters = { const getters = {
allProducts: (state, getters, rootState) => { allProducts: (state, getters, rootState) => {
return state.all return state.all;
}, },
allCartData: state => state.cartData, allCartData: state => state.cartData,
total: state => { total: state => {
state.total = 0; state.total = 0;
for( let item of state.cartData ) { for (let item of state.cartData) {
state.total += item.price state.total += item.price;
} }
return state.total return state.total;
} }
} };
// actions // actions
const actions = { const actions = {
setAll({commit},data) { setAll({ commit }, data) {
commit('mutations_setAll',data); commit('mutations_setAll', data);
}, },
setCartData({commit},item) { setCartData({ commit }, item) {
commit('mutations_CartData',item) commit('mutations_CartData', item);
}, },
removecartData( {commit}, item ) { removecartData({ commit }, item) {
commit( 'mutations_removeCartData',item ) commit('mutations_removeCartData', item);
} }
} };
// mutations // mutations
const mutations = { const mutations = {
mutations_setAll( state,num ) { mutations_setAll(state, num) {
state.all = num state.all = num;
}, },
mutations_CartData(state, item ) { mutations_CartData(state, item) {
state.cartData.push( item ) state.cartData.push(item);
}, },
mutations_removeCartData( state,item ) { mutations_removeCartData(state, item) {
for( let i in state.cartData ) { for (let i in state.cartData) {
if( state.cartData[i].id === item.id ) { if (state.cartData[i].id === item.id) {
state.cartData.splice(i,1) state.cartData.splice(i, 1);
} }
} }
}, },
mutations_setStoreObj(state,val) { mutations_setStoreObj(state, val) {
state.storeObj = val state.storeObj = val;
}, },
aside_handler(state,val) { aside_handler(state, val) {
state.asideShow = val state.asideShow = val;
}, },
mutations_breadcrumb(state,val) { mutations_breadcrumb(state, val) {
state.breadcrumb = val state.breadcrumb = val;
} }
} };
export default { export default {
state, state,
getters, getters,
actions, actions,
mutations mutations
} };
src/utils/index.js
/*eslint-disable*/
// 环境value // 环境value
let _isDev = process.env.NODE_ENV === 'development' let _isDev = process.env.NODE_ENV === 'development';
import Vue from 'vue'; import Vue from 'vue';
...@@ -8,25 +8,24 @@ import Vue from 'vue'; ...@@ -8,25 +8,24 @@ import Vue from 'vue';
* 开发输出log * 开发输出log
* @param {消息} msg * @param {消息} msg
*/ */
export const log = (msg) => { export const log = msg => {
if (_isDev && console && console.log) { if (_isDev && console && console.log) {
console.log(msg) console.log(msg);
} }
} };
/** /**
* 补零 * 补零
* @param {String/Number} num * @param {String/Number} num
*/ */
export const fillZero = (num) => { export const fillZero = num => {
num = num * 1; num = num * 1;
if (num < 10) { if (num < 10) {
return '0' + num; return '0' + num;
} else { } else {
return num; return num;
} }
} };
/** /**
* *
...@@ -34,129 +33,128 @@ export const fillZero = (num) => { ...@@ -34,129 +33,128 @@ export const fillZero = (num) => {
* @param {*转换的格式} type * @param {*转换的格式} type
*/ */
export const formateDateTimeByType = (date, type = 'yyyy-MM-dd-HH-mm-ss') => { export const formateDateTimeByType = (date, type = 'yyyy-MM-dd-HH-mm-ss') => {
if (!date) { return '' } // var year, month, day, hours, min, sec
if (typeof date === 'number') { if (!date) {
date = new Date(date); return '';
} }
if (typeof date === 'string') { if (typeof date === 'number') {
return date date = new Date(date);
} else { }
var year = type.indexOf('yyyy') >= 0 ? (fillZero(date.getFullYear())) : '';
var month = type.indexOf('MM') >= 0 ? ('-' + fillZero(date.getMonth() + 1)) : ''; if (typeof date === 'string') {
var day = type.indexOf('dd') >= 0 ? ('-' + fillZero(date.getDate()) + '') : ''; return date;
var hours = type.indexOf('HH') >= 0 ? (' ' + fillZero(date.getHours())) : ''; } else {
var min = type.indexOf('mm') >= 0 ? (':' + fillZero(date.getMinutes())) : ''; let year = type.indexOf('yyyy') >= 0 ? fillZero(date.getFullYear()) : '';
var sec = type.indexOf('ss') >= 0 ? (':' + fillZero(date.getSeconds())) : ''; let month = type.indexOf('MM') >= 0 ? '-' + fillZero(date.getMonth() + 1) : '';
// console.log(year+month+day+hours+min+sec); let day = type.indexOf('dd') >= 0 ? '-' + fillZero(date.getDate()) + '' : '';
return year + month + day + hours + min + sec; let hours = type.indexOf('HH') >= 0 ? ' ' + fillZero(date.getHours()) : '';
} let min = type.indexOf('mm') >= 0 ? ':' + fillZero(date.getMinutes()) : '';
} let sec = type.indexOf('ss') >= 0 ? ':' + fillZero(date.getSeconds()) : '';
// console.log(year+month+day+hours+min+sec);
return year + month + day + hours + min + sec;
}
};
export const numberToChinese = (num) => { export const numberToChinese = num => {
var chnNumChar = { var chnNumChar = {
零: 0, 零: 0,
一: 1, 一: 1,
二: 2, 二: 2,
三: 3, 三: 3,
四: 4, 四: 4,
五: 5, 五: 5,
六: 6, 六: 6,
七: 7, 七: 7,
八: 8, 八: 8,
九: 9, 九: 9,
十: 10 十: 10
}; };
let result = ''; let result = '';
for (let i in chnNumChar) { for (let i in chnNumChar) {
if (num === chnNumChar[i]) { if (num === chnNumChar[i]) {
result = i result = i;
}
} }
return result; }
} return result;
};
export const numberToWeekChinese = (num) => { export const numberToWeekChinese = num => {
var chnNumChar = { var chnNumChar = {
日: 0, 日: 0,
一: 1, 一: 1,
二: 2, 二: 2,
三: 3, 三: 3,
四: 4, 四: 4,
五: 5, 五: 5,
六: 6 六: 6
}; };
let result = '--'; let result = '--';
for (let i in chnNumChar) { for (let i in chnNumChar) {
if (num === chnNumChar[i]) { if (num === chnNumChar[i]) {
result = i result = i;
}
} }
return result; }
} return result;
};
/** /**
* *
* @param 清空数据 * @param 清空数据
*/ */
export const resetParams = (obj) => { export const resetParams = obj => {
for (let item in obj) { for (let item in obj) {
if (item && obj[item]) { if (item && obj[item]) {
switch (obj[item].constructor) { switch (obj[item].constructor) {
case Array: case Array:
obj[item] = []; obj[item] = [];
break; break;
case String: case String:
obj[item] = ''; obj[item] = '';
break; break;
case Number: case Number:
obj[item] = 0; obj[item] = 0;
break; break;
case Boolean: case Boolean:
obj[item] = false; obj[item] = false;
break; break;
default: default:
obj[item] = ''; obj[item] = '';
break; break;
} }
}
} }
} }
};
// 交换数组元素 // 交换数组元素
function swapItems(arr, index1, index2) { function swapItems(arr, index1, index2) {
arr[index1] = arr.splice(index2, 1, arr[index1])[0]; arr[index1] = arr.splice(index2, 1, arr[index1])[0];
return arr; return arr;
}; }
// 上移 // 上移
export const upRecord = function(arr, $index) { export const upRecord = function(arr, $index) {
if ($index == 0) { if ($index == 0) {
return; return;
} }
swapItems(arr, $index, $index - 1); swapItems(arr, $index, $index - 1);
}; };
// 下移 // 下移
export const downRecord = function(arr, $index) { export const downRecord = function(arr, $index) {
if ($index == arr.length - 1) { if ($index == arr.length - 1) {
return; return;
} }
swapItems(arr, $index, $index + 1); swapItems(arr, $index, $index + 1);
}; };
//字符串判断是否为空 //字符串判断是否为空
export const voidStr = function(str, msg) { export const voidStr = function(str, msg) {
if (!str) { if (!str) {
Vue.prototype.$tips({ type: 'warning', message: msg || '内容填写不全' }) Vue.prototype.$tips({ type: 'warning', message: msg || '内容填写不全' });
return true; return true;
} else { } else {
return false; return false;
} }
} };
/** /**
* 频率控制 返回函数连续调用时，action 执行频率限定为 次 / delay * 频率控制 返回函数连续调用时，action 执行频率限定为 次 / delay
...@@ -166,54 +164,54 @@ export const voidStr = function(str, msg) { ...@@ -166,54 +164,54 @@ export const voidStr = function(str, msg) {
*/ */
export const throttle = function(delay, action) { export const throttle = function(delay, action) {
var last = 0; var last = 0;
return function() { return function() {
var curr = +new Date() var curr = +new Date();
if (curr - last > delay) { if (curr - last > delay) {
action.apply(this, arguments) action.apply(this, arguments);
last = curr last = curr;
}
} }
} };
};
/** /**
* 验证是否为网址 * 验证是否为网址
*/ */
export const checkUrl = function(urlString) { export const checkUrl = function(urlString) {
if (urlString != "") { var reg;
var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/; if (urlString != '') {
if (!reg.test(urlString)) { reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
Vue.prototype.$tips({ type: "warning", message: "网址不规范，示例:http://www.domain.com" }); if (!reg.test(urlString)) {
return true; Vue.prototype.$tips({ type: 'warning', message: '网址不规范，示例:http://www.domain.com' });
} return true;
} else {
Vue.prototype.$tips({ type: "warning", message: "网址不规范，示例:http://www.domain.com" });
return true;
} }
return false; } else {
} Vue.prototype.$tips({ type: 'warning', message: '网址不规范，示例:http://www.domain.com' });
return true;
}
return false;
};
// 对Date的扩展，将 Date 转化为指定格式的String // 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子： // 例子：
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18 // (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
export const format = function(date, fmt) { //author: meizz export const format = function(date, fmt) {
var o = { //author: meizz
"M+": date.getMonth() + 1, //月份 var o = {
"d+": date.getDate(), //日 'M+': date.getMonth() + 1, //月份
"h+": date.getHours(), //小时 'd+': date.getDate(), //日
"m+": date.getMinutes(), //分 'h+': date.getHours(), //小时
"s+": date.getSeconds(), //秒 'm+': date.getMinutes(), //分
"q+": Math.floor((date.getMonth() + 3) / 3), //季度 's+': date.getSeconds(), //秒
"S": date.getMilliseconds() //毫秒 'q+': Math.floor((date.getMonth() + 3) / 3), //季度
}; S: date.getMilliseconds() //毫秒
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); };
for (var k in o) if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); for (let k in o) {
if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
return fmt; return fmt;
} }
\ No newline at end of file };
src/utils/strlen.js
...@@ -5,98 +5,89 @@ ...@@ -5,98 +5,89 @@
export default { export default {
/* /*
* 一个汉字算两个字符,一个英文字母或数字算一个字符 * 一个汉字算两个字符,一个英文字母或数字算一个字符
*/ */
getByteLen: function(val) { getByteLen: function(val) {
var len = 0; var len = 0;
for (var i = 0; i < val.length; i++) { for (var i = 0; i < val.length; i++) {
var a = val.charAt(i); var a = val.charAt(i);
if (a.match(/[^\x00-\xff]/ig) != null) { if (a.match(/[^\x00-\xff]/gi) != null) {
len += 2; len += 2;
} } else {
else { len += 1;
len += 1;
}
} }
return len; }
return len;
}, },
/* /*
* 一个汉字算一个字,一个英文字母或数字算半个字 * 一个汉字算一个字,一个英文字母或数字算半个字
*/ */
getZhLen: function (val) { getZhLen: function(val) {
var len = 0; var len = 0;
for (var i = 0; i < val.length; i++) { for (var i = 0; i < val.length; i++) {
var a = val.charAt(i); var a = val.charAt(i);
if (a.match(/[^\x00-\xff]/ig) != null) { if (a.match(/[^\x00-\xff]/gi) != null) {
len += 1; len += 1;
} } else {
else { len += 0.5;
len += 0.5;
}
} }
return Math.ceil(len); }
return Math.ceil(len);
}, },
/*暂无用*/ /*暂无用*/
cutStr: function(str, len,type){ cutStr: function(str, len, type) {
var char_length = 0; var char_length = 0;
for (var i = 0; i < str.length; i++){ for (var i = 0; i < str.length; i++) {
var son_str = str.charAt(i); var son_str = str.charAt(i);
if(type==1) { if (type == 1) {
encodeURI(son_str).length > 2 ? char_length += 1 : char_length += 0.5; encodeURI(son_str).length > 2 ? (char_length += 1) : (char_length += 0.5);
} }
if(type==2) { if (type == 2) {
char_length += 1 ; char_length += 1;
} }
if (char_length >= len){ if (char_length >= len) {
var sub_len = char_length == len ? i+1 : i; var sub_len = char_length == len ? i + 1 : i;
return str.substr(0, sub_len); return str.substr(0, sub_len);
}
}
} }
}, },
/* /*
* 限制字数用, 一个汉字算一个字,两个英文/字母算一个字 * 限制字数用, 一个汉字算一个字,两个英文/字母算一个字
*/ */
getByteVal: function(val, max) { getByteVal: function(val, max) {
var returnValue = ''; var returnValue = '';
var byteValLen = 0; var byteValLen = 0;
for (var i = 0; i < val.length; i++) { for (var i = 0; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/ig) != null) if (val[i].match(/[^\x00-\xff]/gi) != null) byteValLen += 1;
byteValLen += 1; else byteValLen += 0.5;
else if (byteValLen > max) break;
byteValLen += 0.5; returnValue += val[i];
if (byteValLen > max)
break;
returnValue += val[i];
} }
return returnValue; return returnValue;
}, },
/* /*
* 限制字符数用, 一个汉字算两个字符,一个英文/字母算一个字符 * 限制字符数用, 一个汉字算两个字符,一个英文/字母算一个字符
*/ */
getCharVal: function (val, max) { getCharVal: function(val, max) {
var returnValue = ''; var returnValue = '';
var byteValLen = 0; var byteValLen = 0;
for (var i = 0; i < val.length; i++) { for (var i = 0; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/ig) != null) if (val[i].match(/[^\x00-\xff]/gi) != null) byteValLen += 2;
byteValLen += 2; else byteValLen += 1;
else if (byteValLen > max) break;
byteValLen += 1; returnValue += val[i];
if (byteValLen > max)
break;
returnValue += val[i];
} }
return returnValue; return returnValue;
}, },
/* /*
* 正则校验,校验非负数字 * 正则校验,校验非负数字
*/ */
regPos: function(v) { regPos: function(v) {
var regTest = /^\d+(\.\d+)?$/; var regTest = /^\d+(\.\d+)?$/;
return regTest.test(v); return regTest.test(v);
} }
} };
src/utils/validator.js
/*策略规则*/ /*策略规则*/
const strategies = { const strategies = {
isNonEmpty(value, errorMsg) { isNonEmpty(value, errorMsg) {
return value === '' ? return value === '' ? errorMsg : void 0;
errorMsg : void 0
}, },
minLength(value, length, errorMsg) { minLength(value, length, errorMsg) {
return value.length < length ? return value.length < length ? errorMsg : void 0;
errorMsg : void 0
}, },
isMoblie(value, errorMsg) { isMoblie(value, errorMsg) {
return !/^1(3|5|7|8|9)[0-9]{9}$/.test(value) ? return !/^1(3|5|7|8|9)[0-9]{9}$/.test(value) ? errorMsg : void 0;
errorMsg : void 0
}, },
isEmail(value, errorMsg) { isEmail(value, errorMsg) {
return !/^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value) ? return !/^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value) ? errorMsg : void 0;
errorMsg : void 0
} }
} };
/*Validator类*/ /*Validator类*/
export default class Validator { export default class Validator {
constructor() { constructor() {
this.cache = [] //保存校验规则 this.cache = []; //保存校验规则
} }
add(dom, rules) { add(dom, rules) {
for (let rule of rules) { for (let rule of rules) {
let strategyAry = rule.strategy.split(':') //例如['minLength',6] let strategyAry = rule.strategy.split(':'); //例如['minLength',6]
let errorMsg = rule.errorMsg //'用户名不能为空' let errorMsg = rule.errorMsg; //'用户名不能为空'
this.cache.push(() => { this.cache.push(() => {
let strategy = strategyAry.shift() //用户挑选的strategy let strategy = strategyAry.shift(); //用户挑选的strategy
strategyAry.unshift(dom.value) //把input的value添加进参数列表 strategyAry.unshift(dom.value); //把input的value添加进参数列表
strategyAry.push(errorMsg) //把errorMsg添加进参数列表，[dom.value,6,errorMsg] strategyAry.push(errorMsg); //把errorMsg添加进参数列表，[dom.value,6,errorMsg]
return strategies[strategy].apply(dom, strategyAry) return strategies[strategy].apply(dom, strategyAry);
}) });
} }
} }
start() { start() {
for (let validatorFunc of this.cache) { for (let validatorFunc of this.cache) {
let errorMsg = validatorFunc()//开始校验，并取得校验后的返回信息 let errorMsg = validatorFunc(); //开始校验，并取得校验后的返回信息
if (errorMsg) {//r如果有确切返回值，说明校验没有通过 if (errorMsg) {
return errorMsg //r如果有确切返回值，说明校验没有通过
} return errorMsg;
} }
}
} }
} }
src/views/error/401.vue
<template> <template>
<div class="errPage-container"> <div class="errPage-container">
<el-button @click="back" icon='arrow-left' class="pan-back-btn">返回</el-button> <el-button @click="back" icon="arrow-left" class="pan-back-btn">返回</el-button>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<h1 class="text-jumbo text-ginormous">Oops!</h1> <h1 class="text-jumbo text-ginormous">Oops!</h1>
页面 页面
<h2>你没有权限去该页面</h2> <h2>你没有权限去该页面</h2>
<h6>如有不满请联系你领导</h6> <h6>如有不满请联系你领导</h6>
<ul class="list-unstyled"> <ul class="list-unstyled">
...@@ -13,21 +13,21 @@ ...@@ -13,21 +13,21 @@
<router-link to="/report/#/memberSummary">回首页</router-link> <router-link to="/report/#/memberSummary">回首页</router-link>
</li> </li>
<li class="link-type"><router-link to="/report/#/memberSummary">回首页</router-link></li> <li class="link-type"><router-link to="/report/#/memberSummary">回首页</router-link></li>
<li><a @click.prevent="dialogVisible=true" href="#">点我看图</a></li> <li><a @click.prevent="dialogVisible = true" href="#">点我看图</a></li>
</ul> </ul>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream."> <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream." />
</el-col> </el-col>
</el-row> </el-row>
<el-dialog title="随便看" :visible.sync="dialogVisible"> <el-dialog title="随便看" :visible.sync="dialogVisible">
<img class="pan-img" :src="ewizardClap"> <img class="pan-img" :src="ewizardClap" />
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import errGif from '@/assets/img/401.gif' import errGif from '@/assets/img/401.gif';
export default { export default {
name: 'page401', name: 'page401',
...@@ -36,54 +36,54 @@ export default { ...@@ -36,54 +36,54 @@ export default {
errGif: errGif + '?' + +new Date(), errGif: errGif + '?' + +new Date(),
ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646', ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
dialogVisible: false dialogVisible: false
} };
}, },
methods: { methods: {
back() { back() {
if (this.$route.query.noGoBack) { if (this.$route.query.noGoBack) {
this.$router.push({ path: '/' }) this.$router.push({ path: '/' });
} else { } else {
this.$router.go(-1) this.$router.go(-1);
} }
} }
} }
} };
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.errPage-container { .errPage-container {
width: 800px; width: 800px;
margin: 100px auto; margin: 100px auto;
.pan-back-btn { .pan-back-btn {
background: #008489; background: #008489;
color: #fff; color: #fff;
} }
.pan-gif { .pan-gif {
margin: 0 auto; margin: 0 auto;
display: block; display: block;
} }
.pan-img { .pan-img {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
} }
.text-jumbo { .text-jumbo {
font-size: 60px; font-size: 60px;
font-weight: 700; font-weight: 700;
color: #484848; color: #484848;
}
.list-unstyled {
font-size: 14px;
li {
padding-bottom: 5px;
} }
.list-unstyled { a {
font-size: 14px; color: #008489;
li { text-decoration: none;
padding-bottom: 5px; &:hover {
} text-decoration: underline;
a {
color: #008489;
text-decoration: none;
&:hover {
text-decoration: underline;
}
} }
} }
} }
}
</style> </style>
src/views/error/403.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div style="background:#f0f2f5;margin-top: -20px;height:100%;"> <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
<div class="wscn-http404"> <div class="wscn-http404">
<div class="pic-404"> <div class="pic-404">
<img class="pic-404__parent" :src="img_403" alt="403"> <img class="pic-404__parent" :src="img_403" alt="403" />
</div> </div>
<div class="bullshit"> <div class="bullshit">
<!-- <div class="bullshit__oops">403</div> --> <!-- <div class="bullshit__oops">403</div> -->
...@@ -14,21 +14,21 @@ ...@@ -14,21 +14,21 @@
</template> </template>
<script> <script>
import img_403 from '@/assets/img/error_403.svg' import img_403 from '@/assets/img/error_403.svg';
export default { export default {
name: 'page403', name: 'page403',
data() { data() {
return { return {
img_403 img_403
} };
}, },
computed: { computed: {
message() { message() {
return '抱歉，你无权访问该页面' return '抱歉，你无权访问该页面';
} }
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -174,7 +174,7 @@ export default { ...@@ -174,7 +174,7 @@ export default {
animation-fill-mode: forwards;*/ animation-fill-mode: forwards;*/
} }
&__headline { &__headline {
color: rgba(0,0,0,.45); color: rgba(0, 0, 0, 0.45);
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
margin-bottom: 16px; margin-bottom: 16px;
...@@ -200,9 +200,9 @@ export default { ...@@ -200,9 +200,9 @@ export default {
border: 1px solid #1890ff; border: 1px solid #1890ff;
color: #fff; color: #fff;
background-color: #1890ff; background-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0,0,0,.12); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.035); -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
box-shadow: 0 2px 0 rgba(0,0,0,.035); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
cursor: pointer; cursor: pointer;
/*animation-name: slideUp; /*animation-name: slideUp;
animation-duration: 0.5s; animation-duration: 0.5s;
......
src/views/error/404.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div style="background:#f0f2f5;margin-top: -20px;height:100%;"> <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
<div class="wscn-http404"> <div class="wscn-http404">
<div class="pic-404"> <div class="pic-404">
<img class="pic-404__parent" :src="img_404" alt="404"> <img class="pic-404__parent" :src="img_404" alt="404" />
</div> </div>
<div class="bullshit"> <div class="bullshit">
<!-- <div class="bullshit__oops">404</div> --> <!-- <div class="bullshit__oops">404</div> -->
...@@ -14,24 +14,21 @@ ...@@ -14,24 +14,21 @@
</template> </template>
<script> <script>
import img_404 from '@/assets/img/error_404.svg' import img_404 from '@/assets/img/error_404.svg';
export default { export default {
name: 'page404', name: 'page404',
data() { data() {
return { return {
img_404 img_404
} };
}, },
computed: { computed: {
message() { message() {
return '抱歉，你访问的页面不存在' return '抱歉，你访问的页面不存在';
} }
},
mounted(){
console.log(this.$route.path)
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -177,7 +174,7 @@ export default { ...@@ -177,7 +174,7 @@ export default {
animation-fill-mode: forwards;*/ animation-fill-mode: forwards;*/
} }
&__headline { &__headline {
color: rgba(0,0,0,.45); color: rgba(0, 0, 0, 0.45);
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
margin-bottom: 16px; margin-bottom: 16px;
...@@ -203,9 +200,9 @@ export default { ...@@ -203,9 +200,9 @@ export default {
border: 1px solid #1890ff; border: 1px solid #1890ff;
color: #fff; color: #fff;
background-color: #1890ff; background-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0,0,0,.12); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.035); -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
box-shadow: 0 2px 0 rgba(0,0,0,.035); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
cursor: pointer; cursor: pointer;
/*animation-name: slideUp; /*animation-name: slideUp;
animation-duration: 0.5s; animation-duration: 0.5s;
......
src/views/error/500.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div style="background:#f0f2f5;margin-top: -20px;height:100%;"> <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
<div class="wscn-http404"> <div class="wscn-http404">
<div class="pic-404"> <div class="pic-404">
<img class="pic-404__parent" :src="img_500" alt="500"> <img class="pic-404__parent" :src="img_500" alt="500" />
</div> </div>
<div class="bullshit"> <div class="bullshit">
<!-- <div class="bullshit__oops">500</div> --> <!-- <div class="bullshit__oops">500</div> -->
...@@ -14,21 +14,21 @@ ...@@ -14,21 +14,21 @@
</template> </template>
<script> <script>
import img_500 from '@/assets/img/error_500.svg' import img_500 from '@/assets/img/error_500.svg';
export default { export default {
name: 'page500', name: 'page500',
data() { data() {
return { return {
img_500 img_500
} };
}, },
computed: { computed: {
message() { message() {
return '抱歉，服务器出错了' return '抱歉，服务器出错了';
} }
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -174,7 +174,7 @@ export default { ...@@ -174,7 +174,7 @@ export default {
animation-fill-mode: forwards;*/ animation-fill-mode: forwards;*/
} }
&__headline { &__headline {
color: rgba(0,0,0,.45); color: rgba(0, 0, 0, 0.45);
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
margin-bottom: 16px; margin-bottom: 16px;
...@@ -200,9 +200,9 @@ export default { ...@@ -200,9 +200,9 @@ export default {
border: 1px solid #1890ff; border: 1px solid #1890ff;
color: #fff; color: #fff;
background-color: #1890ff; background-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0,0,0,.12); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.035); -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
box-shadow: 0 2px 0 rgba(0,0,0,.035); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
cursor: pointer; cursor: pointer;
/*animation-name: slideUp; /*animation-name: slideUp;
animation-duration: 0.5s; animation-duration: 0.5s;
......
src/views/error/index.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div style="background:#f0f2f5;margin-top: -20px;height:100%;"> <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
<div class="wscn-http404"> <div class="wscn-http404">
<div class="pic-404"> <div class="pic-404">
<img class="pic-404__parent" :src="imgSrc" alt="404"> <img class="pic-404__parent" :src="imgSrc" alt="404" />
</div> </div>
<div class="bullshit"> <div class="bullshit">
<!-- <div class="bullshit__oops">404</div> --> <!-- <div class="bullshit__oops">404</div> -->
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<script> <script>
import img_403 from '@/assets/403_images/error_403.svg'; import img_403 from '@/assets/403_images/error_403.svg';
import img_404 from '@/assets/404_images/error_404.svg'; import img_404 from '@/assets/404_images/error_404.svg';
import img_500 from '@/assets/500_images/error_500.svg' import img_500 from '@/assets/500_images/error_500.svg';
export default { export default {
name: 'errpage', name: 'errpage',
...@@ -34,15 +34,15 @@ export default { ...@@ -34,15 +34,15 @@ export default {
404: '抱歉，你访问的页面不存在', 404: '抱歉，你访问的页面不存在',
500: '抱歉，服务器出错了' 500: '抱歉，服务器出错了'
} }
} };
}, },
mounted(){ mounted() {
var that = this; var that = this;
var path = that.$route.path.split('/')[1]; var path = that.$route.path.split('/')[1];
that.imgSrc = that.srcList[path]; that.imgSrc = that.srcList[path];
that.message = that.msgList[path]; that.message = that.msgList[path];
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -188,7 +188,7 @@ export default { ...@@ -188,7 +188,7 @@ export default {
animation-fill-mode: forwards;*/ animation-fill-mode: forwards;*/
} }
&__headline { &__headline {
color: rgba(0,0,0,.45); color: rgba(0, 0, 0, 0.45);
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
margin-bottom: 16px; margin-bottom: 16px;
...@@ -214,9 +214,9 @@ export default { ...@@ -214,9 +214,9 @@ export default {
border: 1px solid #1890ff; border: 1px solid #1890ff;
color: #fff; color: #fff;
background-color: #1890ff; background-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0,0,0,.12); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.035); -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
box-shadow: 0 2px 0 rgba(0,0,0,.035); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
cursor: pointer; cursor: pointer;
/*animation-name: slideUp; /*animation-name: slideUp;
animation-duration: 0.5s; animation-duration: 0.5s;
......
src/views/mall/common/card-temp.vue
<template> <template>
<section class="sms-lib curson-pointer"> <section class="sms-lib curson-pointer">
<div class="pb22"> <div class="pb22">
<span class="pr10">共{{total}}条</span> <span class="pr10">共{{ total }}条</span>
<el-input :disabled="disabled" v-model="listParams.searchParam" class="w200" clearable placeholder="请输入卡券名称" @change="getCardList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input> <el-input :disabled="disabled" v-model="listParams.searchParam" class="w200" clearable placeholder="请输入卡券名称" @change="getCardList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
<span class="fz12 gray pl20">领取限制 < 100的卡券不支持选择，系统已自动过滤</span> <span class="fz12 gray pl20">领取限制 &lt;100的卡券不支持选择，系统已自动过滤</span>
</div> </div>
<el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading" @row-click="chooseCard"> <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading" @row-click="chooseCard">
<el-table-column :show-overflow-tooltip="false" width="60" align="center" prop="coupCardId"> <el-table-column :show-overflow-tooltip="false" width="60" align="center" prop="coupCardId">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="sms-record_left label-hidden"> <div class="sms-record_left label-hidden">
<el-radio :disabled="disabled" v-if="cardIdName === 'wechatCardId'" v-model="selectedId" :label="scope.row.wechatCardId" class="pr10"></el-radio> <el-radio :disabled="disabled" v-if="cardIdName === 'wechatCardId'" v-model="selectedId" :label="scope.row.wechatCardId" class="pr10"></el-radio>
<el-radio :disabled="disabled" v-else v-model="selectedId" :label="scope.row.coupCardId" class="pr10"></el-radio> <el-radio :disabled="disabled" v-else v-model="selectedId" :label="scope.row.coupCardId" class="pr10"></el-radio>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :show-overflow-tooltip="false" align="left" prop="cardName" label="卡券名称"></el-table-column> <el-table-column :show-overflow-tooltip="false" align="left" prop="cardName" label="卡券名称"></el-table-column>
<el-table-column :show-overflow-tooltip="true" align="left" prop="subName" label="备注名"></el-table-column> <el-table-column :show-overflow-tooltip="true" align="left" prop="subName" label="备注名"></el-table-column>
<el-table-column :show-overflow-tooltip="false" align="left" prop="cardLimit" label="兑换限制"></el-table-column> <el-table-column :show-overflow-tooltip="false" align="left" prop="cardLimit" label="兑换限制"></el-table-column>
<el-table-column :show-overflow-tooltip="false" align="left" prop="couponStock" label="库存"></el-table-column> <el-table-column :show-overflow-tooltip="false" align="left" prop="couponStock" label="库存"></el-table-column>
</el-table> </el-table>
<el-pagination v-show='tableList.length>0' background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, prev, pager, next" :total="total"></el-pagination> <el-pagination v-show="tableList.length > 0" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
</section> </section>
</template> </template>
<script> <script>
import {getCardList} from '@/service/api/mallApi.js'; import { getCardList } from '@/service/api/mallApi.js';
export default { export default {
props:{ props: {
activeId:{ activeId: {
type:String, type: String,
default:'' default: ''
}, },
cardIdName:{ cardIdName: {
type:String, type: String,
default:'coupCardId' default: 'coupCardId'
}, },
tableHeight:{ tableHeight: {
type:String, type: String,
default:'auto' default: 'auto'
}, },
showPagination:{ showPagination: {
type:Boolean, type: Boolean,
default:true default: true
}, },
disabled:{ disabled: {
type:Boolean, type: Boolean,
default:false default: false
}, },
cardType:{ cardType: {
type:String, type: String,
default:'2' default: '2'
} }
}, },
data(){ data() {
return{ return {
listParams:{ listParams: {
searchParam:'', searchParam: '',
currentPage:1, currentPage: 1,
pageSize:10, pageSize: 10,
requestProject:'gic-web', requestProject: 'gic-web',
coupCardId:'', coupCardId: '',
cardType:this.cardType cardType: this.cardType
}, },
total:0, total: 0,
tableList:[], tableList: [],
selectedId:this.activeId selectedId: this.activeId
} };
}, },
watch: { watch: {
selectedId(val) { selectedId(val) {
...@@ -73,57 +73,57 @@ export default { ...@@ -73,57 +73,57 @@ export default {
if (this.cardIdName === 'wechatCardId') { if (this.cardIdName === 'wechatCardId') {
this.tableList.map(v => { this.tableList.map(v => {
if (v.coupCardId === val) { if (v.coupCardId === val) {
val = v.wechatCardId val = v.wechatCardId;
obj = v; obj = v;
} }
}) });
} else { } else {
this.tableList.map(v => { this.tableList.map(v => {
if (v.coupCardId === val) { if (v.coupCardId === val) {
obj = v; obj = v;
} }
}) });
} }
this.$emit('update:activeId',val); this.$emit('update:activeId', val);
this.$emit('emitActiveObj',obj); this.$emit('emitActiveObj', obj);
}, },
activeId(val) { activeId(val) {
this.selectedId = val; this.selectedId = val;
} }
}, },
created(){ created() {
this.selectedId = this.activeId; this.selectedId = this.activeId;
this.getCardList(); this.getCardList();
}, },
methods:{ methods: {
handleSizeChange(val) { handleSizeChange(val) {
this.listParams.pageSize = val; this.listParams.pageSize = val;
this.getCardList(); this.getCardList();
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.listParams.currentPage = val; this.listParams.currentPage = val;
this.getCardList(); this.getCardList();
}, },
async getCardList() { async getCardList() {
this.loading = true; this.loading = true;
if (this.$route.meta.type === 'edit' || this.$route.meta.type === 'info') { if (this.$route.meta.type === 'edit' || this.$route.meta.type === 'info') {
this.listParams.coupCardId = this.activeId; this.listParams.coupCardId = this.activeId;
}
let res = await getCardList(this.listParams);
this.tableList = res.result.rows || [];
this.total = res.result.total;
this.loading = false;
},
reset() {
this.listParams.searchParams = '';
this.getCardList();
},
chooseCard(row) {
this.selectedId = row.coupCardId;
$bus.$emit('card-temp-choose',row);
} }
let res = await getCardList(this.listParams);
this.tableList = res.result.rows || [];
this.total = res.result.total;
this.loading = false;
},
reset() {
this.listParams.searchParams = '';
this.getCardList();
},
/* eslint-disable */
chooseCard(row) {
this.selectedId = row.coupCardId;
$bus.$emit('card-temp-choose', row);
}
} }
} };
</script> </script>
src/views/mall/common/eqCode.vue
...@@ -4,73 +4,49 @@ ...@@ -4,73 +4,49 @@
<div class="wechat-url" style="margin-bottom:30px;"> <div class="wechat-url" style="margin-bottom:30px;">
<p style="font-weight: 600;margin-bottom:15px">页面链接</p> <p style="font-weight: 600;margin-bottom:15px">页面链接</p>
<div style="display:flex;align-items: center"> <div style="display:flex;align-items: center">
<el-input <el-input type="textarea" :rows="2" v-model="modalData.pageUrl" disabled> </el-input>
type="textarea" <a href="javaScript:void(0)" style="width:40px;margin-left:20px" v-clipboard:copy="modalData.pageUrl" v-clipboard:success="onCopy" v-clipboard:error="onError">
:rows="2"
v-model="modalData.pageUrl"
disabled>
</el-input>
<a
href="javaScript:void(0)"
style="width:40px;margin-left:20px"
v-clipboard:copy="modalData.pageUrl"
v-clipboard:success="onCopy"
v-clipboard:error="onError"
>
复制 复制
</a> </a>
</div> </div>
</div> </div>
<div class="wechat-img-box" v-loading="modalData.loading"> <div class="wechat-img-box" v-loading="modalData.loading">
<p style="font-weight: 600;margin-bottom:15px">小程序二维码</p> <p style="font-weight: 600;margin-bottom:15px">小程序二维码</p>
<img <img :src="modalData.imgUrl" class="wechat-img" style="width:140px;height:140px;margin-left:130px" />
:src="modalData.imgUrl" </div>
class="wechat-img"
style="width:140px;height:140px;margin-left:130px">
</div>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import request from '../../../api/request.js' export default {
import common from '../../../../static/js/common.js'; props: {
export default { modalData: {
props:{ type: Object
modalData:{ }
type:Object, },
data() {
} return {
}, // loading:true,
data() { };
return { },
// loading:true, methods: {
} onCopy(e) {
}, this.$message.success('复制成功');
mounted(){
}, },
onError(e) {
methods: { this.$message.error('复制失败');
onCopy(e){
this.$message.success("复制成功")
},
onError(e){
this.$message.error("复制失败")
}
} }
} }
};
</script> </script>
<style scoped> <style scoped>
.wechat-img-box{ .wechat-img-box {
margin:0 auto; margin: 0 auto;
text-align: center; text-align: center;
} }
.wechat-img{ .wechat-img {
width:200px; width: 200px;
height:200px; height: 200px;
} }
</style>
<style>
\ No newline at end of file
src/views/mall/common/express.vue
<template> <template>
<el-dialog class="express dialog__body__nopadding" title="查看物流信息" :visible.sync="show" width="60%" :before-close="close"> <el-dialog class="express dialog__body__nopadding" title="查看物流信息" :visible.sync="show" width="60%" :before-close="close">
<div class="express--info"> <div class="express--info">
<p>收件人：<span style="color:#606266">{{info.consignee || '--'}}</span></p> <p>
<p>联系方式：<span style="color:#606266">{{info.consigneePhone || '--'}}</span></p> 收件人：<span style="color:#606266">{{ info.consignee || '--' }}</span>
<p>收货地址：<span style="color:#606266">{{info.receivingAddress || '--'}}</span></p> </p>
<p>
联系方式：<span style="color:#606266">{{ info.consigneePhone || '--' }}</span>
</p>
<p>
收货地址：<span style="color:#606266">{{ info.receivingAddress || '--' }}</span>
</p>
</div> </div>
<div class="express--order"> <div class="express--order">
<div class="clearfix express--order__info" v-if="!editShow"> <div class="clearfix express--order__info" v-if="!editShow">
<div class="fl pr20"><span style="color:#303133">快递公司</span>：{{info.logisticsCompanyName || '--'}}</div> <div class="fl pr20"><span style="color:#303133">快递公司</span>：{{ info.logisticsCompanyName || '--' }}</div>
<div class="fl"><span style="color:#303133">运单号码</span>：{{info.courierNumber || '--'}}</div> <div class="fl"><span style="color:#303133">运单号码</span>：{{ info.courierNumber || '--' }}</div>
<el-button class="fr express--order__info--btn" type="text" v-if="!isInfo" @click="editExpress">修改运单信息</el-button> <el-button class="fr express--order__info--btn" type="text" v-if="!isInfo" @click="editExpress">修改运单信息</el-button>
</div> </div>
<div class="express--order__info" v-else> <div class="express--order__info" v-else>
<span class="pr10">快递公司： <span class="pr10"
>快递公司：
<el-select class="vertical-middle w100" v-model="params.logisticsCompanyId" placeholder="选择快递" @change="changeLogistics"> <el-select class="vertical-middle w100" v-model="params.logisticsCompanyId" placeholder="选择快递" @change="changeLogistics">
<el-option v-for="v in logisticsOptions" :key="v.logisticsCompanyId" :label="v.logisticsCompanyName" :value="v.logisticsCompanyId"></el-option> <el-option v-for="v in logisticsOptions" :key="v.logisticsCompanyId" :label="v.logisticsCompanyName" :value="v.logisticsCompanyId"></el-option>
</el-select> </el-select>
<div style="margin:0 0 10px 0px;display:inline-block" v-show="otherLogistics"> <div style="margin:0 0 10px 0px;display:inline-block" v-show="otherLogistics">
<el-input class="vertical-middle w150" v-model="params.otherLogisticsCompanyName" placeholder="请输入快递公司" @input="(value)=>logisticsNameLimit(value)"></el-input> <el-input class="vertical-middle w150" v-model="params.otherLogisticsCompanyName" placeholder="请输入快递公司" @input="value => logisticsNameLimit(value)"></el-input>
</div> </div>
</span> </span>
<span>运单号码： <span
>运单号码：
<el-input class="vertical-middle w150" v-model="params.courierNumber" placeholder="请输入快递单号"></el-input> <el-input class="vertical-middle w150" v-model="params.courierNumber" placeholder="请输入快递单号"></el-input>
</span> </span>
<el-button class="vertical-middle" type="primary" size="small" @click="submitExpress">确 认</el-button> <el-button class="vertical-middle" type="primary" size="small" @click="submitExpress">确 认</el-button>
<el-button class="vertical-middle" size="small" @click="editShow = false">取 消</el-button> <el-button class="vertical-middle" size="small" @click="editShow = false">取 消</el-button>
<span style="font-size:12px;color:rgb(144, 147, 153);display:block;margin-left:180px" v-show="otherLogistics">若设置为其他快递公司，则系统不提供物流信息的查询</span> <span style="font-size:12px;color:rgb(144, 147, 153);display:block;margin-left:180px" v-show="otherLogistics">若设置为其他快递公司，则系统不提供物流信息的查询</span>
</div> </div>
</div> </div>
<div class="express--list"> <div class="express--list">
<div v-for="(v,i) in list" :key="i" class="express--list--item"> <div v-for="(v, i) in list" :key="i" class="express--list--item">
<span class="express--list--item__dot"></span> <span class="express--list--item__dot"></span>
<p class="express--list--item__date">{{v.date}}</p> <p class="express--list--item__date">{{ v.date }}</p>
<p class="express--list--item__day">{{v.day}}</p> <p class="express--list--item__day">{{ v.day }}</p>
<p class="express--list--item__time">{{v.time}}</p> <p class="express--list--item__time">{{ v.time }}</p>
<p class="express--list--item__info">{{v.acceptStation}}</p> <p class="express--list--item__info">{{ v.acceptStation }}</p>
</div> </div>
<div class="no-data" v-if="list.length === 0">暂无快递数据</div> <div class="no-data" v-if="list.length === 0">暂无快递数据</div>
</div> </div>
...@@ -45,182 +52,176 @@ ...@@ -45,182 +52,176 @@
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import { getLogisticsInfo, getLogisticsList, orderOptService } from '@/service/api/mallApi.js';
import {getLogisticsInfo,getLogisticsList,orderOptService} from '@/service/api/mallApi.js'; import { formateDateTimeByType, numberToWeekChinese } from '@/utils/index.js';
import {formateDateTimeByType,numberToWeekChinese} from '@/utils/index.js'; export default {
export default { props: {
props:{ show: {
show:{ type: Boolean,
type:Boolean, default: false
default:false
},
id:{
type:String,
default:''
},
isInfo:{
type:Boolean,
default:false
}
}, },
watch:{ id: {
show(val) { type: String,
if (val) { default: ''
this.getLogisticsInfo();
}
}
}, },
data() { isInfo: {
return { type: Boolean,
loading:false, default: false
info:{}, }
list:[], },
logisticsOptions:[], watch: {
params:{ show(val) {
logisticsCompanyId:'', if (val) {
logisticsCompanyCode:'', this.getLogisticsInfo();
courierNumber:'',
otherLogisticsCompanyName:'',
},
otherLogistics:false,
editShow:false
} }
}
},
data() {
return {
loading: false,
info: {},
list: [],
logisticsOptions: [],
params: {
logisticsCompanyId: '',
logisticsCompanyCode: '',
courierNumber: '',
otherLogisticsCompanyName: ''
},
otherLogistics: false,
editShow: false
};
},
created() {
this.getLogisticsList();
},
methods: {
close() {
this.editShow = false;
this.$emit('update:show', false);
}, },
created() { // 编辑快递
this.getLogisticsList(); editExpress() {
this.editShow = true;
this.params = {
logisticsCompanyId: this.info.logisticsCompanyId,
logisticsCompanyCode: this.info.logisticsCompanyCode,
courierNumber: this.info.courierNumber
};
}, },
methods: { //限制物流公司的名称
close() { logisticsNameLimit(value) {
this.editShow = false; this.$nextTick(() => {
this.$emit('update:show',false); this.params.otherLogisticsCompanyName = this.getInputVal2(value, 8);
}, });
// 编辑快递 },
editExpress() { //快递公司下拉
this.editShow = true; changeLogistics(value) {
this.params = { if (value) {
logisticsCompanyId:this.info.logisticsCompanyId, let code = this.logisticsOptions.find(item => {
logisticsCompanyCode:this.info.logisticsCompanyCode, return item.logisticsCompanyId === value;
courierNumber:this.info.courierNumber }).logisticsCompanyCode;
}; if (code === 'QITA') {
}, this.otherLogistics = true;
//限制物流公司的名称
logisticsNameLimit(value){
this.$nextTick(() => {
this.params.otherLogisticsCompanyName = this.getInputVal2(value,8)
})
},
//快递公司下拉
changeLogistics(value){
console.log('物流id',value)
if ( value ) {
let code = this.logisticsOptions.find( item => {
return item.logisticsCompanyId ===value
} ).logisticsCompanyCode
if(code==='QITA'){
this.otherLogistics=true
}else{
this.otherLogistics=false
this.params.otherLogisticsCompanyName=''
}
} else { } else {
this.otherLogistics=false this.otherLogistics = false;
this.params.otherLogisticsCompanyName='' this.params.otherLogisticsCompanyName = '';
} }
}, } else {
// 提交按钮 this.otherLogistics = false;
submitExpress() { this.params.otherLogisticsCompanyName = '';
if (!this.params.logisticsCompanyId) { }
this.$tips({type:'warning',message:'请选择快递'}); },
return; // 提交按钮
submitExpress() {
if (!this.params.logisticsCompanyId) {
this.$tips({ type: 'warning', message: '请选择快递' });
return;
}
if (!this.params.courierNumber) {
this.$tips({ type: 'warning', message: '请填写快递单号' });
return;
}
this.logisticsOptions.map(v => {
if (v.logisticsCompanyId === this.params.logisticsCompanyId) {
this.params.logisticsCompanyCode = v.logisticsCompanyCode;
} }
if (!this.params.courierNumber) { });
this.$tips({type:'warning',message:'请填写快递单号'}); if (this.params.logisticsCompanyCode === 'QITA') {
if (this.params.otherLogisticsCompanyName === '') {
this.$tips({ type: 'warning', message: '请填写快递公司' });
return; return;
} }
this.logisticsOptions.map(v => { }
if (v.logisticsCompanyId === this.params.logisticsCompanyId) { let logisticsCompanyName;
this.params.logisticsCompanyCode = v.logisticsCompanyCode; if (this.params.logisticsCompanyCode === 'QITA') {
} logisticsCompanyName = this.params.otherLogisticsCompanyName;
}) } else {
if ( this.params.logisticsCompanyCode ==='QITA' ) { logisticsCompanyName = this.logisticsOptions.find(item => {
if ( this.params.otherLogisticsCompanyName==='' ) { return item.logisticsCompanyId === this.params.logisticsCompanyId;
this.$tips({type:'warning',message:'请填写快递公司'}); }).logisticsCompanyName;
return; }
}
} let params = {
let logisticsCompanyName optType: 3,
if ( this.params.logisticsCompanyCode ==='QITA'){ integralMallProExchangeId: this.id,
logisticsCompanyName=this.params.otherLogisticsCompanyName logisticsCompanyId: this.params.logisticsCompanyId,
}else{ logisticsCompanyCode: this.params.logisticsCompanyCode,
logisticsCompanyName = this.logisticsOptions.find( item => { courierNumber: this.params.courierNumber,
return item.logisticsCompanyId === this.params.logisticsCompanyId logisticsCompanyName: logisticsCompanyName
}).logisticsCompanyName };
} orderOptService(params).then(res => {
let params = {
optType:3,
integralMallProExchangeId:this.id,
logisticsCompanyId:this.params.logisticsCompanyId,
logisticsCompanyCode:this.params.logisticsCompanyCode,
courierNumber:this.params.courierNumber,
logisticsCompanyName:logisticsCompanyName
};
console.log(1111,params)
orderOptService(params).then(res => {
if (res.errorCode === 0) {
this.$tips({type:'success',message:'修改快递信息成功'});
this.editShow = false;
this.getLogisticsInfo();
}
});
},
//输入框的输入限制
getInputVal2: function(val, max) {
var returnValue = '';
var byteValLen = 0;
for (var i = 0; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/ig) != null)
byteValLen += 1;
else
byteValLen += 0.5;
if (byteValLen > max)
break;
returnValue += val[i];
}
return returnValue;
},
// 获取快递列表
async getLogisticsList() {
let res = await getLogisticsList();
if (res.errorCode === 0) {
this.logisticsOptions = res.result || [];
}
},
// 获取快递基本信息
async getLogisticsInfo() {
this.loading = true;
let res = await getLogisticsInfo({integralMallProExchangeId:this.id});
if (res.errorCode === 0) { if (res.errorCode === 0) {
this.info = res.result.changeLog || {}; this.$tips({ type: 'success', message: '修改快递信息成功' });
this.list = res.result.traces || []; this.editShow = false;
this.list.map(v => { this.getLogisticsInfo();
const dateTime = new Date(v.acceptTime);
v.date = formateDateTimeByType(dateTime,'yyyy-MM-dd');
v.time = formateDateTimeByType(dateTime,'HH-mm-ss');
v.day = '周'+numberToWeekChinese(dateTime.getDay());
})
} }
this.loading = false; });
}, },
//输入框的输入限制
getInputVal2: function(val, max) {
var returnValue = '';
var byteValLen = 0;
for (let i = 0; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/gi) != null) byteValLen += 1;
else byteValLen += 0.5;
if (byteValLen > max) break;
returnValue += val[i];
}
return returnValue;
},
// 获取快递列表
async getLogisticsList() {
let res = await getLogisticsList();
if (res.errorCode === 0) {
this.logisticsOptions = res.result || [];
}
},
// 获取快递基本信息
async getLogisticsInfo() {
this.loading = true;
let res = await getLogisticsInfo({ integralMallProExchangeId: this.id });
if (res.errorCode === 0) {
this.info = res.result.changeLog || {};
this.list = res.result.traces || [];
this.list.map(v => {
const dateTime = new Date(v.acceptTime);
v.date = formateDateTimeByType(dateTime, 'yyyy-MM-dd');
v.time = formateDateTimeByType(dateTime, 'HH-mm-ss');
v.day = '周' + numberToWeekChinese(dateTime.getDay());
});
}
this.loading = false;
} }
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.express{ .express {
&--info { &--info {
padding-bottom:10px; padding-bottom: 10px;
border-bottom:1px solid #DCDFE6; border-bottom: 1px solid #dcdfe6;
// border-top:1px solid #DCDFE6; // border-top:1px solid #DCDFE6;
p { p {
line-height: 30px; line-height: 30px;
...@@ -228,19 +229,19 @@ import {formateDateTimeByType,numberToWeekChinese} from '@/utils/index.js'; ...@@ -228,19 +229,19 @@ import {formateDateTimeByType,numberToWeekChinese} from '@/utils/index.js';
} }
} }
&--order { &--order {
padding:15px 0; padding: 15px 0;
border-bottom:1px solid #DCDFE6; border-bottom: 1px solid #dcdfe6;
&__info { &__info {
&--btn { &--btn {
padding:0; padding: 0;
} }
} }
} }
&--list { &--list {
background:#f0f2f5; background: #f0f2f5;
max-height: 250px; max-height: 250px;
overflow-y: auto; overflow-y: auto;
padding:10px 0; padding: 10px 0;
font-size: 13px; font-size: 13px;
&--item { &--item {
position: relative; position: relative;
...@@ -253,14 +254,14 @@ import {formateDateTimeByType,numberToWeekChinese} from '@/utils/index.js'; ...@@ -253,14 +254,14 @@ import {formateDateTimeByType,numberToWeekChinese} from '@/utils/index.js';
width: 1px; width: 1px;
background: #bfbfbf; background: #bfbfbf;
} }
padding-left:15px; padding-left: 15px;
display: table; display: table;
line-height: 25px; line-height: 25px;
p { p {
display: table-cell; display: table-cell;
} }
&__dot { &__dot {
display:inline-block; display: inline-block;
width: 7px; width: 7px;
height: 7px; height: 7px;
background: #bfbfbf; background: #bfbfbf;
...@@ -272,7 +273,6 @@ import {formateDateTimeByType,numberToWeekChinese} from '@/utils/index.js'; ...@@ -272,7 +273,6 @@ import {formateDateTimeByType,numberToWeekChinese} from '@/utils/index.js';
} }
&__day { &__day {
width: 40px; width: 40px;
} }
&__time { &__time {
width: 80px; width: 80px;
......
src/views/mall/common/member-info.vue
<template> <template>
<el-popover placement="top-start" width="400" height="180" trigger="hover" @show="getSingleInfo"> <el-popover placement="top-start" width="400" height="180" trigger="hover" @show="getSingleInfo">
<div class="corsur-pointer" @click="linkDetail"> <div class="corsur-pointer" @click="linkDetail">
<div class="singelinfo"> <div class="singelinfo">
<div class="singelinfo-img"><img width="100" height="100" :src="singleInfo.thirdImgUrl || defaultAvatar" alt=""></div> <div class="singelinfo-img">
<div class="singelinfo-content pl10 pr10"> <!-- <img width="100" height="100" :src="singleInfo.thirdImgUrl || defaultAvatar" alt="" /> -->
<span class="lheigt">{{ singleInfo.memberName }} <img width="100" height="100" v-if="singleInfo.thirdImgUrl" :src="singleInfo.thirdImgUrl" alt="" />
<img :title="singleInfo.status == 0 ? '已取消关注公众号' : singleInfo.status == 1 ? '已关注公众号' : '未关注公众号'" class="fr" <img width="100" height="100" v-else src="../../../../static/img/head_default.png" alt="" />
:src="singleInfo.status == 0 ? gzhiconcanclegray : singleInfo.status == 1 ? gzhicon : gzhicongray" style="margin-right:5px" /> </div>
<!-- <img :title="singleInfo.wxStatus == 0 ? '未使用小程序' : singleInfo.wxStatus == 1 ? '使用过小程序' : ''" class="channelicon fr mr6" <div class="singelinfo-content pl10 pr10">
:src="singleInfo.wxStatus == 0 ? xcxicongray : singleInfo.wxStatus == 1 ? xcxicon : ''"/> --> <span class="lheigt"
<img :title="singleInfo.usedMiniProgram ? '使用过小程序' : '未使用小程序' " class="channelicon fr mr6" >{{ singleInfo.memberName }}
:src="singleInfo.usedMiniProgram ? xcxicon : xcxicongray" style="margin-right:5px" /> <!-- <img :title="singleInfo.status == 0 ? '已取消关注公众号' : singleInfo.status == 1 ? '已关注公众号' : '未关注公众号'" class="fr" :src="singleInfo.status == 0 ? gzhiconcanclegray : singleInfo.status == 1 ? gzhicon : gzhicongray" style="margin-right:5px" /> -->
<img :title="singleInfo.bindPhone ? '已绑定手机号' : '未绑定手机号' " class="channelicon fr mr6" <!-- <img :title="singleInfo.usedMiniProgram ? '使用过小程序' : '未使用小程序'" class="channelicon fr mr6" :src="singleInfo.usedMiniProgram ? xcxicon : xcxicongray" style="margin-right:5px" /> -->
:src="singleInfo.bindPhone ? bphone : ubphone" style="margin-right:5px" /> <!-- <img :title="singleInfo.bindPhone ? '已绑定手机号' : '未绑定手机号'" class="channelicon fr mr6" :src="singleInfo.bindPhone ? bphone : ubphone" style="margin-right:5px" /> -->
<img :title="singleInfo.authStatus ? '已认证' : '未认证' " class="channelicon fr mr6" <!-- <img :title="singleInfo.authStatus ? '已认证' : '未认证'" class="channelicon fr mr6" :src="singleInfo.authStatus ? autoIcon : unAutoIcon" style="margin-right:5px" /> -->
:src="singleInfo.authStatus ? autoIcon : unAutoIcon" style="margin-right:5px"/> <img title="已取消关注公众号" class="fr" v-if="singleInfo.status == 0" src="../../../../static/img/status@gzhcanclegray.png" style="margin-right:5px" />
</span> <img title="已关注公众号" class="fr" v-else-if="singleInfo.status == 1" src="../../../../static/img/status@gzh.png" style="margin-right:5px" />
<p class="lheigt"> <img title="未关注公众号" class="fr" v-else src="../../../../static/img/status@gzhgray.png" style="margin-right:5px" />
<span style="margin-right:5px;">{{ singleInfo.memberGender}}</span> <img title="使用过小程序" class="channelicon fr mr6" v-if="singleInfo.usedMiniProgram" src="../../../../static/img/status@xcx.png" style="margin-right:5px" />
<span style="margin-right:5px;">{{ singleInfo.memberAge }}</span> <img title="未使用小程序" class="channelicon fr mr6" v-else src="../../../../static/img/status@xcxgray.png" style="margin-right:5px" />
<span :title="singleInfo.cardNo">{{ singleInfo.cardNum | formatCardName }}</span></p> <img title="已绑定手机号" class="channelicon fr mr6" v-if="singleInfo.bindPhone" src="../../../../static/img/phone_icon.png" style="margin-right:5px" />
<p class="lheigt"><span>{{ singleInfo.mainStoreName }}</span></p> <img title="未绑定手机号" class="channelicon fr mr6" v-else src="../../../../static/img/phone_icon_gray.png" style="margin-right:5px" />
<div class="singelinfo-cost"> <img title="已认证" class="channelicon fr mr6" v-if="singleInfo.authStatus" src="../../../../static/img/member_icon.png" style="margin-right:5px" />
<div class="singelinfo-costitem"><p>{{ singleInfo.costFee || 0 }}</p><p>消费总额</p></div> <img title="未认证" class="channelicon fr mr6" v-else src="../../../../static/img/member_icon_gray.png" style="margin-right:5px" />
<div class="singelinfo-costitem"><p>{{ singleInfo.costTimes || 0 }}</p><p>消费次数</p></div> </span>
<div class="singelinfo-costitem"><p class="no-wrap">{{ singleInfo.lastCostTime || '--'}}</p><p>最近消费</p></div> <p class="lheigt">
</div> <span style="margin-right:5px;">{{ singleInfo.memberGender }}</span>
</div> <span style="margin-right:5px;">{{ singleInfo.memberAge }}</span>
<span :title="singleInfo.cardNo">{{ singleInfo.cardNum | formatCardName }}</span>
</p>
<p class="lheigt">
<span>{{ singleInfo.mainStoreName }}</span>
</p>
<div class="singelinfo-cost">
<div class="singelinfo-costitem">
<p>{{ singleInfo.costFee || 0 }}</p>
<p>消费总额</p>
</div>
<div class="singelinfo-costitem">
<p>{{ singleInfo.costTimes || 0 }}</p>
<p>消费次数</p>
</div> </div>
<div class="singelinfo-jl mb20 mt20"> <div class="singelinfo-costitem">
<a class="singelinfo-jlitem">消费记录 ({{ singleInfo.numOfSale }})</a> <p class="no-wrap">{{ singleInfo.lastCostTime || '--' }}</p>
<a class="singelinfo-jlitem">营销记录 ({{ singleInfo.numOfMarketing }})</a> <p>最近消费</p>
<a class="singelinfo-jlitem">卡券记录 ({{ singleInfo.numOfCard }})</a>
</div> </div>
</div>
</div>
</div>
<div class="singelinfo-jl mb20 mt20">
<a class="singelinfo-jlitem">消费记录 ({{ singleInfo.numOfSale }})</a>
<a class="singelinfo-jlitem">营销记录 ({{ singleInfo.numOfMarketing }})</a>
<a class="singelinfo-jlitem">卡券记录 ({{ singleInfo.numOfCard }})</a>
</div>
</div>
<span slot="reference">
<a :href="'/member/#/wechatmemberDetail?memberId=' + row.memberId" target="_blank">
<!-- <img class="vertical-middle table__avatar" :src="filterAvatar(row.photoUrl)" width="60" height="60" alt="" srcset="" /> -->
<img class="vertical-middle table__avatar" v-if="row.photoUrl" :src="row.photoUrl" width="60" height="60" alt="" srcset="" />
<img class="vertical-middle table__avatar" v-else src="../../../../static/img/head_default.png" width="60" height="60" alt="" srcset="" />
<div class="inline-block vertical-middle">
<p class="table-name--ellipsis">{{ row.memberName || '--' }}</p>
<p class="table-name--ellipsis fz13">{{ row.cardNum || '--' }}</p>
</div> </div>
<span slot="reference"> </a>
<a :href="'/member/#/wechatmemberDetail?memberId='+ row.memberId" target="_blank"> </span>
<img class="vertical-middle table__avatar" :src="filterAvatar(row.photoUrl)" width="60" height="60" alt="" srcset=""> </el-popover>
<div class="inline-block vertical-middle">
<p class="table-name--ellipsis">{{row.memberName || '--'}}</p>
<p class="table-name--ellipsis fz13">{{row.cardNum || '--'}}</p>
</div>
</a>
</span>
</el-popover>
</template> </template>
<script> <script>
import {formateDateTimeByType} from '@/utils/index.js'; import { getMemberInfo } from '@/service/api/mallApi.js';
import {getMemberInfo} from '@/service/api/mallApi.js';
export default { export default {
name:'member-info', name: 'member-info',
props:{ props: {
row:{ row: {
type:Object, type: Object,
default(){ default() {
return {} return {};
} }
} }
}, },
data() { data() {
return { return {
singleInfo:{}, singleInfo: {},
defaultAvatar:require('../../../assets/img/head_default.png'), // defaultAvatar: require('../../../assets/img/head_default.png'),
gzhiconcanclegray:require('../../../assets/img/status@gzhcanclegray.png'),//取消关注微信公众号 // gzhiconcanclegray: require('../../../assets/img/status@gzhcanclegray.png'), //取消关注微信公众号
gzhicon:require('../../../assets/img/status@gzh.png'),//已关注微信公众号 // gzhicon: require('../../../assets/img/status@gzh.png'), //已关注微信公众号
gzhicongray:require('../../../assets/img/status@gzhgray.png'),//未关注微信公众号 // gzhicongray: require('../../../assets/img/status@gzhgray.png'), //未关注微信公众号
xcxicongray:require('../../../assets/img/status@xcxgray.png'),//未使用小程序 // xcxicongray: require('../../../assets/img/status@xcxgray.png'), //未使用小程序
xcxicon:require('../../../assets/img/status@xcx.png'),//已使用小程序 // xcxicon: require('../../../assets/img/status@xcx.png'), //已使用小程序
bphone:require('../../../assets/img/phone_icon.png'),//绑定手机 // bphone: require('../../../assets/img/phone_icon.png'), //绑定手机
ubphone:require('../../../assets/img/phone_icon_gray.png'),//未绑定手机 // ubphone: require('../../../assets/img/phone_icon_gray.png'), //未绑定手机
autoIcon:require('../../../assets/img/member_icon.png'),//已认证 // autoIcon: require('../../../assets/img/member_icon.png'), //已认证
unAutoIcon:require('../../../assets/img/member_icon_gray.png'),//未认证 // unAutoIcon: require('../../../assets/img/member_icon_gray.png') //未认证
} defaultAvatar: '../../../../static/img/head_default.png',
gzhiconcanclegray: '../../../../static/img/status@gzhcanclegray.png', //取消关注微信公众号
gzhicon: '../../../../static/img/status@gzh.png', //已关注微信公众号
gzhicongray: '../../../../static/img/status@gzhgray.png', //未关注微信公众号
xcxicongray: '../../../../static/img/status@xcxgray.png', //未使用小程序
xcxicon: '../../../../static/img/status@xcx.png', //已使用小程序
bphone: '../../../../static/img/phone_icon.png', //绑定手机
ubphone: '../../../../static/img/phone_icon_gray.png', //未绑定手机
autoIcon: '../../../../static/img/member_icon.png', //已认证
unAutoIcon: '../../../../static/img/member_icon_gray.png' //未认证
};
},
methods: {
filterAvatar(img) {
return img ? img.replace(/^http(s)?/, 'https') : this.defaultAvatar;
}, },
methods:{ getSingleInfo() {
filterAvatar(img) { getMemberInfo({ memberId: this.row.memberId }).then(res => {
return img?img.replace(/^http(s)?/,'https'):this.defaultAvatar; if (res.errorCode === 0) {
}, this.singleInfo = res.result || {};
getSingleInfo() {
getMemberInfo({memberId:this.row.memberId}).then(res => {
if (res.errorCode === 0) {
this.singleInfo = res.result || {};
}
})
},
linkDetail() {
window.open(`/member/#/wechatmemberDetail?memberId=${this.row.memberId}`);
} }
});
}, },
filters:{ linkDetail() {
formatCardName(val) { window.open(`/member/#/wechatmemberDetail?memberId=${this.row.memberId}`);
if(val) { }
if(val.length > 10) { },
val = val.substr(0, 10) + '...'; filters: {
} formatCardName(val) {
if (val) {
if (val.length > 10) {
val = val.substr(0, 10) + '...';
} }
return val; }
}, return val;
} }
} }
};
</script> </script>
src/views/mall/common/tinymce-edit.vue
...@@ -47,31 +47,30 @@ export const postForm = (url, params) => { ...@@ -47,31 +47,30 @@ export const postForm = (url, params) => {
--> -->
<template> <template>
<div class="tinymce-contain"> <div class="tinymce-contain">
<editor id='tinymce' v-model='tinymceHtml' :init='init'></editor> <editor id="tinymce" v-model="tinymceHtml" :init="init"></editor>
</div> </div>
</template> </template>
<script> <script>
// import request from '../../api/request.js' // import request from '../../api/request.js'
import request from '../../../api/request.js' import request from '../../../api/request.js';
import tinymce from 'tinymce/tinymce' import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme' import 'tinymce/themes/modern/theme';
import Editor from '@tinymce/tinymce-vue' import Editor from '@tinymce/tinymce-vue';
import 'tinymce/plugins/image' import 'tinymce/plugins/image';
import 'tinymce/plugins/link' import 'tinymce/plugins/link';
import 'tinymce/plugins/code' import 'tinymce/plugins/code';
import 'tinymce/plugins/table' import 'tinymce/plugins/table';
import 'tinymce/plugins/lists' import 'tinymce/plugins/lists';
import 'tinymce/plugins/contextmenu' import 'tinymce/plugins/contextmenu';
import 'tinymce/plugins/wordcount' import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/colorpicker' import 'tinymce/plugins/colorpicker';
import 'tinymce/plugins/textcolor' import 'tinymce/plugins/textcolor';
export default { export default {
name: "tinymce-edit", name: 'tinymce-edit',
props: ["bodyHtml",'projectName'], props: ['bodyHtml', 'projectName'],
data() { data() {
return { return {
tinymceHtml: '请输入内容', tinymceHtml: '请输入内容',
init: { init: {
language_url: 'static/tinymce/zh_CN.js', language_url: 'static/tinymce/zh_CN.js',
...@@ -84,74 +83,67 @@ export default { ...@@ -84,74 +83,67 @@ export default {
// images_upload_base_path: '/some/basepath', // images_upload_base_path: '/some/basepath',
images_upload_credentials: true, //是否应传递cookie等跨域的凭据 images_upload_credentials: true, //是否应传递cookie等跨域的凭据
// images_upload_handler提供三个参数：blobInfo, success, failure // images_upload_handler提供三个参数：blobInfo, success, failure
images_upload_handler: (blobInfo, success, failure)=>{ images_upload_handler: (blobInfo, success, failure) => {
console.log(blobInfo) this.handleImgUpload(blobInfo, success, failure);
this.handleImgUpload(blobInfo, success, failure)
}, },
// 添加插件 // 添加插件
// plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu', // plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
// toolbar: // toolbar:
// 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat', // 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
plugins: 'image textcolor', plugins: 'image textcolor',
toolbar: toolbar: 'fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | link unlink image code',
'fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | link unlink image code', fontsize_formats: '8px 10px 12px 14px 18px 24px 36px',
fontsize_formats: "8px 10px 12px 14px 18px 24px 36px",
branding: false, branding: false,
menubar: false, menubar: false,
setup: function(editor) { setup: function(editor) {
// 点击编辑框回调 // 点击编辑框回调
editor.on('click', function(e) { editor.on('click', function(e) {});
console.log('Editor was clicked');
});
} }
} }
} };
}, },
methods: { methods: {
// 上传图片 // 上传图片
handleImgUpload (blobInfo, success, failure) { handleImgUpload(blobInfo, success, failure) {
var that = this var that = this;
let formdata = new FormData() let formdata = new FormData();
formdata.set('upload_file', blobInfo.blob()) formdata.set('upload_file', blobInfo.blob());
formdata.set("requestProject",that.repProjectName); formdata.set('requestProject', that.repProjectName);
console.log(formdata) request
request.post('/api-plug/upload-img', formdata).then(res => { .post('/api-plug/upload-img', formdata)
success(res.data.result[0].qcloudImageUrl) .then(res => {
}).catch(res => { success(res.data.result[0].qcloudImageUrl);
console.log(res) })
failure('error') .catch(res => {
}) failure('error');
}, });
}
}, },
watch: { watch: {
projectName: function(newData,oldData){ projectName: function(newData, oldData) {
var that = this; var that = this;
// console.log("新数据:",newData,oldData)
that.repProjectName = newData || 'gic-web'; that.repProjectName = newData || 'gic-web';
}, },
bodyHtml: function(newData,oldData){ bodyHtml: function(newData, oldData) {
var that = this; var that = this;
// console.log("新数据:",newData,oldData)
that.tinymceHtml = newData; that.tinymceHtml = newData;
}, }
}, },
components: { components: {
Editor Editor
}, },
mounted() { mounted() {
var that = this var that = this;
tinymce.init({ tinymce.init({
fontsize_formats: "8px 10px 12px 14px 18px 24px 36px", fontsize_formats: '8px 10px 12px 14px 18px 24px 36px'
}); });
that.tinymceHtml = that.bodyHtml; that.tinymceHtml = that.bodyHtml;
} }
};
}
</script> </script>
<style scoped> <style scoped>
.tinymce-contain { .tinymce-contain {
width: 900px width: 900px;
} }
</style> </style>
src/views/mall/common/update-count.vue
<template slot-scope="scope"> <template slot-scope="scope">
<el-popover placement="top" width="160" v-model="model[theType+'Flag']"> <el-popover placement="top" width="160" v-model="model[theType + 'Flag']">
<el-input-number v-if="model[theType+'Flag']" class="w150" size="small" controls-position="right" :precision="precision" v-model="model.inputValue" :min="0" ></el-input-number> <el-input-number v-if="model[theType + 'Flag']" class="w150" size="small" controls-position="right" :precision="precision" v-model="model.inputValue" :min="0"></el-input-number>
<div style="text-align: right; margin:10px 0 0 0;"> <div style="text-align: right; margin:10px 0 0 0;">
<el-button size="mini" type="text" @click="model[theType+'Flag'] = false">取消</el-button> <el-button size="mini" type="text" @click="model[theType + 'Flag'] = false">取消</el-button>
<el-button type="primary" size="mini" @click="submit">确定</el-button> <el-button type="primary" size="mini" @click="submit">确定</el-button>
</div> </div>
<div slot="reference" @click="edit"> <div slot="reference" @click="edit">
<span>{{model[theType]}}{{typeName}}</span> <i class="el-icon-edit cursor-hover"></i> <span>{{ model[theType] }}{{ typeName }}</span> <i class="el-icon-edit cursor-hover"></i>
</div> </div>
</el-popover> </el-popover>
</template> </template>
...@@ -16,58 +16,60 @@ import { updateStockService, updateIntegralCostService, updateCashCostService } ...@@ -16,58 +16,60 @@ import { updateStockService, updateIntegralCostService, updateCashCostService }
export default { export default {
props: { props: {
model: { model: {
type: Object, type: Object,
default() { default() {
return {} return {};
}
},
theType: String,
typeName: String,
precision:{
type:Number,
default:0
} }
},
theType: String,
typeName: String,
precision: {
type: Number,
default: 0
}
}, },
methods:{ methods: {
// 提交更新并刷新列表 // 提交更新并刷新列表
async submit() { async submit() {
// try { // try {
console.log(this.value,this.theType,this.model.inputValue,this.precision) if (this.theType === 'cashCost' && this.model.inputValue > this.model.costValue) {
if (this.theType === 'cashCost' && this.model.inputValue > this.model.costValue) { this.$tips({ type: 'warning', message: '现金费用不能大于礼品成本' });
this.$tips({type:'warning',message:'现金费用不能大于礼品成本'}); return;
return; }
} let res = null;
let res = null; if (this.theType === 'virtualStock') {
if (this.theType === 'virtualStock') { // 库存 // 库存
res = await updateStockService({proId:this.model.integralMallProId,stock:this.model.inputValue}); res = await updateStockService({ proId: this.model.integralMallProId, stock: this.model.inputValue });
} else if (this.theType === 'cashCost') { // 现金费用 } else if (this.theType === 'cashCost') {
res = await updateCashCostService({proId:this.model.integralMallProId,cost:this.model.inputValue}); // 现金费用
} else if (this.theType === 'integralCost') { // 积分费用 res = await updateCashCostService({ proId: this.model.integralMallProId, cost: this.model.inputValue });
res = await updateIntegralCostService({proId:this.model.integralMallProId,cost:this.model.inputValue}); } else if (this.theType === 'integralCost') {
} // 积分费用
if (res.errorCode === 0) { res = await updateIntegralCostService({ proId: this.model.integralMallProId, cost: this.model.inputValue });
if (this.theType === 'virtualStock') { }
this.$tips({type:'success',message: '积分商城修改库存时，请同步修改对应卡券的库存'}); if (res.errorCode === 0) {
} else { if (this.theType === 'virtualStock') {
this.$tips({type:'success',message: '更新成功'}); this.$tips({ type: 'success', message: '积分商城修改库存时，请同步修改对应卡券的库存' });
}
this.$emit('refresh');
} else { } else {
this.$tips({type:'error',message: '更新失败'}); this.$tips({ type: 'success', message: '更新成功' });
} }
this.$emit('refresh');
} else {
this.$tips({ type: 'error', message: '更新失败' });
}
// } catch (err) { // } catch (err) {
// this.$tips({type:'error',message: '更新失败'}); // this.$tips({type:'error',message: '更新失败'});
// } // }
}, },
// 编辑操作 // 编辑操作
edit() { edit() {
// 这里precision不能更新 所以加上nextTick // 这里precision不能更新 所以加上nextTick
this.$nextTick(_ => { this.$nextTick(_ => {
this.model[this.theType + 'Flag'] = true; this.model[this.theType + 'Flag'] = true;
this.$set(this.model,'inputValue',this.model[this.theType]); this.$set(this.model, 'inputValue', this.model[this.theType]);
}) });
} }
} }
} };
</script> </script>
src/views/mall/coupon/exchange.vue
<template> <template>
<section class="dm-wrap" v-loading="loading"> <section class="dm-wrap" v-loading="loading">
<div class="pb22 clearfix"> <div class="pb22 clearfix">
<el-date-picker class="w250" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="getPageExchangeLogsList"></el-date-picker> <el-date-picker class="w250" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="getPageExchangeLogsList"></el-date-picker>
<el-select class="vertical-middle w150" v-model="listParams.status" placeholder="选择领取状态" @change="getPageExchangeLogsList"> <el-select class="vertical-middle w150" v-model="listParams.status" placeholder="选择领取状态" @change="getPageExchangeLogsList">
<el-option v-for="v in statusOptions" :key="v.value" :label="v.label" :value="v.value"></el-option> <el-option v-for="v in statusOptions" :key="v.value" :label="v.label" :value="v.value"></el-option>
</el-select> </el-select>
<el-select class="vertical-middle w150" v-model="listParams.useStatus" placeholder="选择使用状态" @change="getPageExchangeLogsList"> <el-select class="vertical-middle w150" v-model="listParams.useStatus" placeholder="选择使用状态" @change="getPageExchangeLogsList">
<el-option v-for="v in useStatusOptions" :key="v.value" :label="v.label" :value="v.value"></el-option> <el-option v-for="v in useStatusOptions" :key="v.value" :label="v.label" :value="v.value"></el-option>
</el-select> </el-select>
<el-input v-model="listParams.memberInfo" class="w300" placeholder="输入姓名/昵称/手机号" clearable @change="getPageExchangeLogsList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input> <el-input v-model="listParams.memberInfo" class="w300" placeholder="输入姓名/昵称/手机号" clearable @change="getPageExchangeLogsList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
<el-button type="primary" class="fr" icon="iconfont icon-icon_yunxiazai fz14" @click="exportExcel"> 导出列表</el-button> <el-button type="primary" class="fr" icon="iconfont icon-icon_yunxiazai fz14" @click="exportExcel"> 导出列表</el-button>
</div> </div>
<el-table tooltipEffect="light" :data="tableList" style="width: 100%"> <el-table tooltipEffect="light" :data="tableList" style="width: 100%">
<el-table-column v-for="(v,i) in tableHeader" :align="v.align" :key="i" :prop="v.prop" :label="v.label"> <el-table-column v-for="(v, i) in tableHeader" :align="v.align" :key="i" :prop="v.prop" :label="v.label">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="v.formatter" v-html="v.formatter(scope.row)"></span> <span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
<component v-else-if="v.component" :is="v.component" :row="scope.row"></component> <component v-else-if="v.component" :is="v.component" :row="scope.row"></component>
<span v-else>{{scope.row[v.prop]}}</span> <span v-else>{{ scope.row[v.prop] }}</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination> <el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
<vue-gic-export-excel :dataArr="tableList" :dialogVisible.sync="dialogVisible" :type="2" :excelUrl="excelUrl" :params="params" :projectName="projectName"></vue-gic-export-excel> <vue-gic-export-excel :dataArr="tableList" :dialogVisible.sync="dialogVisible" :type="2" :excelUrl="excelUrl" :params="params" :projectName="projectName"></vue-gic-export-excel>
</section> </section>
</template> </template>
<script> <script>
import {getPageExchangeLogsList,exportExchangeListExcel} from '@/service/api/mallApi.js'; import { getPageExchangeLogsList } from '@/service/api/mallApi.js';
import {formateDateTimeByType} from '@/utils/index.js'; import { formateDateTimeByType } from '@/utils/index.js';
import memberInfoCom from '../common/member-info'; import memberInfoCom from '../common/member-info';
export default { export default {
components:{ components: {
memberInfoCom memberInfoCom
}, },
data() { data() {
let _vm = this; var that = this;
return { return {
loading:false, loading: false,
tableHeader:[ tableHeader: [
{label:'兑换时间',prop:'createTime',minWidth:'170',align:'left',formatter(row){ {
return formateDateTimeByType(row.createTime,'yyyy-MM-dd-HH-mm-ss'); label: '兑换时间',
}}, prop: 'createTime',
{label:'流水号',prop:'definedCode',minWidth:'100',align:'left'}, minWidth: '170',
{label:'会员信息',prop:'issuingQuantity',minWidth:'170',align:'left',component:'memberInfoCom'}, align: 'left',
{label:'消耗积分',prop:'unitCostIntegral',width:'80',align:'left'}, formatter(row) {
{label:'领取状态',prop:'status',width:'100',align:'left',formatter(row){ return formateDateTimeByType(row.createTime, 'yyyy-MM-dd-HH-mm-ss');
let statusLabel ='--'; }
_vm.statusOptions.map(v => { },
if (row.status === v.value) { { label: '流水号', prop: 'definedCode', minWidth: '100', align: 'left' },
statusLabel = v.label { label: '会员信息', prop: 'issuingQuantity', minWidth: '170', align: 'left', component: 'memberInfoCom' },
} { label: '消耗积分', prop: 'unitCostIntegral', width: '80', align: 'left' },
}); {
return statusLabel; label: '领取状态',
}}, prop: 'status',
{label:'使用状态',prop:'useStatus',width:'100',align:'left',formatter(row){ width: '100',
return row.useStatus === 5?'已使用':'未使用'; align: 'left',
}}, formatter(row) {
], let statusLabel = '--';
total:0, that.statusOptions.map(v => {
statusOptions:[{label:'所有领取状态',value:-1},{label:'未领取',value:1},{label:'已领取',value:2}], if (row.status === v.value) {
useStatusOptions:[{label:'所有使用状态',value:-1},{label:'已使用',value:1},{label:'未使用',value:2}], statusLabel = v.label;
listParams:{ }
pageSize: 20, });
currentPage: 1, return statusLabel;
status: -1, }
useStatus: -1, },
memberInfo: "", {
integralMallProId: this.$route.params.id, label: '使用状态',
beginTime: "", prop: 'useStatus',
endTime: "" width: '100',
}, align: 'left',
dateTime:['',''], formatter(row) {
tableList:[], return row.useStatus === 5 ? '已使用' : '未使用';
// 导出数据控件 }
projectName: 'integral-mall', // 当前项目名 }
dialogVisible:false, ],
excelUrl:'/api-integral-mall/download-exchange-list-execl', // 下载数据的地址 total: 0,
params:{}, // 传递的参数 statusOptions: [{ label: '所有领取状态', value: -1 }, { label: '未领取', value: 1 }, { label: '已领取', value: 2 }],
useStatusOptions: [{ label: '所有使用状态', value: -1 }, { label: '已使用', value: 1 }, { label: '未使用', value: 2 }],
}; listParams: {
pageSize: 20,
currentPage: 1,
status: -1,
useStatus: -1,
memberInfo: '',
integralMallProId: this.$route.params.id,
beginTime: '',
endTime: ''
},
dateTime: ['', ''],
tableList: [],
// 导出数据控件
projectName: 'integral-mall', // 当前项目名
dialogVisible: false,
excelUrl: '/api-integral-mall/download-exchange-list-execl', // 下载数据的地址
params: {} // 传递的参数
};
},
created() {
// 更新面包屑
this.$store.commit('mutations_breadcrumb', [{ name: '积分商城' }, { name: '优惠券', path: '/coupon' }, { name: '优惠券兑换记录', path: '' }]);
this.getPageExchangeLogsList();
},
methods: {
// 列表方法
handleSizeChange(val) {
this.listParams.pageSize = val;
this.getPageExchangeLogsList();
}, },
created() { handleCurrentChange(val) {
// 更新面包屑 this.listParams.currentPage = val;
this.$store.commit('mutations_breadcrumb',[{name:'积分商城'},{name:'优惠券',path:'/coupon'},{name:'优惠券兑换记录',path:''}]);
this.getPageExchangeLogsList(); this.getPageExchangeLogsList();
}, },
methods: { // 拉去列表
// 列表方法 async getPageExchangeLogsList() {
handleSizeChange(val) { this.loading = true;
this.listParams.pageSize = val; if (this.dateTime) {
this.getPageExchangeLogsList(); this.listParams.beginTime = formateDateTimeByType(this.dateTime[0], 'yyyy-MM-dd');
}, this.listParams.endTime = formateDateTimeByType(this.dateTime[1], 'yyyy-MM-dd');
handleCurrentChange(val) { } else {
this.listParams.currentPage = val; this.listParams.beginTime = this.listParams.senendTimedEndTime = '';
this.getPageExchangeLogsList(); }
}, let res = await getPageExchangeLogsList(this.listParams);
// 拉去列表 this.tableList = res.result.rows || [];
async getPageExchangeLogsList() { this.total = res.result.total || 0;
this.loading = true; this.loading = false;
if (this.dateTime) { },
this.listParams.beginTime = formateDateTimeByType(this.dateTime[0],'yyyy-MM-dd'); // 导出列表
this.listParams.endTime = formateDateTimeByType(this.dateTime[1],'yyyy-MM-dd'); exportExcel() {
} else { if (this.dateTime) {
this.listParams.beginTime = this.listParams.senendTimedEndTime = ''; this.listParams.beginTime = formateDateTimeByType(this.dateTime[0], 'yyyy-MM-dd');
} this.listParams.endTime = formateDateTimeByType(this.dateTime[1], 'yyyy-MM-dd');
let res = await getPageExchangeLogsList(this.listParams); } else {
this.tableList = res.result.rows || []; this.listParams.beginTime = this.listParams.senendTimedEndTime = '';
this.total = res.result.total || 0; }
this.loading = false; if (!this.listParams.beginTime || !this.listParams.endTime) {
}, this.$tips({ type: 'warning', message: '时间不能为空' });
// 导出列表 return;
exportExcel(){ }
if (this.dateTime) { this.params = {
this.listParams.beginTime = formateDateTimeByType(this.dateTime[0],'yyyy-MM-dd'); integralMallProId: this.listParams.integralMallProId,
this.listParams.endTime = formateDateTimeByType(this.dateTime[1],'yyyy-MM-dd'); status: this.listParams.status,
} else { useStatus: this.listParams.useStatus,
this.listParams.beginTime = this.listParams.senendTimedEndTime = ''; memberInfo: this.listParams.memberInfo,
} beginTime: this.listParams.beginTime,
if (!this.listParams.beginTime || !this.listParams.endTime) { endTime: this.listParams.endTime,
this.$tips({type: 'warning',message: '时间不能为空'}); requestProject: 'integral-mall'
return; };
} this.dialogVisible = true;
this.params ={ // window.location = `${exportExchangeListExcel}?integralMallProId=${this.listParams.integralMallProId}&status=${this.listParams.status}&useStatus=${this.listParams.useStatus}&memberInfo=${this.listParams.memberInfo}&beginTime=${this.listParams.beginTime}&endTime=${this.listParams.endTime}&requestProject=marketing`;
integralMallProId:this.listParams.integralMallProId,
status:this.listParams.status,
useStatus:this.listParams.useStatus,
memberInfo:this.listParams.memberInfo,
beginTime:this.listParams.beginTime,
endTime:this.listParams.endTime,
requestProject:'integral-mall'
}
this.dialogVisible = true
// window.location = `${exportExchangeListExcel}?integralMallProId=${this.listParams.integralMallProId}&status=${this.listParams.status}&useStatus=${this.listParams.useStatus}&memberInfo=${this.listParams.memberInfo}&beginTime=${this.listParams.beginTime}&endTime=${this.listParams.endTime}&requestProject=marketing`;
},
} }
}; }
};
</script> </script>
src/views/mall/coupon/info.js
import { getGradeList, getCategoryList, createIntegralProService, getIntegralMallProInfo, createCategoryService } from '@/service/api/mallApi.js'; import { getGradeList, createIntegralProService, getIntegralMallProInfo } from '@/service/api/mallApi.js';
import cardTemp from '../common/card-temp.vue'; import cardTemp from '../common/card-temp.vue';
import { formateDateTimeByType } from '@/utils/index.js'; import { formateDateTimeByType } from '@/utils/index.js';
export default { export default {
components: { components: {
'card-temp': cardTemp 'card-temp': cardTemp
}, },
data() { data() {
return { return {
form: { form: {
integralMallProId: '', integralMallProId: '',
proReferId: '', proReferId: '',
cardType:0, cardType: 0,
cardName:'', cardName: '',
proName: '', // String 商品名字，优惠券就是所选券的名字。 (必填) proName: '', // String 商品名字，优惠券就是所选券的名字。 (必填)
integralCost: 0, // Number 100 积分费用 (必填) integralCost: 0, // Number 100 积分费用 (必填)
cashCost: 0, // Number 现金费用，两位小数 cashCost: 0, // Number 现金费用，两位小数
memberGradeArr: [], // array 适用会员 这里是数组 传给后台要拼接为字符串数组逗号隔开 memberGradeArr: [], // array 适用会员 这里是数组 传给后台要拼接为字符串数组逗号隔开
limitTimes: 0, limitTimes: 0,
exchangeDateType: 1, exchangeDateType: 1,
exchangeTimeType: 1, // 兑换时间类型 1:全部 2:部分时段 exchangeTimeType: 1, // 兑换时间类型 1:全部 2:部分时段
proShowStatus: 1, proShowStatus: 1,
releaseType: 1, releaseType: 1,
exchangeFixDate: ['', ''], // exchangeFixDateBegin // exchangeFixDateEnd,
exchangeDateDayArr: [],
exchangeDateWeekArr: [],
limitTimeBegin: '',
virtualStock: 0,
weChatVirtualStock: 0
},
rules: {
integralCost: { required: true, type: 'number', min: 0, message: '请输入积分费用', trigger: 'blur' },
cashCost: { required: true, type: 'number', min: 0, message: '请输入现金费用', trigger: 'blur' },
memberGradeArr: { required: true, type: 'array', message: '请选择适用会员', trigger: 'blur' },
},
memberGradeOptions: [],
exchangeDateWeekOptions: ['1', '2', '3', '4', '5', '6', '7'],
monthOptions: Array.from(Array(31), (v, k) => (k + 1).toString()),
sendChildData: {
storeType: 0,
storeGroupIds: '',
storeIds: [],
},
timeRangeList: [{}],
isLimitTimes: false,
isAdd: this.$route.meta.type === 'add',
isEdit: this.$route.meta.type === 'edit',
isInfo: this.$route.meta.type === 'info',
}
},
created() {
this.$store.commit('mutations_breadcrumb', [{ name: '积分商城' }, { name: '优惠券', path: '/coupon' }, { name: this.isAdd ? '新增优惠券' : '编辑优惠券', path: '' }]);
this.getGradeList();
// 解决响应式问题
if (!this.timeRangeList) {
this.$set(this.timeRangeList, 0, { timeRange: ['', ''] })
}
if (this.isEdit || this.isInfo) {
this.getIntegralMallProInfo();
}
},
computed: {
asideShow() {
return this.$store.state.marketing.asideShow
}
},
watch: {
'form.limitTimes' (val) {
this.isLimitTimes = (val > 0);
},
},
methods: {
// init 拉取详情
async getIntegralMallProInfo() {
let res = await getIntegralMallProInfo({ integralMallProId: this.$route.params.id });
if (res.errorCode === 0) {
const result = res.result;
this.form.integralMallProId = result.integralMallProId || '';
this.form.proReferId = result.proReferId || '';
this.form.proName = result.proName || '';
this.form.virtualStock = result.virtualStock || 0;
this.form.integralCost = result.integralCost || 0;
this.form.cashCost = result.cashCost || 0;
this.form.memberGradeArr = result.memberGrade ? result.memberGrade.split(',') : [];
this.form.limitTimes = result.limitTimes || 0;
this.form.exchangeDateType = result.exchangeDateType || 1;
this.form.exchangeTimeType = result.exchangeTimeType || 1;
this.form.proShowStatus = result.proShowStatus || 1;
this.form.releaseType = result.releaseType || 1;
this.form.exchangeFixDate = [result.exchangeFixDateBegin || '', result.exchangeFixDateEnd || ''];
this.form.exchangeDateDayArr = result.exchangeDateDay ? result.exchangeDateDay.split(',') : [];
this.form.exchangeDateWeekArr = result.exchangeDateWeek ? result.exchangeDateWeek.split(',').filter(v => v) : [];
this.form.limitTimeBegin = result.limitTimeBegin || '';
this.form.cardType = result.cardType exchangeFixDate: ['', ''], // exchangeFixDateBegin // exchangeFixDateEnd,
exchangeDateDayArr: [],
console.log('333333',this.form.cardType) exchangeDateWeekArr: [],
// result.showStore = 2; limitTimeBegin: '',
virtualStock: 0,
this.sendChildData = { weChatVirtualStock: 0
storeType: result.showStore || 0 },
} rules: {
integralCost: { required: true, type: 'number', min: 0, message: '请输入积分费用', trigger: 'blur' },
cashCost: { required: true, type: 'number', min: 0, message: '请输入现金费用', trigger: 'blur' },
memberGradeArr: { required: true, type: 'array', message: '请选择适用会员', trigger: 'blur' }
},
memberGradeOptions: [],
exchangeDateWeekOptions: ['1', '2', '3', '4', '5', '6', '7'],
monthOptions: Array.from(Array(31), (v, k) => (k + 1).toString()),
sendChildData: {
storeType: 0,
storeGroupIds: '',
storeIds: []
},
timeRangeList: [{}],
isLimitTimes: false,
isAdd: this.$route.meta.type === 'add',
isEdit: this.$route.meta.type === 'edit',
isInfo: this.$route.meta.type === 'info'
};
},
created() {
this.$store.commit('mutations_breadcrumb', [{ name: '积分商城' }, { name: '优惠券', path: '/coupon' }, { name: this.isAdd ? '新增优惠券' : '编辑优惠券', path: '' }]);
this.getGradeList();
// 解决响应式问题
if (!this.timeRangeList) {
this.$set(this.timeRangeList, 0, { timeRange: ['', ''] });
}
if (this.isEdit || this.isInfo) {
this.getIntegralMallProInfo();
}
},
computed: {
asideShow() {
return this.$store.state.marketing.asideShow;
}
},
watch: {
'form.limitTimes'(val) {
this.isLimitTimes = val > 0;
}
},
methods: {
// init 拉取详情
/* eslint-disable */
async getIntegralMallProInfo() {
let res = await getIntegralMallProInfo({ integralMallProId: this.$route.params.id });
if (res.errorCode === 0) {
const result = res.result;
this.form.integralMallProId = result.integralMallProId || '';
this.form.proReferId = result.proReferId || '';
this.form.proName = result.proName || '';
this.form.virtualStock = result.virtualStock || 0;
this.form.integralCost = result.integralCost || 0;
this.form.cashCost = result.cashCost || 0;
this.form.memberGradeArr = result.memberGrade ? result.memberGrade.split(',') : [];
this.form.limitTimes = result.limitTimes || 0;
this.form.exchangeDateType = result.exchangeDateType || 1;
this.form.exchangeTimeType = result.exchangeTimeType || 1;
this.form.proShowStatus = result.proShowStatus || 1;
this.form.releaseType = result.releaseType || 1;
if (result.showStore === 1) { this.form.exchangeFixDate = [result.exchangeFixDateBegin || '', result.exchangeFixDateEnd || ''];
this.sendChildData.storeGroupIds = result.storeGroupIds || ''; this.form.exchangeDateDayArr = result.exchangeDateDay ? result.exchangeDateDay.split(',') : [];
} else if (result.showStore === 2) { this.form.exchangeDateWeekArr = result.exchangeDateWeek ? result.exchangeDateWeek.split(',').filter(v => v) : [];
let list = []; this.form.limitTimeBegin = result.limitTimeBegin || '';
if (result.storeInfo.length) {
result.storeInfo.map(v => {
list.push(v);
})
}
this.sendChildData.storeIds = list;
}
console.log(this.sendChildData)
if (this.form.exchangeTimeType === 2 && result.timeZones) {
let list = result.timeZones.split('#').filter(v => v);
list.map((v, i) => {
let arr = v.split('-');
this.$set(this.timeRangeList, i, { timeRange: [arr[0], arr[1]] })
});
}
this.isLimitTimes = this.form.limitTimes > 0; this.form.cardType = result.cardType;
this.$nextTick(_ => { this.sendChildData = {
this.$refs.cardTemp.getCardList(); storeType: result.showStore || 0
}) };
}
},
//门店分组回执方法
getSelectGroupData(val) {
this.sendChildData.storeType = val.storeType || 0
this.sendChildData.storeGroupIds = val.storeGroupIds || ''
this.sendChildData.storeIds = val.storeIds || []
},
// 拉取会员等级列表
async getGradeList() {
let res = await getGradeList();
if (res.errorCode === 0) {
this.memberGradeOptions = res.result || [];
}
console.log(res);
},
// 获取卡券组件回调的对象
getCardActiveObjFun(val) {
if (val.hasOwnProperty('cardType')) {
this.form.cardType = val.cardType
}
if (val.coupCardId && this.isAdd) {
this.form.virtualStock = val.couponStock || 0;
this.form.proReferId = val.coupCardId || '';
this.form.proName = val.cardName || '';
}
},
// 添加时间段
addTimeRange() {
let length = this.timeRangeList.length;
if (length >= 5) {
this.$tips({ type: 'warning', message: '最多五个时间段' });
return;
}
this.$set(this.timeRangeList, length, { timeRange: ['', ''] })
},
// 删除时间段
delTimeRange(index) {
this.timeRangeList.splice(index, 1);
},
submit(formName) { if (result.showStore === 1) {
this.$refs[formName].validate((valid) => { this.sendChildData.storeGroupIds = result.storeGroupIds || '';
if (valid) { } else if (result.showStore === 2) {
this.submitService(); let list = [];
} else { if (result.storeInfo.length) {
console.log('表单未提交完整'); result.storeInfo.map(v => {
} list.push(v);
}); });
}, }
this.sendChildData.storeIds = list;
}
if (this.form.exchangeTimeType === 2 && result.timeZones) {
let list = result.timeZones.split('#').filter(v => v);
list.map((v, i) => {
let arr = v.split('-');
this.$set(this.timeRangeList, i, { timeRange: [arr[0], arr[1]] });
});
}
submitService() { this.isLimitTimes = this.form.limitTimes > 0;
if (!this.form.proReferId) { this.$nextTick(_ => {
this.$tips({ type: 'warning', message: '请选择优惠券' }); this.$refs.cardTemp.getCardList();
return; });
} }
console.log(4444444,this.form.cardType) },
console.log(this.timeRangeList) //门店分组回执方法
let params = { getSelectGroupData(val) {
integralMallProId: this.form.integralMallProId || '', this.sendChildData.storeType = val.storeType || 0;
proType: 1, // 商品类型 1 优惠券，2礼品，3实物 this.sendChildData.storeGroupIds = val.storeGroupIds || '';
proName: this.form.proName || '', // 商品名字，优惠券就是所选券的名字。 this.sendChildData.storeIds = val.storeIds || [];
proReferId: this.form.proReferId || '', // 关联的卡券或者礼品 },
proShowStatus: this.form.proShowStatus || 1, // 商品显示状态 1:上架状态就显示 2:兑换状态下显示 // 拉取会员等级列表
integralCost: this.form.integralCost || 0, // 积分费用 async getGradeList() {
cashCost: this.form.cashCost || 0, // 现金费用，两位小数 let res = await getGradeList();
costValue: this.form.costValue || 0, if (res.errorCode === 0) {
limitTimes: this.isLimitTimes ? this.form.limitTimes : -1, // 次数限制 this.memberGradeOptions = res.result || [];
memberGrade: this.form.memberGradeArr.length ? this.form.memberGradeArr.join(',') : '', // 适用会员，多个，逗号拼接。 }
exchangeDateType: this.form.exchangeDateType || 1, // 兑换日期1:全部 2:固定日期 3:每月 4:每周 },
exchangeTimeType: this.form.exchangeTimeType || 1, // 兑换时间类型 1:全部 2:部分时段 // 获取卡券组件回调的对象
getCardActiveObjFun(val) {
if (val.hasOwnProperty('cardType')) {
this.form.cardType = val.cardType;
}
if (val.coupCardId && this.isAdd) {
this.form.virtualStock = val.couponStock || 0;
this.form.proReferId = val.coupCardId || '';
this.form.proName = val.cardName || '';
}
},
// 添加时间段
addTimeRange() {
let length = this.timeRangeList.length;
if (length >= 5) {
this.$tips({ type: 'warning', message: '最多五个时间段' });
return;
}
this.$set(this.timeRangeList, length, { timeRange: ['', ''] });
},
// 删除时间段
delTimeRange(index) {
this.timeRangeList.splice(index, 1);
},
releaseType: this.form.releaseType || 1, // 布发状态 1立即 2定时 submit(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.submitService();
}
});
},
showStore: this.sendChildData.storeType || 0, // 显示门店 0所有 1部分分组 2部分门店 submitService() {
if (!this.form.proReferId) {
this.$tips({ type: 'warning', message: '请选择优惠券' });
return;
}
let params = {
integralMallProId: this.form.integralMallProId || '',
proType: 1, // 商品类型 1 优惠券，2礼品，3实物
proName: this.form.proName || '', // 商品名字，优惠券就是所选券的名字。
proReferId: this.form.proReferId || '', // 关联的卡券或者礼品
proShowStatus: this.form.proShowStatus || 1, // 商品显示状态 1:上架状态就显示 2:兑换状态下显示
integralCost: this.form.integralCost || 0, // 积分费用
cashCost: this.form.cashCost || 0, // 现金费用，两位小数
costValue: this.form.costValue || 0,
limitTimes: this.isLimitTimes ? this.form.limitTimes : -1, // 次数限制
memberGrade: this.form.memberGradeArr.length ? this.form.memberGradeArr.join(',') : '', // 适用会员，多个，逗号拼接。
exchangeDateType: this.form.exchangeDateType || 1, // 兑换日期1:全部 2:固定日期 3:每月 4:每周
exchangeTimeType: this.form.exchangeTimeType || 1, // 兑换时间类型 1:全部 2:部分时段
releaseType: this.form.releaseType || 1, // 布发状态 1立即 2定时
virtualStock: this.form.virtualStock || 0, //库存 showStore: this.sendChildData.storeType || 0, // 显示门店 0所有 1部分分组 2部分门店
cardType :this.form.cardType
}
console.log(22222,params)
// 判断 兑换日期 virtualStock: this.form.virtualStock || 0, //库存
if (params.exchangeDateType === 2) { cardType: this.form.cardType
if (this.form.exchangeFixDate && this.form.exchangeFixDate[0]) { };
params.exchangeFixDateBegin = formateDateTimeByType(this.form.exchangeFixDate[0], 'yyyy-MM-dd-HH-mm-ss');
params.exchangeFixDateEnd = formateDateTimeByType(this.form.exchangeFixDate[1], 'yyyy-MM-dd-HH-mm-ss');
} else {
this.$tips({ type: 'warning', message: '兑换固定日期不能为空' });
return;
}
} else if (params.exchangeDateType === 3) {
if (this.form.exchangeDateDayArr.length > 0) {
params.exchangeDateDay = this.form.exchangeDateDayArr.join(',');
} else {
this.$tips({ type: 'warning', message: '兑换每月日期不能为空' });
return;
}
} else if (params.exchangeDateType === 4) {
if (this.form.exchangeDateWeekArr.length > 0) {
params.exchangeDateWeek = this.form.exchangeDateWeekArr.join(',');
} else {
this.$tips({ type: 'warning', message: '兑换每周日期不能为空' });
return;
}
}
// 判断 兑换时段 // 判断 兑换日期
if (params.exchangeTimeType === 2) { if (params.exchangeDateType === 2) {
let list = []; if (this.form.exchangeFixDate && this.form.exchangeFixDate[0]) {
let flag = false; params.exchangeFixDateBegin = formateDateTimeByType(this.form.exchangeFixDate[0], 'yyyy-MM-dd-HH-mm-ss');
let arr = []; params.exchangeFixDateEnd = formateDateTimeByType(this.form.exchangeFixDate[1], 'yyyy-MM-dd-HH-mm-ss');
console.log(JSON.stringify(this.timeRangeList)) } else {
this.timeRangeList.forEach(v => { this.$tips({ type: 'warning', message: '兑换固定日期不能为空' });
if (!v.timeRange || !v.timeRange[0]) { return;
flag = true; }
} else { } else if (params.exchangeDateType === 3) {
arr.push(v.timeRange); if (this.form.exchangeDateDayArr.length > 0) {
list.push(v.timeRange[0] + '-' + v.timeRange[1]); params.exchangeDateDay = this.form.exchangeDateDayArr.join(',');
} } else {
}) this.$tips({ type: 'warning', message: '兑换每月日期不能为空' });
if (flag) { return;
this.$tips({ type: 'warning', message: '部分时段未填写完整' }); }
return; } else if (params.exchangeDateType === 4) {
} if (this.form.exchangeDateWeekArr.length > 0) {
// list.sort((a,b) => {a.timeRange[0] - b.timeRange[0]}) params.exchangeDateWeek = this.form.exchangeDateWeekArr.join(',');
// 如果数组为1的话也要传 #分割 } else {
if (list.length === 1) { this.$tips({ type: 'warning', message: '兑换每周日期不能为空' });
params.timeZones = list[0] + '#'; return;
} else { }
params.timeZones = list.length ? list.join('#') : ''; }
}
let breakFlag = false; // 判断 兑换时段
for (var i = 0; i < arr.length; i++) { if (params.exchangeTimeType === 2) {
if (breakFlag) { let list = [];
break; let flag = false;
} let arr = [];
var p1 = arr[i]; this.timeRangeList.forEach(v => {
for (var j = i + 1; j < arr.length; j++) { if (!v.timeRange || !v.timeRange[0]) {
var p2 = arr[j]; flag = true;
console.log(p1, p2); } else {
if ((p2[0] > p1[0] && p2[0] < p1[1]) || (p2[1] > p1[0] && p2[1] < p1[1]) || (p1[0] > p2[0] && p1[0] < p2[1]) || (p1[1] > p2[0] && p1[1] < p2[1])) { arr.push(v.timeRange);
breakFlag = true; list.push(v.timeRange[0] + '-' + v.timeRange[1]);
break; }
} });
} if (flag) {
} this.$tips({ type: 'warning', message: '部分时段未填写完整' });
if (breakFlag) { return;
this.$tips({ type: 'warning', message: "兑换时段之间不允许出现时间交叠" }); }
return; // list.sort((a,b) => {a.timeRange[0] - b.timeRange[0]})
} // 如果数组为1的话也要传 #分割
} if (list.length === 1) {
params.timeZones = list[0] + '#';
} else {
params.timeZones = list.length ? list.join('#') : '';
}
// 判断发送时间 let breakFlag = false;
if (params.releaseType === 2) { for (let i = 0; i < arr.length; i++) {
if (this.form.limitTimeBegin) { if (breakFlag) {
params.limitTimeBegin = formateDateTimeByType(this.form.limitTimeBegin, 'yyyy-MM-dd-HH-mm-ss'); break;
} else { }
this.$tips({ type: 'warning', message: '定时发布时间不能为空' }); let p1 = arr[i];
return; for (let j = i + 1; j < arr.length; j++) {
} let p2 = arr[j];
if ((p2[0] > p1[0] && p2[0] < p1[1]) || (p2[1] > p1[0] && p2[1] < p1[1]) || (p1[0] > p2[0] && p1[0] < p2[1]) || (p1[1] > p2[0] && p1[1] < p2[1])) {
breakFlag = true;
break;
} }
}
}
if (breakFlag) {
this.$tips({ type: 'warning', message: '兑换时段之间不允许出现时间交叠' });
return;
}
}
// 判断发送时间
if (params.releaseType === 2) {
if (this.form.limitTimeBegin) {
params.limitTimeBegin = formateDateTimeByType(this.form.limitTimeBegin, 'yyyy-MM-dd-HH-mm-ss');
} else {
this.$tips({ type: 'warning', message: '定时发布时间不能为空' });
return;
}
}
// 门店分组 // 门店分组
console.log(this.sendChildData) if (this.sendChildData.storeType === 1) {
if (this.sendChildData.storeType === 1) { if (this.sendChildData.storeGroupIds) {
if (this.sendChildData.storeGroupIds) { params.storeGroupIds = this.sendChildData.storeGroupIds || '';
params.storeGroupIds = this.sendChildData.storeGroupIds || ''; } else {
} else { this.$tips({ type: 'warning', message: '门店分组不能为空' });
this.$tips({ type: 'warning', message: '门店分组不能为空' }); return;
return; }
} } else if (this.sendChildData.storeType === 2) {
} else if (this.sendChildData.storeType === 2) { if (this.sendChildData.storeIds.length) {
if (this.sendChildData.storeIds.length) { params.storeIds = this.sendChildData.storeIds.map(v => v.storeId).join(',');
params.storeIds = this.sendChildData.storeIds.map(v => v.storeId).join(','); } else {
} else { params.storeIds = '';
params.storeIds = ''; this.$tips({ type: 'warning', message: '部分门店不能为空' });
this.$tips({ type: 'warning', message: '部分门店不能为空' }); return;
return;
}
}
createIntegralProService(params).then(res => {
if (res.errorCode === 0) {
this.$router.push('/coupon');
this.$tips({ type: 'success', message: '操作成功' });
} else {
this.$tips({ type: 'error', message: '操作失败' });
}
console.log(res);
}).catch(err => {
this.$tips({ type: 'error', message: '操作失败' });
})
} }
}
createIntegralProService(params)
.then(res => {
if (res.errorCode === 0) {
this.$router.push('/coupon');
this.$tips({ type: 'success', message: '操作成功' });
} else {
this.$tips({ type: 'error', message: '操作失败' });
}
})
.catch(err => {
this.$tips({ type: 'error', message: '操作失败' });
});
} }
} }
\ No newline at end of file };
src/views/mall/coupon/info.vue
<template> <template>
<el-form :model="form" ref="form" :rules="rules" label-width="120px"> <el-form :model="form" ref="form" :rules="rules" label-width="120px">
<div class="dm-form__wrap"> <div class="dm-form__wrap">
<h3 class="dm-title__label">选择卡券</h3> <h3 class="dm-title__label">选择卡券</h3>
<div style="margin-bottom:20px;"> <div style="margin-bottom:20px;">
<card-temp ref="cardTemp" cardType="0,1" :disabled="isEdit || isInfo" pbSize="pb15" :activeId.sync="form.proReferId" @emitActiveObj="getCardActiveObjFun" :showPagination="false" :cardLimitType="3"></card-temp> <card-temp ref="cardTemp" cardType="0,1" :disabled="isEdit || isInfo" pbSize="pb15" :activeId.sync="form.proReferId" @emitActiveObj="getCardActiveObjFun" :showPagination="false" :cardLimitType="3"></card-temp>
</div> </div>
</div> </div>
<div class="dm-form__wrap"> <div class="dm-form__wrap">
<h3 class="dm-title__label">优惠券信息</h3> <h3 class="dm-title__label">优惠券信息</h3>
<el-form-item prop="integralCost" label="积分费用"> <el-form-item prop="integralCost" label="积分费用">
<el-input-number controls-position="right" :disabled="isEdit || isInfo" v-model="form.integralCost" class="w300" :precision="0" :min="0"></el-input-number> <el-input-number controls-position="right" :disabled="isEdit || isInfo" v-model="form.integralCost" class="w300" :precision="0" :min="0"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item prop="cashCost" label="现金费用"> <el-form-item prop="cashCost" label="现金费用">
<el-input-number controls-position="right" :disabled="isEdit || isInfo" v-model="form.cashCost" class="w300" :precision="2" :min="0"></el-input-number> <el-input-number controls-position="right" :disabled="isEdit || isInfo" v-model="form.cashCost" class="w300" :precision="2" :min="0"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item prop="limitTimes" label="次数限制"> <el-form-item prop="limitTimes" label="次数限制">
<el-checkbox :disabled="isInfo" v-model="isLimitTimes"> 每个会员限制兑换 <el-checkbox :disabled="isInfo" v-model="isLimitTimes"> 每个会员限制兑换 </el-checkbox>
</el-checkbox>
<el-input-number controls-position="right" :disabled="isInfo" v-model="form.limitTimes" class="w100" :precision="0" :min="0"></el-input-number> 次 <el-input-number controls-position="right" :disabled="isInfo" v-model="form.limitTimes" class="w100" :precision="0" :min="0"></el-input-number> 次
</el-form-item> </el-form-item>
<el-form-item prop="memberGradeArr" label="适用会员"> <el-form-item prop="memberGradeArr" label="适用会员">
...@@ -34,12 +33,12 @@ ...@@ -34,12 +33,12 @@
<el-radio-group v-model="form.exchangeDateType" style="line-height:inherit;"> <el-radio-group v-model="form.exchangeDateType" style="line-height:inherit;">
<el-radio :label="1">全部日期</el-radio> <el-radio :label="1">全部日期</el-radio>
<el-radio :label="2">固定日期</el-radio> <el-radio :label="2">固定日期</el-radio>
<el-radio :label="3">每月</el-radio> <el-radio :label="3">每月</el-radio>
<el-radio :label="4">每周</el-radio> <el-radio :label="4">每周</el-radio>
</el-radio-group> </el-radio-group>
<div class=""> <div class="">
<el-date-picker class="w300" v-model="form.exchangeFixDate" v-if="form.exchangeDateType === 2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> <el-date-picker class="w300" v-model="form.exchangeFixDate" v-if="form.exchangeDateType === 2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
<el-select class="w300" size="small" v-model="form.exchangeDateDayArr" v-if="form.exchangeDateType === 3" multiple placeholder="请选择"> <el-select class="w300" size="small" v-model="form.exchangeDateDayArr" v-if="form.exchangeDateType === 3" multiple placeholder="请选择">
<el-option v-for="item in monthOptions" :key="item" :label="item" :value="item"></el-option> <el-option v-for="item in monthOptions" :key="item" :label="item" :value="item"></el-option>
</el-select> </el-select>
<el-select class="w300" size="small" v-model="form.exchangeDateWeekArr" v-if="form.exchangeDateType === 4" multiple placeholder="请选择"> <el-select class="w300" size="small" v-model="form.exchangeDateWeekArr" v-if="form.exchangeDateType === 4" multiple placeholder="请选择">
...@@ -54,14 +53,13 @@ ...@@ -54,14 +53,13 @@
<el-radio :label="2" class="vertical-middle">部分时段</el-radio> <el-radio :label="2" class="vertical-middle">部分时段</el-radio>
</el-radio-group> </el-radio-group>
<div v-show="form.exchangeTimeType === 2" class=""> <div v-show="form.exchangeTimeType === 2" class="">
<p v-for="(v,i) in timeRangeList" :key="i" class="pt8"> <p v-for="(v, i) in timeRangeList" :key="i" class="pt8">
<el-time-picker :disabled="form.exchangeTimeType === 1" class="vertical-middle w300" is-range v-model="v.timeRange" value-format="HH:mm" format="HH:mm" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker> <el-time-picker :disabled="form.exchangeTimeType === 1" class="vertical-middle w300" is-range v-model="v.timeRange" value-format="HH:mm" format="HH:mm" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
<el-button v-if="i" class="vertical-middle" type="text" @click="delTimeRange(i)">删除</el-button> <el-button v-if="i" class="vertical-middle" type="text" @click="delTimeRange(i)">删除</el-button>
</p> </p>
<span class="gray fz12 vertical-top">请使用24小时制输入时间，格式如11:00至14:30</span> <span class="gray fz12 vertical-top">请使用24小时制输入时间，格式如11:00至14:30</span>
<p><el-button type="text" @click="addTimeRange">添加时间段</el-button></p> <p><el-button type="text" @click="addTimeRange">添加时间段</el-button></p>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item prop="proShowStatus" label="显示状态"> <el-form-item prop="proShowStatus" label="显示状态">
<el-radio-group v-model="form.proShowStatus"> <el-radio-group v-model="form.proShowStatus">
...@@ -74,13 +72,13 @@ ...@@ -74,13 +72,13 @@
<el-radio :label="1">立即发布</el-radio> <el-radio :label="1">立即发布</el-radio>
<el-radio :label="2">定时发布</el-radio> <el-radio :label="2">定时发布</el-radio>
</el-radio-group> </el-radio-group>
<div class="pt8" v-if="form.releaseType ===2"> <div class="pt8" v-if="form.releaseType === 2">
<el-date-picker v-model="form.limitTimeBegin" type="datetime" placeholder="选择日期时间"></el-date-picker> <el-date-picker v-model="form.limitTimeBegin" type="datetime" placeholder="选择日期时间"></el-date-picker>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
<div class="btn-wrap_fixed" :class="{'on':asideShow}"> <div class="btn-wrap_fixed" :class="{ on: asideShow }">
<el-button type="primary" @click="submit('form')" v-if="!isInfo">{{isAdd?'确认新增':'确认编辑'}}</el-button> <el-button type="primary" @click="submit('form')" v-if="!isInfo">{{ isAdd ? '确认新增' : '确认编辑' }}</el-button>
<el-button @click="$router.go(-1)">返 回</el-button> <el-button @click="$router.go(-1)">返 回</el-button>
</div> </div>
</el-form> </el-form>
......
src/views/mall/coupon/list.vue
<template> <template>
<section class="dm-wrap"> <section class="dm-wrap">
<div class="pb22 clearfix"> <div class="pb22 clearfix">
<el-button class="fr" type="primary" @click="$router.push('/coupon/info')">新增优惠券</el-button> <el-button class="fr" type="primary" @click="$router.push('/coupon/info')">新增优惠券</el-button>
</div> </div>
<el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading"> <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading">
<el-table-column label="商品" align="left" prop="timesStatus" min-width="140"> <el-table-column label="商品" align="left" prop="timesStatus" min-width="140">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="ellipsis-100" > <div class="ellipsis-100">
<img class="vertical-middle table__avatar--gift" :src="filterAvatar(scope.row.cardType)" width="40" height="40" /> <!-- <img class="vertical-middle table__avatar--gift" :src="filterAvatar(scope.row.cardType)" width="40" height="40" /> -->
<div class="inline-block vertical-middle"> <img class="vertical-middle table__avatar--gift" v-if="scope.row.cardType === 0" src="../../../../static/img/credit_daijin_icon.png" width="40" height="40" />
<p class="table-name--ellipsis">{{scope.row.proTitle || '--'}}</p> <img class="vertical-middle table__avatar--gift" v-if="scope.row.cardType === 1" src="../../../../static/img/credit_zhekou_icon.png" width="40" height="40" />
<p class="fz13 gray" style="line-height:18px">{{scope.row.proSubTitle || '--'}}</p> <img class="vertical-middle table__avatar--gift" v-if="scope.row.cardType === 1" src="../../../../static/img/credit_duihuan_icon.png" width="40" height="40" />
<div class="inline-block vertical-middle">
<p class="table-name--ellipsis">{{ scope.row.proTitle || '--' }}</p>
<p class="fz13 gray" style="line-height:18px">{{ scope.row.proSubTitle || '--' }}</p>
</div>
</div> </div>
</div> </template>
</template> </el-table-column>
</el-table-column> <el-table-column label="积分费用" align="left" prop="integralCost">
<el-table-column label="积分费用" align="left" prop="integralCost"> <template slot-scope="scope">
<template slot-scope="scope"> <updateCount :model="scope.row" theType="integralCost" typeName="积分" @refresh="getPageCardsList"></updateCount>
<updateCount :model="scope.row" theType="integralCost" typeName="积分" @refresh="getPageCardsList"></updateCount> </template>
</template> </el-table-column>
</el-table-column> <el-table-column label="现金费用" align="left" prop="cashCost">
<el-table-column label="现金费用" align="left" prop="cashCost"> <template slot-scope="scope">
<template slot-scope="scope">
<updateCount :model="scope.row" theType="cashCost" :precision="2" typeName="元" @refresh="getPageCardsList"></updateCount> <updateCount :model="scope.row" theType="cashCost" :precision="2" typeName="元" @refresh="getPageCardsList"></updateCount>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="库存" align="left" prop="virtualStock"> <el-table-column label="库存" align="left" prop="virtualStock">
<template slot-scope="scope"> <template slot-scope="scope">
<updateCount :model="scope.row" theType="virtualStock" @refresh="getPageCardsList"></updateCount> <updateCount :model="scope.row" theType="virtualStock" @refresh="getPageCardsList"></updateCount>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="兑换次数" align="left" prop="allExchangeNumber"> <el-table-column label="兑换次数" align="left" prop="allExchangeNumber">
<template slot-scope="scope"> <template slot-scope="scope">
<span @click="$router.push('/coupon/exchange/'+scope.row.integralMallProId)" class="blue">{{scope.row.allExchangeNumber}}</span> <span @click="$router.push('/coupon/exchange/' + scope.row.integralMallProId)" class="blue">{{ scope.row.allExchangeNumber }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="状态" align="left" prop="status" min-width="100px"> <el-table-column label="状态" align="left" prop="status" min-width="100px">
<template slot-scope="scope" > <template slot-scope="scope">
<span v-html="renderStatus(scope.row).html"></span> <span v-html="renderStatus(scope.row).html"></span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="显示状态" align="center" prop="proShowStatus"> <el-table-column label="显示状态" align="center" prop="proShowStatus">
<template slot-scope="scope" > <template slot-scope="scope">
{{renderShowStatus(scope.row)}} {{ renderShowStatus(scope.row) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="left" min-width="160px"> <el-table-column label="操作" align="left" min-width="160px">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" @click="getLink(scope.row.integralMallProId)">推广</el-button> <el-button type="text" @click="getLink(scope.row.integralMallProId)">推广</el-button>
<el-button type="text" @click="$router.push('/coupon/info/'+scope.row.integralMallProId)">编辑</el-button> <el-button type="text" @click="$router.push('/coupon/info/' + scope.row.integralMallProId)">编辑</el-button>
<dm-delete @confirm="delData(scope.row)" tips="是否删除该优惠券?"> <dm-delete @confirm="delData(scope.row)" tips="是否删除该优惠券?">
<el-button type="text">删除</el-button> <el-button type="text">删除</el-button>
</dm-delete> </dm-delete>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination> <el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
<!-- 推广 --> <!-- 推广 -->
<eqCodeDialog :modalData="modalData"></eqCodeDialog> <eqCodeDialog :modalData="modalData"></eqCodeDialog>
</section> </section>
</template> </template>
<script> <script>
import { getPageCardsList, deleteProService } from '@/service/api/mallApi.js'; import { getPageCardsList, deleteProService } from '@/service/api/mallApi.js';
import updateCount from '../common/update-count'; import updateCount from '../common/update-count';
import {formateDateTimeByType,format} from '@/utils/index.js'; import { formateDateTimeByType, format } from '@/utils/index.js';
import eqCodeDialog from '../common/eqCode.vue' import eqCodeDialog from '../common/eqCode.vue';
import request from '../../../api/request.js' import request from '../../../api/request.js';
export default { export default {
name: 'coupon-list', name: 'coupon-list',
components: { components: {
updateCount, updateCount,
eqCodeDialog eqCodeDialog
}, },
data () { data() {
return { return {
uuid:'', uuid: '',
defaultAvatar:require('../../../assets/img/head_default.png'), // defaultAvatar: require('../../../assets/img/head_default.png'),
daijinAvatar:require('../../../assets/img/credit_daijin_icon.png'), // daijinAvatar: require('../../../assets/img/credit_daijin_icon.png'),
zhekouAvatar:require('../../../assets/img/credit_zhekou_icon.png'), // zhekouAvatar: require('../../../assets/img/credit_zhekou_icon.png'),
duihuanAvatar:require('../../../assets/img/credit_duihuan_icon.png'), // duihuanAvatar: require('../../../assets/img/credit_duihuan_icon.png'),
loading:false, defaultAvatar: '../../../../static/img/head_default.png',
tableList:[], daijinAvatar: '../../../../static/img/credit_daijin_icon.png',
listParams:{ zhekouAvatar: '../../../../static/img/credit_zhekou_icon.png',
currentPage:1, duihuanAvatar: '../../../../static/img/credit_duihuan_icon.png',
pageSize:20 loading: false,
}, tableList: [],
total:0, listParams: {
modalData:{ currentPage: 1,
show:false, pageSize: 20
imgUrl:'',
loading:false
},
}
},
created() {
this.$store.commit('mutations_breadcrumb',[{name:'积分商城'},{name:'优惠券',path:''}]);
this.getPageCardsList();
setTimeout(_ => {
this.uuid = 'asdaqwerasdaqwerasdaqwerasdaqwer'
},300)
},
methods: {
filterAvatar(val){
return (val === 0 ? this.daijinAvatar : (val === 1 ? this.zhekouAvatar: this.duihuanAvatar));
}, },
renderStatus(item) { total: 0,
modalData: {
var _releaseType = item.releaseType ; show: false,
//上架日期 imgUrl: '',
var _limit_time_begin = item.limitTimeBegin ; loading: false
//库存 }
var _virtual_stock = item.virtualStock ; };
//兑换日期类型1:全部 2:固定日期 3:每月 4:每周 },
// 显示状态的优先级：已过期＞无库存＞定时发布＞未在兑换时间 created() {
var _exchange_date_type = item.exchangeDateType ; this.$store.commit('mutations_breadcrumb', [{ name: '积分商城' }, { name: '优惠券', path: '' }]);
var dhzt_show_html ='<span class="dm-status--primary">正常</span>' this.getPageCardsList();
var dhzt_show = '正常'; setTimeout(_ => {
//判断是否在兑换日期内 - 未在兑换时间 this.uuid = 'asdaqwerasdaqwerasdaqwerasdaqwer';
if(_virtual_stock<=0) { }, 300);
dhzt_show_html = '<span class="dm-status--error">无库存</span>'; },
dhzt_show = "无库存" ; methods: {
// filterAvatar(val) {
// return val === 0 ? this.daijinAvatar : val === 1 ? this.zhekouAvatar : this.duihuanAvatar;
// },
renderStatus(item) {
var _releaseType = item.releaseType;
//上架日期
var _limit_time_begin = item.limitTimeBegin;
//库存
var _virtual_stock = item.virtualStock;
//兑换日期类型1:全部 2:固定日期 3:每月 4:每周
// 显示状态的优先级：已过期＞无库存＞定时发布＞未在兑换时间
var _exchange_date_type = item.exchangeDateType;
var dhzt_show_html = '<span class="dm-status--primary">正常</span>';
var dhzt_show = '正常';
//判断是否在兑换日期内 - 未在兑换时间
if (_virtual_stock <= 0) {
dhzt_show_html = '<span class="dm-status--error">无库存</span>';
dhzt_show = '无库存';
}
if (_exchange_date_type == 2) {
//exchangeDateType 1:全部 2:固定日期 3:每月 4:每周
if (!(new Date().getTime() >= item.exchangeFixDateBegin && new Date().getTime() <= item.exchangeFixDateEnd + 1000 * 60 * 60 * 24)) {
dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>';
dhzt_show = '未在兑换时间';
} }
if(_exchange_date_type==2) {//exchangeDateType 1:全部 2:固定日期 3:每月 4:每周 }
// console.log(item.cardName,!(new Date().getTime() >= item.exchangeFixDateBegin && new Date().getTime() <= (item.exchangeFixDateEnd + (1000*60*60*24) ))) if (_exchange_date_type == 3) {
// console.log(item.cardName,new Date().getTime(),item.exchangeFixDateBegin,item.exchangeFixDateEnd) dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>';
if(!((new Date().getTime() >= item.exchangeFixDateBegin && new Date().getTime() <= (item.exchangeFixDateEnd + (1000*60*60*24) )))) { dhzt_show = '未在兑换时间';
dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>'; let _exchange_date_day = item.exchangeDateDay;
dhzt_show = '未在兑换时间'; let day = new Date().getDate();
let _arr = _exchange_date_day.split(',');
} _arr.map(v => {
if (day == parseInt(v)) {
} dhzt_show_html = '<span class="dm-status--primary">正常</span>';
if(_exchange_date_type==3) { dhzt_show = '正常';
dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>'; }
dhzt_show = '未在兑换时间'; });
var _exchange_date_day = item.exchangeDateDay ; }
var day = new Date().getDate() ;
var _arr = _exchange_date_day.split(",") ;
_arr.map(v => {
if(day == parseInt(v)) {
dhzt_show_html = '<span class="dm-status--primary">正常</span>' ;
dhzt_show = '正常';
}
})
}
if(_exchange_date_type==4) { if (_exchange_date_type == 4) {
var _exchange_date_week = item.exchangeDateWeek ; let _exchange_date_week = item.exchangeDateWeek;
var week = new Date().getDay() ; let week = new Date().getDay();
if(week == 0) { if (week == 0) {
week =7 ; week = 7;
} }
if(_exchange_date_week.indexOf(week) == -1) { if (_exchange_date_week.indexOf(week) == -1) {
dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>'; dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>';
dhzt_show = '未在兑换时间'; dhzt_show = '未在兑换时间';
} }
} }
//exchangeTimeType 兑换时间类型 1:全部 2:部分时段 //exchangeTimeType 兑换时间类型 1:全部 2:部分时段
console.log('兑换时间类型'+item.cardName,item.exchangeTimeType==2, item.exchangeTimeList , dhzt_show ) if (item.exchangeTimeType == 2 && item.exchangeTimeList && (dhzt_show == '无库存' || dhzt_show == '正常')) {
if(item.exchangeTimeType == 2 && item.exchangeTimeList && (dhzt_show == '无库存'||dhzt_show == '正常')) { dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>';
dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>'; dhzt_show = '未在兑换时间';
dhzt_show = '未在兑换时间'; for (let k = 0; k < item.exchangeTimeList.length; k++) {
console.log('时间类型',item.exchangeTimeList) let _o = item.exchangeTimeList[k];
for(var k=0;k<item.exchangeTimeList.length;k++) { let start = _o.exchangeTimeBeginNumber;
var _o = item.exchangeTimeList[k] ; let end = _o.exchangeTimeEndNumber;
var start = _o.exchangeTimeBeginNumber ; let _now = format(new Date(), 'hhmm');
var end = _o.exchangeTimeEndNumber ; if (_now >= start && _now <= end) {
var _now = format(new Date(),'hhmm') ; dhzt_show_html = '<span class="dm-status--primary">正常</span>';
if(_now >= start && _now <= end) { dhzt_show = '正常';
dhzt_show_html = '<span class="dm-status--primary">正常</span>'; break;
dhzt_show = '正常'; }
break ; }
} }
}
}
//定时发布 //定时发布
if(_releaseType == 2 && item.status==2 && new Date().getTime() < _limit_time_begin) { if (_releaseType == 2 && item.status == 2 && new Date().getTime() < _limit_time_begin) {
dhzt_show_html = `<span class="dm-status--success">定时发布<br/>${formateDateTimeByType(new Date(_limit_time_begin),"yyyy-MM-dd-hh-mm-ss")}</span>`; dhzt_show_html = `<span class="dm-status--success">定时发布<br/>${formateDateTimeByType(new Date(_limit_time_begin), 'yyyy-MM-dd-hh-mm-ss')}</span>`;
dhzt_show = '定时发布'; dhzt_show = '定时发布';
} }
if (item.status == 1) {
dhzt_show_html = '<span class="dm-status--info">已下架</span>';
dhzt_show = '已下架';
}
if(item.status==1) { return {
dhzt_show_html = '<span class="dm-status--info">已下架</span>'; text: dhzt_show,
dhzt_show = "已下架" ; html: dhzt_show_html
} };
},
return { renderShowStatus(item) {
text:dhzt_show, //商品显示状态 1:上架状态就显示 2:兑换状态下显示
html:dhzt_show_html var dhzt_show = this.renderStatus(item).text;
}; var pro_show_status = item.proShowStatus;
}, var proShowStatus = '不显示';
renderShowStatus(item) { // var mall_show_status = "mall_show_no" ;
//商品显示状态 1:上架状态就显示 2:兑换状态下显示 if (item.status == 2) {
var dhzt_show = this.renderStatus(item).text; //releaseType 1正常(下架) 0删除 2上架
var pro_show_status = item.proShowStatus ; if ((item.releaseType == 1 || (item.releaseType == 2 && new Date().getTime() >= (item.limitTimeBegin || 0))) && (pro_show_status == 1 || (pro_show_status == 2 && (dhzt_show == '正常' || dhzt_show == '无库存')))) {
var proShowStatus = "不显示" ; proShowStatus = '显示';
// var mall_show_status = "mall_show_no" ; // mall_show_status = "mall_show_ok" ;
if(item.status==2) {//releaseType 1正常(下架) 0删除 2上架
if((item.releaseType==1 || (item.releaseType == 2 && new Date().getTime() >= (item.limitTimeBegin || 0)) ) && ( pro_show_status==1 || (pro_show_status==2 && (dhzt_show=="正常" || dhzt_show=='无库存'))) ) {
proShowStatus = "显示" ;
// mall_show_status = "mall_show_ok" ;
}
} }
return proShowStatus; }
}, return proShowStatus;
search() { },
this.listParams.currentPage = 1; search() {
this.getPageCardsList(); this.listParams.currentPage = 1;
}, this.getPageCardsList();
handleSizeChange(val) { },
this.listParams.pageSize = val; handleSizeChange(val) {
this.getPageCardsList(); this.listParams.pageSize = val;
}, this.getPageCardsList();
handleCurrentChange(val) { },
this.listParams.currentPage = val; handleCurrentChange(val) {
this.getPageCardsList(); this.listParams.currentPage = val;
}, this.getPageCardsList();
async getPageCardsList() { },
this.loading = true; async getPageCardsList() {
let res = await getPageCardsList(this.listParams); this.loading = true;
this.tableList = []; let res = await getPageCardsList(this.listParams);
let result = res.result.rows || []; this.tableList = [];
result.map(v => { let result = res.result.rows || [];
v.integralCostFlag = false; result.map(v => {
v.cashCostFlag = false; v.integralCostFlag = false;
v.virtualStockFlag = false; v.cashCostFlag = false;
v.allExchangeNumberFlag = false; v.virtualStockFlag = false;
this.tableList.push(v); v.allExchangeNumberFlag = false;
}) this.tableList.push(v);
this.total = res.result.total; });
this.loading = false; this.total = res.result.total;
}, this.loading = false;
// 删除 },
delData(row) { // 删除
deleteProService({proId:row.integralMallProId}).then(res => { delData(row) {
this.$tips({type: 'success',message: '删除成功!'}); deleteProService({ proId: row.integralMallProId })
.then(res => {
this.$tips({ type: 'success', message: '删除成功!' });
this.getPageCardsList(); this.getPageCardsList();
}).catch(err => {
this.$tips({type: 'error',message: '删除失败!'});
}) })
}, .catch(err => {
// 推广 this.$tips({ type: 'error', message: '删除失败!' });
getLink(mallProId){ });
this.modalData.loading=true },
let params={ // 推广
integralMallProId:mallProId, getLink(mallProId) {
type:"card" this.modalData.loading = true;
let params = {
integralMallProId: mallProId,
type: 'card'
};
this.modalData.show = true;
request.get('/api-integral-mall/get-qRCode', { params }).then(res => {
if (res.data.errorCode === 0) {
this.modalData.show = true;
this.modalData.pageUrl = res.data.result.page;
this.modalData.imgUrl = res.data.result.url;
this.modalData.loading = false;
} else {
this.$message.error(res.data.message);
} }
this.modalData.show=true });
request.get('/api-integral-mall/get-qRCode',{params}).then(res => {
if(res.data.errorCode===0){
this.modalData.show=true
this.modalData.pageUrl=res.data.result.page
this.modalData.imgUrl=res.data.result.url
this.modalData.loading=false
}else{
this.$message.error(res.data.message)
}
})
},
} }
} }
};
</script> </script>
src/views/mall/gift/exchange.vue
<template> <template>
<section class="dm-wrap" v-loading="loading"> <section class="dm-wrap" v-loading="loading">
<div class="pb22 clearfix"> <div class="pb22 clearfix">
<el-date-picker class="w250" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="getPageExchangeLogsList"></el-date-picker> <el-date-picker class="w250" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="getPageExchangeLogsList"></el-date-picker>
<el-select class="vertical-middle w150" v-model="listParams.status" placeholder="选择状态" @change="getPageExchangeLogsList"> <el-select class="vertical-middle w150" v-model="listParams.status" placeholder="选择状态" @change="getPageExchangeLogsList">
<el-option v-for="v in statusOptions" :key="v.value" :label="v.label" :value="v.value"></el-option> <el-option v-for="v in statusOptions" :key="v.value" :label="v.label" :value="v.value"></el-option>
</el-select> </el-select>
<el-select v-if="isWxExchange" class="vertical-middle w150" v-model="listParams.useStatus" placeholder="选择状态" @change="getPageExchangeLogsList"> <el-select v-if="isWxExchange" class="vertical-middle w150" v-model="listParams.useStatus" placeholder="选择状态" @change="getPageExchangeLogsList">
<el-option v-for="v in useStatusOptions" :key="v.value" :label="v.label" :value="v.value"></el-option> <el-option v-for="v in useStatusOptions" :key="v.value" :label="v.label" :value="v.value"></el-option>
</el-select> </el-select>
<el-input v-model="listParams.memberInfo" class="w300" :placeholder="isWxExchange?'输入姓名/昵称/手机号':'输入流水号/姓名/会员卡号'" clearable @change="getPageExchangeLogsList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input> <el-input v-model="listParams.memberInfo" class="w300" :placeholder="isWxExchange ? '输入姓名/昵称/手机号' : '输入流水号/姓名/会员卡号'" clearable @change="getPageExchangeLogsList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
<el-button type="primary" class="fr" icon="iconfont icon-icon_yunxiazai fz14" @click="exportExcel"> 导出列表</el-button> <el-button type="primary" class="fr" icon="iconfont icon-icon_yunxiazai fz14" @click="exportExcel"> 导出列表</el-button>
</div> </div>
<el-table tooltipEffect="light" :data="tableList" style="width: 100%"> <el-table tooltipEffect="light" :data="tableList" style="width: 100%">
<el-table-column v-for="(v,i) in tableHeader" :align="v.align" :key="i" :prop="v.prop" :label="v.label"> <el-table-column v-for="(v, i) in tableHeader" :align="v.align" :key="i" :prop="v.prop" :label="v.label">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="v.formatter" v-html="v.formatter(scope.row)"></span> <span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
<component v-else-if="v.component" :is="v.component" :row="scope.row"></component> <component v-else-if="v.component" :is="v.component" :row="scope.row"></component>
<span v-else>{{scope.row[v.prop]}}</span> <span v-else>{{ scope.row[v.prop] }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="领取状态" align="left" width="100px" prop="status" v-if="isWxExchange"> <el-table-column label="领取状态" align="left" width="100px" prop="status" v-if="isWxExchange">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.status === 1?'未领取':'已领取'}}</span> <span>{{ scope.row.status === 1 ? '未领取' : '已领取' }}</span>
</template> </template> </el-table-column
</el-table-column>' >'
<el-table-column :label="isWxExchange?'使用状态':'状态'" align="left" width="100px"> <el-table-column :label="isWxExchange ? '使用状态' : '状态'" align="left" width="100px">
<template slot-scope="scope"> <template slot-scope="scope">
<p> <p>
<span v-if="isWxExchange" type="text">{{scope.row.useStatus === 5?'已使用':'未使用'}}</span> <span v-if="isWxExchange" type="text">{{ scope.row.useStatus === 5 ? '已使用' : '未使用' }}</span>
<span v-else type="text">{{filterStatus(scope.row.status)}}</span> <span v-else type="text">{{ filterStatus(scope.row.status) }}</span>
</p> </p>
<p> <p>
<el-button type="text" v-if="scope.row.status !== 1 && !isWxExchange" @click="queryExpress(scope.row)">查看物流</el-button> <el-button type="text" v-if="scope.row.status !== 1 && !isWxExchange" @click="queryExpress(scope.row)">查看物流</el-button>
<el-button type="text" v-else-if="scope.row.useStatus === 5 && isWxExchange"> <el-button type="text" v-else-if="scope.row.useStatus === 5 && isWxExchange">
<a target="_blank" :href="'/member/#/wechatmemberDetail?memberId='+scope.row.memberId">查看详情</a> <a target="_blank" :href="'/member/#/wechatmemberDetail?memberId=' + scope.row.memberId">查看详情</a>
</el-button> </el-button>
</p> </p>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination> <el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
<express :show.sync="expressShow" :id="expressId"></express> <express :show.sync="expressShow" :id="expressId"></express>
<vue-gic-export-excel :dataArr="tableList" :dialogVisible.sync="dialogVisible" :type="2" :excelUrl="excelUrl" :params="params" :projectName="projectName"></vue-gic-export-excel> <vue-gic-export-excel :dataArr="tableList" :dialogVisible.sync="dialogVisible" :type="2" :excelUrl="excelUrl" :params="params" :projectName="projectName"></vue-gic-export-excel>
</section> </section>
</template> </template>
<script> <script>
import {getPageExchangeLogsList,exportExchangeListExcel} from '@/service/api/mallApi.js'; import { getPageExchangeLogsList } from '@/service/api/mallApi.js';
import {formateDateTimeByType} from '@/utils/index.js'; import { formateDateTimeByType } from '@/utils/index.js';
import express from '../common/express'; import express from '../common/express';
import memberInfoCom from '../common/member-info'; import memberInfoCom from '../common/member-info';
export default { export default {
components: { components: {
express, express,
memberInfoCom memberInfoCom
},
data() {
return {
loading: false,
// defaultAvatar: require('../../../assets/img/head_default.png'),
defaultAvatar: ' ../../../../static/img/head_default.png ',
tableHeader: [
{
label: '兑换时间',
prop: 'createTime',
minWidth: '170',
align: 'left',
formatter(row) {
return formateDateTimeByType(row.createTime, 'yyyy-MM-dd-HH-mm-ss');
}
},
{ label: '流水号', prop: 'definedCode', minWidth: '100', align: 'left' },
{ label: '会员信息', prop: 'issuingQuantity', minWidth: '170', align: 'left', component: 'memberInfoCom' },
{ label: '消耗积分', prop: 'unitCostIntegral', width: '80', align: 'left' }
],
total: 0,
statusOptions: [],
useStatusOptions: [{ label: '所有使用状态', value: -1 }, { label: '已使用', value: 1 }, { label: '未使用', value: 2 }],
listParams: {
pageSize: 20,
currentPage: 1,
status: -1,
useStatus: -1,
memberInfo: '',
integralMallProId: this.$route.params.id,
beginTime: '',
endTime: ''
},
dateTime: ['', ''],
tableList: [],
expressId: '',
expressShow: false,
isWxExchange: this.$route.meta.type === 'wx',
// 导出数据控件
projectName: 'integral-mall', // 当前项目名
dialogVisible: false,
excelUrl: '/api-integral-mall/download-exchange-list-execl', // 下载数据的地址
params: {} // 传递的参数
};
},
created() {
if (this.isWxExchange) {
this.statusOptions = [{ label: '所有领取状态', value: -1 }, { label: '未领取', value: 1 }, { label: '已领取', value: 2 }];
this.$store.commit('mutations_breadcrumb', [{ name: '积分商城' }, { name: '礼品', path: '/gift' }, { name: '微信兑换券兑换记录', path: '' }]);
} else {
this.statusOptions = [{ label: '所有状态', value: -1 }, { label: '待发货', value: 1 }, { label: '已发货', value: 3 }];
this.$store.commit('mutations_breadcrumb', [{ name: '积分商城' }, { name: '礼品', path: '/gift' }, { name: '礼品兑换记录', path: '' }]);
}
this.getPageExchangeLogsList();
},
methods: {
filterStatus(status) {
let result = '--';
switch (status) {
case 0:
result = '已取消';
break;
case 1:
result = '待发货';
break;
case 3:
result = '已发货';
break;
}
return result;
}, },
data() { handleSizeChange(val) {
let _vm = this; this.listParams.pageSize = val;
return { this.getPageExchangeLogsList();
loading:false,
defaultAvatar:require('../../../assets/img/head_default.png'),
tableHeader:[
{label:'兑换时间',prop:'createTime',minWidth:'170',align:'left',formatter(row){
return formateDateTimeByType(row.createTime,'yyyy-MM-dd-HH-mm-ss');
}},
{label:'流水号',prop:'definedCode',minWidth:'100',align:'left'},
{label:'会员信息',prop:'issuingQuantity',minWidth:'170',align:'left',component:'memberInfoCom'},
{label:'消耗积分',prop:'unitCostIntegral',width:'80',align:'left'}
],
total:0,
statusOptions:[],
useStatusOptions:[{label:'所有使用状态',value:-1},{label:'已使用',value:1},{label:'未使用',value:2}],
listParams:{
pageSize: 20,
currentPage: 1,
status: -1,
useStatus: -1,
memberInfo: "",
integralMallProId: this.$route.params.id,
beginTime: "",
endTime: ""
},
dateTime:['',''],
tableList:[],
expressId:'',
expressShow:false,
isWxExchange:this.$route.meta.type === 'wx',
// 导出数据控件
projectName: 'integral-mall', // 当前项目名
dialogVisible:false,
excelUrl:'/api-integral-mall/download-exchange-list-execl', // 下载数据的地址
params:{}, // 传递的参数
};
}, },
created() { handleCurrentChange(val) {
if (this.isWxExchange) { this.listParams.currentPage = val;
this.statusOptions = [{label:'所有领取状态',value:-1},{label:'未领取',value:1},{label:'已领取',value:2}]; this.getPageExchangeLogsList();
this.$store.commit('mutations_breadcrumb',[{name:'积分商城'},{name:'礼品',path:'/gift'},{name:'微信兑换券兑换记录',path:''}]); },
async getPageExchangeLogsList() {
this.loading = true;
if (this.dateTime) {
this.listParams.beginTime = formateDateTimeByType(this.dateTime[0], 'yyyy-MM-dd');
this.listParams.endTime = formateDateTimeByType(this.dateTime[1], 'yyyy-MM-dd');
} else { } else {
this.statusOptions = [{label:'所有状态',value:-1},{label:'待发货',value:1},{label:'已发货',value:3}]; this.listParams.beginTime = this.listParams.senendTimedEndTime = '';
this.$store.commit('mutations_breadcrumb',[{name:'积分商城'},{name:'礼品',path:'/gift'},{name:'礼品兑换记录',path:''}]);
} }
this.getPageExchangeLogsList(); let res = await getPageExchangeLogsList(this.listParams);
this.tableList = res.result.rows || [];
this.total = res.result.total || 0;
this.loading = false;
}, },
methods: { // 导出列表
filterStatus(status) { exportExcel() {
let result = '--'; if (this.dateTime) {
switch(status) { this.listParams.beginTime = formateDateTimeByType(this.dateTime[0], 'yyyy-MM-dd');
case 0: this.listParams.endTime = formateDateTimeByType(this.dateTime[1], 'yyyy-MM-dd');
result = '已取消'; } else {
break; this.listParams.beginTime = this.listParams.senendTimedEndTime = '';
case 1: }
result = '待发货'; if (!this.listParams.beginTime || !this.listParams.endTime) {
break; this.$tips({ type: 'warning', message: '时间不能为空' });
case 3: return;
result = '已发货';
break;
}
return result;
},
handleSizeChange(val) {
this.listParams.pageSize = val;
this.getPageExchangeLogsList();
},
handleCurrentChange(val) {
this.listParams.currentPage = val;
this.getPageExchangeLogsList();
},
async getPageExchangeLogsList() {
this.loading = true;
if (this.dateTime) {
this.listParams.beginTime = formateDateTimeByType(this.dateTime[0],'yyyy-MM-dd');
this.listParams.endTime = formateDateTimeByType(this.dateTime[1],'yyyy-MM-dd');
} else {
this.listParams.beginTime = this.listParams.senendTimedEndTime = '';
}
let res = await getPageExchangeLogsList(this.listParams);
this.tableList = res.result.rows || [];
this.total = res.result.total || 0;
this.loading = false;
},
// 导出列表
exportExcel(){
if (this.dateTime) {
this.listParams.beginTime = formateDateTimeByType(this.dateTime[0],'yyyy-MM-dd');
this.listParams.endTime = formateDateTimeByType(this.dateTime[1],'yyyy-MM-dd');
} else {
this.listParams.beginTime = this.listParams.senendTimedEndTime = '';
}
if (!this.listParams.beginTime || !this.listParams.endTime) {
this.$tips({type: 'warning',message: '时间不能为空'});
return;
}
this.params ={
integralMallProId:this.listParams.integralMallProId,
status:this.listParams.status,
useStatus:this.listParams.useStatus,
memberInfo:this.listParams.memberInfo,
beginTime:this.listParams.beginTime,
endTime:this.listParams.endTime,
requestProject:'integral-mall'
}
this.dialogVisible = true
// window.location = `${exportExchangeListExcel}?integralMallProId=${this.listParams.integralMallProId}&status=${this.listParams.status}&useStatus=${this.listParams.useStatus}&memberInfo=${this.listParams.memberInfo}&beginTime=${this.listParams.beginTime}&endTime=${this.listParams.endTime}&requestProject=marketing`;
},
queryExpress(row) {
this.expressShow = true;
this.expressId = row.integralMallProExchangeId;
} }
this.params = {
integralMallProId: this.listParams.integralMallProId,
status: this.listParams.status,
useStatus: this.listParams.useStatus,
memberInfo: this.listParams.memberInfo,
beginTime: this.listParams.beginTime,
endTime: this.listParams.endTime,
requestProject: 'integral-mall'
};
this.dialogVisible = true;
// window.location = `${exportExchangeListExcel}?integralMallProId=${this.listParams.integralMallProId}&status=${this.listParams.status}&useStatus=${this.listParams.useStatus}&memberInfo=${this.listParams.memberInfo}&beginTime=${this.listParams.beginTime}&endTime=${this.listParams.endTime}&requestProject=marketing`;
},
queryExpress(row) {
this.expressShow = true;
this.expressId = row.integralMallProExchangeId;
} }
}; }
};
</script> </script>
src/views/mall/gift/info.js
...@@ -2,452 +2,447 @@ import { getGradeList, getCategoryList, createIntegralProService, getIntegralMal ...@@ -2,452 +2,447 @@ import { getGradeList, getCategoryList, createIntegralProService, getIntegralMal
import cardTemp from '../common/card-temp.vue'; import cardTemp from '../common/card-temp.vue';
// import dmUploadAvatar from '@/components/upload/avatar'; // import dmUploadAvatar from '@/components/upload/avatar';
import { formateDateTimeByType } from '@/utils/index.js'; import { formateDateTimeByType } from '@/utils/index.js';
import tinymceEdit from '../common/tinymce-edit.vue' import tinymceEdit from '../common/tinymce-edit.vue';
export default { export default {
components: { components: {
'card-temp': cardTemp, 'card-temp': cardTemp,
tinymceEdit, tinymceEdit
// dmUploadAvatar
},
data() {
return {
form: {
integralMallProId: '',
proReferId: '',
proName: '', // String 商品名字，优惠券就是所选券的名字。 (必填)
giftImg: { // (必填)
imgUrl: '', // giftImageUrls
code: '' // giftImageFiledCodes
},
proCategoryId: '', // String 礼品的分类 (必填)
integralCost: 0, // Number 100 积分费用 (必填)
cashCost: 0, // Number 现金费用，两位小数
costValue: 0, // Number 礼品成本，两位小数
memberGradeArr: [], // array 适用会员 这里是数组 传给后台要拼接为字符串数组逗号隔开
limitTimes: 0,
exchangeDateType: 1,
exchangeTimeType: 1, // 兑换时间类型 1:全部 2:部分时段
proShowStatus: 1,
changeType: 2, // Number 兑换方式1:微信兑换 2:快递发货 3:在线发货
releaseType: 1,
cardType:0,
exchangeFixDate: ['', ''], // exchangeFixDateBegin // exchangeFixDateEnd,
exchangeDateDayArr: [],
exchangeDateWeekArr: [],
limitTimeBegin: '',
virtualStock: 0,
weChatVirtualStock: 0,
detailDescription:'',//图文详情
},
rules: {
proName: { required: true, message: '请输入礼品名称', trigger: 'blur' },
proCategoryId: { required: true, message: '请选择礼品分类', trigger: 'blur' },
integralCost: { required: true, type: 'number', min: 0, message: '请输入积分费用', trigger: 'blur' },
cashCost: { required: true, type: 'number', min: 0, message: '请输入现金费用', trigger: 'blur' },
costValue: { required: true, type: 'number', min: 0, message: '请输入礼品成本', trigger: 'blur' },
memberGradeArr: { required: true, type: 'array', min: 0, message: '请选择适用会员', trigger: 'blur' },
},
memberGradeOptions: [],
categoryOptions: [],
exchangeDateWeekOptions: ['1', '2', '3', '4', '5', '6', '7'],
monthOptions: Array.from(Array(31), (v, k) => (k + 1).toString()),
sendChildData: {
storeType: 0,
storeGroupIds: '',
storeIds: [],
},
timeRangeList: [{}],
isLimitTimes: false,
isAdd: this.$route.meta.type === 'add',
isEdit: this.$route.meta.type === 'edit',
isInfo: this.$route.meta.type === 'info',
projectName: 'gic-web', // 当前项目名(必传参数) // dmUploadAvatar
wxFlag: '1', // '1': 表示需要返回微信图片地址(可选参数),插件内已默认 '1' },
imgRate: '1:1', // 限制图片上传比例 如 '1:1' (可选参数),各个调用地方可能不同,(比例和限制宽高是二选一的,如果都不传参数,表示不限制) data() {
limitW: 750, // 上传图片的限制宽度(数字),(可选参数),各个调用地方可能不同 return {
limitH: 750, // 上传图片的限制高度(数字),(可选参数),各个调用地方可能不同 form: {
actionUrl: '/api-plug/upload-img', // 必选参数，上传的相对地址 String 类型,切勿硬编码写死地址 integralMallProId: '',
maxlength: 5, // 图片数量 默认 5 proReferId: '',
imgSize: 1, // 图片大小限制 MB proName: '', // String 商品名字，优惠券就是所选券的名字。 (必填)
imageList: [] // 是否显示已上传文件列表 giftImg: {
// (必填)
imgUrl: '', // giftImageUrls
code: '' // giftImageFiledCodes
},
proCategoryId: '', // String 礼品的分类 (必填)
integralCost: 0, // Number 100 积分费用 (必填)
cashCost: 0, // Number 现金费用，两位小数
costValue: 0, // Number 礼品成本，两位小数
memberGradeArr: [], // array 适用会员 这里是数组 传给后台要拼接为字符串数组逗号隔开
limitTimes: 0,
exchangeDateType: 1,
exchangeTimeType: 1, // 兑换时间类型 1:全部 2:部分时段
proShowStatus: 1,
changeType: 2, // Number 兑换方式1:微信兑换 2:快递发货 3:在线发货
releaseType: 1,
cardType: 0,
exchangeFixDate: ['', ''], // exchangeFixDateBegin // exchangeFixDateEnd,
exchangeDateDayArr: [],
exchangeDateWeekArr: [],
limitTimeBegin: '',
virtualStock: 0,
weChatVirtualStock: 0,
detailDescription: '' //图文详情
},
rules: {
proName: { required: true, message: '请输入礼品名称', trigger: 'blur' },
proCategoryId: { required: true, message: '请选择礼品分类', trigger: 'blur' },
integralCost: { required: true, type: 'number', min: 0, message: '请输入积分费用', trigger: 'blur' },
cashCost: { required: true, type: 'number', min: 0, message: '请输入现金费用', trigger: 'blur' },
costValue: { required: true, type: 'number', min: 0, message: '请输入礼品成本', trigger: 'blur' },
memberGradeArr: { required: true, type: 'array', min: 0, message: '请选择适用会员', trigger: 'blur' }
},
memberGradeOptions: [],
categoryOptions: [],
exchangeDateWeekOptions: ['1', '2', '3', '4', '5', '6', '7'],
monthOptions: Array.from(Array(31), (v, k) => (k + 1).toString()),
sendChildData: {
storeType: 0,
storeGroupIds: '',
storeIds: []
},
timeRangeList: [{}],
isLimitTimes: false,
isAdd: this.$route.meta.type === 'add',
isEdit: this.$route.meta.type === 'edit',
isInfo: this.$route.meta.type === 'info',
projectName: 'gic-web', // 当前项目名(必传参数)
wxFlag: '1', // '1': 表示需要返回微信图片地址(可选参数),插件内已默认 '1'
imgRate: '1:1', // 限制图片上传比例 如 '1:1' (可选参数),各个调用地方可能不同,(比例和限制宽高是二选一的,如果都不传参数,表示不限制)
limitW: 750, // 上传图片的限制宽度(数字),(可选参数),各个调用地方可能不同
limitH: 750, // 上传图片的限制高度(数字),(可选参数),各个调用地方可能不同
actionUrl: '/api-plug/upload-img', // 必选参数，上传的相对地址 String 类型,切勿硬编码写死地址
maxlength: 5, // 图片数量 默认 5
imgSize: 1, // 图片大小限制 MB
imageList: [] // 是否显示已上传文件列表
};
},
watch: {
'form.limitTimes'(val) {
this.isLimitTimes = val > 0;
}
},
created() {
this.$store.commit('mutations_breadcrumb', [{ name: '积分商城' }, { name: '礼品', path: '/coupon' }, { name: this.isAdd ? '新增礼品' : '编辑礼品', path: '' }]);
this.getGradeList();
this.getCategoryList();
// 解决响应式问题
if (!this.timeRangeList) {
this.$set(this.timeRangeList, 0, { timeRange: ['', ''] });
}
if (this.isEdit || this.isInfo) {
this.getIntegralMallProInfo();
}
},
computed: {
asideShow() {
return this.$store.state.marketing.asideShow;
}
},
methods: {
// 删除分类
deleteCategory(id) {
delCategoryService({ integralMallCategoryId: id }).then(res => {
if (res.errorCode === 0) {
this.getCategoryList();
this.$tips({ type: 'success', message: '删除分类成功' });
} else {
this.$tips({ type: 'error', message: '删除分类失败' });
} }
});
}, },
watch: { // 获取分类列表
'form.limitTimes' (val) { async getCategoryList() {
this.isLimitTimes = (val > 0); let res = await getCategoryList();
}, if (res.errorCode === 0) {
}, this.categoryOptions = res.result || [];
created() { }
this.$store.commit('mutations_breadcrumb', [{ name: '积分商城' }, { name: '礼品', path: '/coupon' }, { name: this.isAdd ? '新增礼品' : '编辑礼品', path: '' }]);
this.getGradeList();
this.getCategoryList();
// 解决响应式问题
if (!this.timeRangeList) {
this.$set(this.timeRangeList, 0, { timeRange: ['', ''] })
}
if (this.isEdit || this.isInfo) {
this.getIntegralMallProInfo();
}
}, },
computed: { // 新建分类
asideShow() { createCategory() {
return this.$store.state.marketing.asideShow this.$prompt('', '新建分类', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPlaceholder: '请输入分类名称',
inputErrorMessage: '分类名称不能为空',
inputValidator: function(value) {
if (!value) {
return false;
} else if (value.replace(/[^\x00-\xff]/gi, '--').length > 24) {
return '中文限制12字，数字字母限制23字符';
} else {
return true;
}
} }
}, })
methods: { .then(({ value }) => {
// 删除分类 createCategoryService({ categoryName: value }).then(res => {
deleteCategory(id) {
delCategoryService({ integralMallCategoryId: id }).then(res => {
if (res.errorCode === 0) {
this.getCategoryList();
this.$tips({ type: 'success', message: '删除分类成功' });
} else {
this.$tips({ type: 'error', message: '删除分类失败' });
}
});
},
// 获取分类列表
async getCategoryList() {
let res = await getCategoryList();
if (res.errorCode === 0) { if (res.errorCode === 0) {
this.categoryOptions = res.result || []; this.$tips({ type: 'success', message: '新建分类成功' });
this.getCategoryList();
} else {
this.$tips({ type: 'error', message: '新建分类失败' });
} }
}, });
// 新建分类 })
createCategory() { .catch(err => {});
this.$prompt('', '新建分类', { },
confirmButtonText: '确定', // 获取礼品详情
cancelButtonText: '取消', /* eslint-disable */
inputPlaceholder: '请输入分类名称', async getIntegralMallProInfo() {
inputErrorMessage: '分类名称不能为空', let res = await getIntegralMallProInfo({ integralMallProId: this.$route.params.id });
inputValidator: function(value) { if (res.errorCode === 0) {
if (!value) { const result = res.result;
return false; this.form.integralMallProId = result.integralMallProId || '';
} else if (value.replace(/[^\x00-\xff]/gi, "--").length > 24) { this.form.proReferId = result.proReferId || '';
return '中文限制12字，数字字母限制23字符' this.form.proName = result.proName || '';
} else { this.imageList =
return true; result.images &&
} result.images.map(v => ({
url: v.imageUrl,
} code: v.imageFieldCode
}).then(({ value }) => { }));
this.form.proCategoryId = result.proCategoryId || '';
createCategoryService({ categoryName: value }).then(res => { this.form.integralCost = result.integralCost || 0;
if (res.errorCode === 0) { this.form.cashCost = result.cashCost || 0;
this.$tips({ type: 'success', message: '新建分类成功' }); this.form.costValue = result.costValue || 0;
this.getCategoryList(); this.form.memberGradeArr = result.memberGrade ? result.memberGrade.split(',') : [];
} else { this.form.limitTimes = result.limitTimes || 0;
this.$tips({ type: 'error', message: '新建分类失败' }); this.form.exchangeDateType = result.exchangeDateType || 1;
} this.form.exchangeTimeType = result.exchangeTimeType || 1;
}) this.form.proShowStatus = result.proShowStatus || 1;
}).catch(err => { this.form.changeType = result.changeType || 2;
console.log(err); this.form.releaseType = result.releaseType || 1;
});
},
// 获取礼品详情
async getIntegralMallProInfo() {
let res = await getIntegralMallProInfo({ integralMallProId: this.$route.params.id });
if (res.errorCode === 0) {
const result = res.result;
this.form.integralMallProId = result.integralMallProId || '';
this.form.proReferId = result.proReferId || '';
this.form.proName = result.proName || '';
this.imageList = result.images && result.images.map(v => ({
url: v.imageUrl,
code: v.imageFieldCode
}));
this.form.proCategoryId = result.proCategoryId || '';
this.form.integralCost = result.integralCost || 0;
this.form.cashCost = result.cashCost || 0;
this.form.costValue = result.costValue || 0;
this.form.memberGradeArr = result.memberGrade ? result.memberGrade.split(',') : [];
this.form.limitTimes = result.limitTimes || 0;
this.form.exchangeDateType = result.exchangeDateType || 1;
this.form.exchangeTimeType = result.exchangeTimeType || 1;
this.form.proShowStatus = result.proShowStatus || 1;
this.form.changeType = result.changeType || 2;
this.form.releaseType = result.releaseType || 1;
this.form.exchangeFixDate = [result.exchangeFixDateBegin || '', result.exchangeFixDateEnd || ''];
this.form.exchangeDateDayArr = result.exchangeDateDay ? result.exchangeDateDay.split(',') : [];
this.form.exchangeDateWeekArr = result.exchangeDateWeek ? result.exchangeDateWeek.split(',').filter(v => v) : [];
this.form.limitTimeBegin = result.limitTimeBegin || '';
this.form.weChatVirtualStock = this.form.virtualStock = result.virtualStock || 0;
this.form.detailDescription=result.detailDescription//图文详情的数据
this.form.cardType = result.cardType
// result.showStore = 2;
this.sendChildData = {
storeType: result.showStore || 0
}
if (result.showStore === 1) { this.form.exchangeFixDate = [result.exchangeFixDateBegin || '', result.exchangeFixDateEnd || ''];
this.sendChildData.storeGroupIds = result.storeGroupIds || ''; this.form.exchangeDateDayArr = result.exchangeDateDay ? result.exchangeDateDay.split(',') : [];
} else if (result.showStore === 2) { this.form.exchangeDateWeekArr = result.exchangeDateWeek ? result.exchangeDateWeek.split(',').filter(v => v) : [];
let list = []; this.form.limitTimeBegin = result.limitTimeBegin || '';
if (result.storeInfo.length) { this.form.weChatVirtualStock = this.form.virtualStock = result.virtualStock || 0;
result.storeInfo.map(v => { this.form.detailDescription = result.detailDescription; //图文详情的数据
list.push(v); this.form.cardType = result.cardType;
}) // result.showStore = 2;
}
this.sendChildData.storeIds = list;
}
if (this.form.exchangeTimeType === 2 && result.timeZones) { this.sendChildData = {
let list = result.timeZones.split('#').filter(v => v); storeType: result.showStore || 0
list.map((v, i) => { };
let arr = v.split('-');
this.$set(this.timeRangeList, i, { timeRange: [arr[0], arr[1]] })
});
}
console.log(this.sendChildData)
this.isLimitTimes = this.form.limitTimes > 0;
this.form.costValue = result.costValue || 0;
console.log(this.form, this.form.costValue, result.costValue)
this.$nextTick(_ => {
this.$refs.cardTemp.getCardList();
})
}
},
//门店分类回执方法
getSelectGroupData(val) {
console.log(val);
this.sendChildData.storeType = val.storeType || 0
this.sendChildData.storeGroupIds = val.storeGroupIds || ''
this.sendChildData.storeIds = val.storeIds || []
},
// 获取适用会员列表
async getGradeList() {
let res = await getGradeList();
if (res.errorCode === 0) {
this.memberGradeOptions = res.result || [];
}
console.log(res);
},
// 获取卡券组件回调的对象
getCardActiveObjFun(val) {
if (val.hasOwnProperty('cardType')) {
this.form.cardType = val.cardType
}
if (this.isAdd) {
this.form.weChatVirtualStock = val.couponStock || 0;
this.form.proReferId = val.coupCardId || '';
(async() => {
let res = await getCashCostService({ coupCardId: val.coupCardId, proType: 1 });
this.form.costValue = res.result.costValue || 0;
console.log(res);
})();
}
},
// 新增兑换时段-部分时段 if (result.showStore === 1) {
addTimeRange() { this.sendChildData.storeGroupIds = result.storeGroupIds || '';
let length = this.timeRangeList.length; } else if (result.showStore === 2) {
if (length >= 5) { let list = [];
this.$tips({ type: 'warning', message: '最多五个时间段' }); if (result.storeInfo.length) {
return; result.storeInfo.map(v => {
} list.push(v);
this.$set(this.timeRangeList, length, { timeRange: ['', ''] })
},
// 删除兑换时段-部分时段
delTimeRange(index) {
this.timeRangeList.splice(index, 1);
},
// 提交验证
submit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.submitService();
}
}); });
}, }
// 提交保存 this.sendChildData.storeIds = list;
submitService() { }
this.form.detailDescription=this.$refs.tinymceWrap.tinymceHtml
if (this.form.costValue < this.form.cashCost) {
this.$tips({ type: 'warning', message: '现金费用不能大于礼品成本' });
return;
}
if (!this.imageList.length) {
this.$tips({ type: 'warning', message: '礼品主图不能为空' });
return;
}
if (this.form.changeType === 1 && !this.form.proReferId) {
this.$tips({ type: 'warning', message: '请选择优惠券' });
return;
}
if(this.form.detailDescription){
if(this.form.detailDescription.length>2000){
this.$tips({ type: 'error', message: '图文详情编辑超过字数限制' });
return;
}
}else{
this.form.detailDescription=''
}
let params = {
integralMallProId: this.form.integralMallProId || '',
proType: this.form.changeType === 1 ? 2 : 3, // 商品类型 1 优惠券，2礼品，3实物
proName: this.form.proName, // 商品名字，优惠券就是所选券的名字。
proReferId: this.form.proReferId, // 关联的卡券或者礼品
proCategoryId: this.form.proCategoryId, //礼品的分类
proShowStatus: this.form.proShowStatus, // 商品显示状态 1:上架状态就显示 2:兑换状态下显示
integralCost: this.form.integralCost, // 积分费用
cashCost: this.form.cashCost, // 现金费用，两位小数
costValue: this.form.costValue,
limitTimes: this.isLimitTimes ? this.form.limitTimes : -1, // 次数限制
memberGrade: this.form.memberGradeArr.length ? this.form.memberGradeArr.join(',') : '', // 适用会员，多个，逗号拼接。
exchangeDateType: this.form.exchangeDateType, // 兑换日期1:全部 2:固定日期 3:每月 4:每周
exchangeTimeType: this.form.exchangeTimeType, // 兑换时间类型 1:全部 2:部分时段
releaseType: this.form.releaseType, // 布发状态 1立即 2定时
changeType: this.form.changeType, // 兑换方式 1:微信兑换 2:快递发货 3:在线发货 if (this.form.exchangeTimeType === 2 && result.timeZones) {
let list = result.timeZones.split('#').filter(v => v);
list.map((v, i) => {
let arr = v.split('-');
this.$set(this.timeRangeList, i, { timeRange: [arr[0], arr[1]] });
});
}
this.isLimitTimes = this.form.limitTimes > 0;
this.form.costValue = result.costValue || 0;
this.$nextTick(_ => {
this.$refs.cardTemp.getCardList();
});
}
},
//门店分类回执方法
getSelectGroupData(val) {
this.sendChildData.storeType = val.storeType || 0;
this.sendChildData.storeGroupIds = val.storeGroupIds || '';
this.sendChildData.storeIds = val.storeIds || [];
},
// 获取适用会员列表
async getGradeList() {
let res = await getGradeList();
if (res.errorCode === 0) {
this.memberGradeOptions = res.result || [];
}
},
// 获取卡券组件回调的对象
getCardActiveObjFun(val) {
if (val.hasOwnProperty('cardType')) {
this.form.cardType = val.cardType;
}
if (this.isAdd) {
this.form.weChatVirtualStock = val.couponStock || 0;
this.form.proReferId = val.coupCardId || '';
(async () => {
let res = await getCashCostService({ coupCardId: val.coupCardId, proType: 1 });
this.form.costValue = res.result.costValue || 0;
})();
}
},
showStore: this.sendChildData.storeType, // 显示门店 0所有 1部分分类 2部分门店 // 新增兑换时段-部分时段
giftImageUrls: this.imageList.map(v => v.url).filter(v => v).join(','), // 礼品图片 addTimeRange() {
giftImageFiledCodes: this.imageList.map(v => v.code).filter(v => v).join(','), // 礼品图片编码 let length = this.timeRangeList.length;
if (length >= 5) {
this.$tips({ type: 'warning', message: '最多五个时间段' });
return;
}
this.$set(this.timeRangeList, length, { timeRange: ['', ''] });
},
// 删除兑换时段-部分时段
delTimeRange(index) {
this.timeRangeList.splice(index, 1);
},
// 提交验证
submit(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.submitService();
}
});
},
// 提交保存
submitService() {
this.form.detailDescription = this.$refs.tinymceWrap.tinymceHtml;
if (this.form.costValue < this.form.cashCost) {
this.$tips({ type: 'warning', message: '现金费用不能大于礼品成本' });
return;
}
if (!this.imageList.length) {
this.$tips({ type: 'warning', message: '礼品主图不能为空' });
return;
}
if (this.form.changeType === 1 && !this.form.proReferId) {
this.$tips({ type: 'warning', message: '请选择优惠券' });
return;
}
if (this.form.detailDescription) {
if (this.form.detailDescription.length > 2000) {
this.$tips({ type: 'error', message: '图文详情编辑超过字数限制' });
return;
}
} else {
this.form.detailDescription = '';
}
storeIds: '', // 选中的门店信息，多个逗号拼接 let params = {
virtualStock: this.form.changeType === 1 ? this.form.weChatVirtualStock : this.form.virtualStock, //库存 integralMallProId: this.form.integralMallProId || '',
detailDescription:this.form.detailDescription,//图文详情 proType: this.form.changeType === 1 ? 2 : 3, // 商品类型 1 优惠券，2礼品，3实物
cardType :this.form.cardType proName: this.form.proName, // 商品名字，优惠券就是所选券的名字。
} proReferId: this.form.proReferId, // 关联的卡券或者礼品
proCategoryId: this.form.proCategoryId, //礼品的分类
proShowStatus: this.form.proShowStatus, // 商品显示状态 1:上架状态就显示 2:兑换状态下显示
integralCost: this.form.integralCost, // 积分费用
cashCost: this.form.cashCost, // 现金费用，两位小数
costValue: this.form.costValue,
limitTimes: this.isLimitTimes ? this.form.limitTimes : -1, // 次数限制
memberGrade: this.form.memberGradeArr.length ? this.form.memberGradeArr.join(',') : '', // 适用会员，多个，逗号拼接。
exchangeDateType: this.form.exchangeDateType, // 兑换日期1:全部 2:固定日期 3:每月 4:每周
exchangeTimeType: this.form.exchangeTimeType, // 兑换时间类型 1:全部 2:部分时段
releaseType: this.form.releaseType, // 布发状态 1立即 2定时
changeType: this.form.changeType, // 兑换方式 1:微信兑换 2:快递发货 3:在线发货
// 判断 兑换日期 showStore: this.sendChildData.storeType, // 显示门店 0所有 1部分分类 2部分门店
if (params.exchangeDateType === 2) { giftImageUrls: this.imageList
if (this.form.exchangeFixDate && this.form.exchangeFixDate[0]) { .map(v => v.url)
params.exchangeFixDateBegin = formateDateTimeByType(this.form.exchangeFixDate[0], 'yyyy-MM-dd-HH-mm-ss'); .filter(v => v)
params.exchangeFixDateEnd = formateDateTimeByType(this.form.exchangeFixDate[1], 'yyyy-MM-dd-HH-mm-ss'); .join(','), // 礼品图片
} else { giftImageFiledCodes: this.imageList
this.$tips({ type: 'warning', message: '兑换固定日期不能为空' }); .map(v => v.code)
return; .filter(v => v)
} .join(','), // 礼品图片编码
} else if (params.exchangeDateType === 3) {
if (this.form.exchangeDateDayArr.length > 0) {
params.exchangeDateDay = this.form.exchangeDateDayArr.join(',');
} else {
this.$tips({ type: 'warning', message: '兑换每月日期不能为空' });
return;
}
} else if (params.exchangeDateType === 4) {
if (this.form.exchangeDateWeekArr.length > 0) {
params.exchangeDateWeek = this.form.exchangeDateWeekArr.join(',');
} else {
this.$tips({ type: 'warning', message: '兑换每周日期不能为空' });
return;
}
}
// 判断 兑换时段 storeIds: '', // 选中的门店信息，多个逗号拼接
if (params.exchangeTimeType === 2) { virtualStock: this.form.changeType === 1 ? this.form.weChatVirtualStock : this.form.virtualStock, //库存
let list = []; detailDescription: this.form.detailDescription, //图文详情
let flag = false; cardType: this.form.cardType
let arr = []; };
this.timeRangeList.forEach(v => {
if (!v.timeRange || !v.timeRange[0]) {
flag = true;
} else {
arr.push(v.timeRange);
list.push(v.timeRange[0] + '-' + v.timeRange[1]);
}
})
if (flag) {
this.$tips({ type: 'warning', message: '部分时段未填写完整' });
return;
}
// 如果数组为1的话也要传 #分割
if (list.length === 1) {
params.timeZones = list[0] + '#';
} else {
params.timeZones = list.length ? list.join('#') : '';
}
let breakFlag = false; // 判断 兑换日期
for (var i = 0; i < arr.length; i++) { if (params.exchangeDateType === 2) {
if (breakFlag) { if (this.form.exchangeFixDate && this.form.exchangeFixDate[0]) {
break; params.exchangeFixDateBegin = formateDateTimeByType(this.form.exchangeFixDate[0], 'yyyy-MM-dd-HH-mm-ss');
} params.exchangeFixDateEnd = formateDateTimeByType(this.form.exchangeFixDate[1], 'yyyy-MM-dd-HH-mm-ss');
var p1 = arr[i]; } else {
for (var j = i + 1; j < arr.length; j++) { this.$tips({ type: 'warning', message: '兑换固定日期不能为空' });
var p2 = arr[j]; return;
console.log(p1, p2); }
if ((p2[0] > p1[0] && p2[0] < p1[1]) || (p2[1] > p1[0] && p2[1] < p1[1]) || (p1[0] > p2[0] && p1[0] < p2[1]) || (p1[1] > p2[0] && p1[1] < p2[1])) { } else if (params.exchangeDateType === 3) {
breakFlag = true; if (this.form.exchangeDateDayArr.length > 0) {
break; params.exchangeDateDay = this.form.exchangeDateDayArr.join(',');
} } else {
} this.$tips({ type: 'warning', message: '兑换每月日期不能为空' });
} return;
if (breakFlag) { }
this.$tips({ type: 'warning', message: "兑换时段之间不允许出现时间交叠" }); } else if (params.exchangeDateType === 4) {
return; if (this.form.exchangeDateWeekArr.length > 0) {
} params.exchangeDateWeek = this.form.exchangeDateWeekArr.join(',');
} } else {
this.$tips({ type: 'warning', message: '兑换每周日期不能为空' });
return;
}
}
// 判断 兑换时段
if (params.exchangeTimeType === 2) {
let list = [];
let flag = false;
let arr = [];
this.timeRangeList.forEach(v => {
if (!v.timeRange || !v.timeRange[0]) {
flag = true;
} else {
arr.push(v.timeRange);
list.push(v.timeRange[0] + '-' + v.timeRange[1]);
}
});
if (flag) {
this.$tips({ type: 'warning', message: '部分时段未填写完整' });
return;
}
// 如果数组为1的话也要传 #分割
if (list.length === 1) {
params.timeZones = list[0] + '#';
} else {
params.timeZones = list.length ? list.join('#') : '';
}
// 判断发送时间 let breakFlag = false;
if (params.releaseType === 2) { for (let i = 0; i < arr.length; i++) {
if (this.form.limitTimeBegin) { if (breakFlag) {
params.limitTimeBegin = formateDateTimeByType(this.form.limitTimeBegin, 'yyyy-MM-dd-HH-mm-ss'); break;
} else { }
this.$tips({ type: 'warning', message: '定时发布时间不能为空' }); const p1 = arr[i];
return; for (let j = i + 1; j < arr.length; j++) {
} const p2 = arr[j];
if ((p2[0] > p1[0] && p2[0] < p1[1]) || (p2[1] > p1[0] && p2[1] < p1[1]) || (p1[0] > p2[0] && p1[0] < p2[1]) || (p1[1] > p2[0] && p1[1] < p2[1])) {
breakFlag = true;
break;
} }
}
}
if (breakFlag) {
this.$tips({ type: 'warning', message: '兑换时段之间不允许出现时间交叠' });
return;
}
}
// 门店分类 // 判断发送时间
if (this.sendChildData.storeType === 1) { if (params.releaseType === 2) {
if (this.sendChildData.storeGroupIds) { if (this.form.limitTimeBegin) {
params.storeGroupIds = this.sendChildData.storeGroupIds || ''; params.limitTimeBegin = formateDateTimeByType(this.form.limitTimeBegin, 'yyyy-MM-dd-HH-mm-ss');
} else { } else {
this.$tips({ type: 'warning', message: '门店分类不能为空' }); this.$tips({ type: 'warning', message: '定时发布时间不能为空' });
return; return;
} }
} else if (this.sendChildData.storeType === 2) { }
if (this.sendChildData.storeIds.length) {
params.storeIds = this.sendChildData.storeIds.map(v => v.storeId).join(',');
} else {
params.storeIds = '';
this.$tips({ type: 'warning', message: '部分门店不能为空' });
return;
}
}
console.log(params) // 门店分类
createIntegralProService(params).then(res => { if (this.sendChildData.storeType === 1) {
if (res.errorCode === 0) { if (this.sendChildData.storeGroupIds) {
this.$router.push('/gift'); params.storeGroupIds = this.sendChildData.storeGroupIds || '';
this.$tips({ type: 'success', message: '操作成功' }); } else {
} else { this.$tips({ type: 'warning', message: '门店分类不能为空' });
this.$tips({ type: 'error', message: '操作失败' }); return;
}
console.log(res);
}).catch(err => {
this.$tips({ type: 'error', message: '操作失败' });
})
},
// 上传成功 返回的图片对象 里面有图片 大小 类型 等相关信息
uploadOnSuccess(obj) {
// 目前返回两个参数 {res:res,file:file}
obj.file.url = obj.res.result[0] && obj.res.result[0].qcloudImageUrl;
obj.file.code = obj.res.result[0] && obj.res.result[0].imageFiledCode;
this.imageList.push(obj.file);
},
// 删除图片 返回图片列表的索引 你可以根据这个索引去找对应图片的id
deleteImage(i) {
this.imageList.splice(i, 1);
},
// 排序图片
sortImg(val) {
this.imageList = val;
} }
} else if (this.sendChildData.storeType === 2) {
if (this.sendChildData.storeIds.length) {
params.storeIds = this.sendChildData.storeIds.map(v => v.storeId).join(',');
} else {
params.storeIds = '';
this.$tips({ type: 'warning', message: '部分门店不能为空' });
return;
}
}
createIntegralProService(params)
.then(res => {
if (res.errorCode === 0) {
this.$router.push('/gift');
this.$tips({ type: 'success', message: '操作成功' });
} else {
this.$tips({ type: 'error', message: '操作失败' });
}
})
.catch(err => {
this.$tips({ type: 'error', message: '操作失败' });
});
},
// 上传成功 返回的图片对象 里面有图片 大小 类型 等相关信息
uploadOnSuccess(obj) {
// 目前返回两个参数 {res:res,file:file}
obj.file.url = obj.res.result[0] && obj.res.result[0].qcloudImageUrl;
obj.file.code = obj.res.result[0] && obj.res.result[0].imageFiledCode;
this.imageList.push(obj.file);
},
// 删除图片 返回图片列表的索引 你可以根据这个索引去找对应图片的id
deleteImage(i) {
this.imageList.splice(i, 1);
},
// 排序图片
sortImg(val) {
this.imageList = val;
} }
}; }
\ No newline at end of file };
src/views/mall/gift/info.vue
<template> <template>
<el-form :model="form" ref="form" :rules="rules" label-width="120px"> <el-form :model="form" ref="form" :rules="rules" label-width="120px">
<div class="dm-form__wrap"> <div class="dm-form__wrap">
<h3 class="dm-title__label">礼品信息</h3> <h3 class="dm-title__label">礼品信息</h3>
<el-form-item prop="proName" label="礼品标题"> <el-form-item prop="proName" label="礼品标题">
...@@ -8,33 +8,20 @@ ...@@ -8,33 +8,20 @@
<el-form-item label="礼品主图" class="is-required"> <el-form-item label="礼品主图" class="is-required">
<div class="member-upload-image"> <div class="member-upload-image">
<p class="gray fz13">规格750*750，大小≤1M</p> <p class="gray fz13">规格750*750，大小≤1M</p>
<vue-gic-upload-image <vue-gic-upload-image :projectName="projectName" :wxFlag="wxFlag" :actionUrl="actionUrl" :imageList="imageList" :limitW="limitW" :limitH="limitH" :imgSize="imgSize" with-credentials :maxImageLength="maxlength" @uploadOnSuccess="uploadOnSuccess" @sortImg="sortImg" @deleteImage="deleteImage"> </vue-gic-upload-image>
:projectName="projectName"
:wxFlag="wxFlag"
:actionUrl="actionUrl"
:imageList="imageList"
:limitW="limitW"
:limitH="limitH"
:imgSize="imgSize"
with-credentials
:maxImageLength="maxlength"
@uploadOnSuccess="uploadOnSuccess"
@sortImg="sortImg"
@deleteImage="deleteImage">
</vue-gic-upload-image>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item prop="proCategoryId" label="礼品分类"> <el-form-item prop="proCategoryId" label="礼品分类">
<el-select v-model="form.proCategoryId" placeholder="请选择" class="w300 delete-select"> <el-select v-model="form.proCategoryId" placeholder="请选择" class="w300 delete-select">
<el-option v-for="(v,i) in categoryOptions" :key="i" :label="v.categoryName" :value="v.integralMallCategoryId"> <el-option v-for="(v, i) in categoryOptions" :key="i" :label="v.categoryName" :value="v.integralMallCategoryId">
<span class="fl">{{v.categoryName}}</span> <span class="fl">{{ v.categoryName }}</span>
<el-button class="fr delete-icon" type="text" @click.stop="deleteCategory(v.integralMallCategoryId)" style="line-height:34px" ><i class="el-icon-error el-icon--right"></i></el-button> <el-button class="fr delete-icon" type="text" @click.stop="deleteCategory(v.integralMallCategoryId)" style="line-height:34px"><i class="el-icon-error el-icon--right"></i></el-button>
</el-option> </el-option>
</el-select> </el-select>
<el-button type="text" @click="createCategory">新建分类</el-button> <el-button type="text" @click="createCategory">新建分类</el-button>
</el-form-item> </el-form-item>
<el-form-item prop="integralCost" label="积分费用"> <el-form-item prop="integralCost" label="积分费用">
<el-input-number class="w300" controls-position="right" :disabled="isInfo || isEdit" v-model="form.integralCost" :precision="0" :step="1" :min="0" ></el-input-number> <el-input-number class="w300" controls-position="right" :disabled="isInfo || isEdit" v-model="form.integralCost" :precision="0" :step="1" :min="0"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item prop="cashCost" label="现金费用"> <el-form-item prop="cashCost" label="现金费用">
<el-input-number controls-position="right" :disabled="isInfo || isEdit" v-model="form.cashCost" class="w300" :precision="2" :step="0.1" :min="0"></el-input-number> <el-input-number controls-position="right" :disabled="isInfo || isEdit" v-model="form.cashCost" class="w300" :precision="2" :step="0.1" :min="0"></el-input-number>
...@@ -43,8 +30,7 @@ ...@@ -43,8 +30,7 @@
<el-input-number controls-position="right" :disabled="isInfo || isEdit || form.changeType === 1" v-model="form.costValue" class="w300" :precision="2" :step="0.1" :min="0"></el-input-number> <el-input-number controls-position="right" :disabled="isInfo || isEdit || form.changeType === 1" v-model="form.costValue" class="w300" :precision="2" :step="0.1" :min="0"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item prop="limitTimes" label="次数限制"> <el-form-item prop="limitTimes" label="次数限制">
<el-checkbox :disabled="isInfo" v-model="isLimitTimes"> 每个会员限制兑换 <el-checkbox :disabled="isInfo" v-model="isLimitTimes"> 每个会员限制兑换 </el-checkbox>
</el-checkbox>
<el-input-number controls-position="right" :disabled="isInfo" v-model="form.limitTimes" class="w100" :precision="0" :min="0"></el-input-number> 次 <el-input-number controls-position="right" :disabled="isInfo" v-model="form.limitTimes" class="w100" :precision="0" :min="0"></el-input-number> 次
</el-form-item> </el-form-item>
<el-form-item prop="memberGradeArr" label="适用会员"> <el-form-item prop="memberGradeArr" label="适用会员">
...@@ -67,18 +53,18 @@ ...@@ -67,18 +53,18 @@
<el-radio-group v-model="form.exchangeDateType" style="line-height:inherit;"> <el-radio-group v-model="form.exchangeDateType" style="line-height:inherit;">
<el-radio :label="1">全部日期</el-radio> <el-radio :label="1">全部日期</el-radio>
<el-radio :label="2">固定日期</el-radio> <el-radio :label="2">固定日期</el-radio>
<el-radio :label="3">每月</el-radio> <el-radio :label="3">每月</el-radio>
<el-radio :label="4">每周</el-radio> <el-radio :label="4">每周</el-radio>
</el-radio-group> </el-radio-group>
<div class="pt8" v-if="form.exchangeDateType === 2"> <div class="pt8" v-if="form.exchangeDateType === 2">
<el-date-picker class="w300" v-model="form.exchangeFixDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> <el-date-picker class="w300" v-model="form.exchangeFixDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</div> </div>
<div class="pt8" v-if="form.exchangeDateType === 3"> <div class="pt8" v-if="form.exchangeDateType === 3">
<el-select class="w300" size="small" v-model="form.exchangeDateDayArr" multiple placeholder="请选择"> <el-select class="w300" size="small" v-model="form.exchangeDateDayArr" multiple placeholder="请选择">
<el-option v-for="item in monthOptions" :key="item" :label="item" :value="item"></el-option> <el-option v-for="item in monthOptions" :key="item" :label="item" :value="item"></el-option>
</el-select> </el-select>
</div> </div>
<div class="pt8" v-if="form.exchangeDateType ===4"> <div class="pt8" v-if="form.exchangeDateType === 4">
<el-select class="w300" size="small" v-model="form.exchangeDateWeekArr" multiple placeholder="请选择"> <el-select class="w300" size="small" v-model="form.exchangeDateWeekArr" multiple placeholder="请选择">
<el-option v-for="item in exchangeDateWeekOptions" :key="item" :label="item" :value="item"></el-option> <el-option v-for="item in exchangeDateWeekOptions" :key="item" :label="item" :value="item"></el-option>
</el-select> </el-select>
...@@ -91,14 +77,13 @@ ...@@ -91,14 +77,13 @@
<el-radio :label="2" class="vertical-middle">部分时段</el-radio> <el-radio :label="2" class="vertical-middle">部分时段</el-radio>
</el-radio-group> </el-radio-group>
<div v-show="form.exchangeTimeType === 2" class=""> <div v-show="form.exchangeTimeType === 2" class="">
<p v-for="(v,i) in timeRangeList" :key="i" class="pt8"> <p v-for="(v, i) in timeRangeList" :key="i" class="pt8">
<el-time-picker :disabled="form.exchangeTimeType === 1" class="vertical-middle w300" is-range v-model="v.timeRange" value-format="HH:mm" format="HH:mm" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker> <el-time-picker :disabled="form.exchangeTimeType === 1" class="vertical-middle w300" is-range v-model="v.timeRange" value-format="HH:mm" format="HH:mm" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
<el-button v-if="i" class="vertical-middle" type="text" @click="delTimeRange(i)">删除</el-button> <el-button v-if="i" class="vertical-middle" type="text" @click="delTimeRange(i)">删除</el-button>
</p> </p>
<span class="gray fz12 vertical-top">请使用24小时制输入时间，格式如11:00至14:30</span> <span class="gray fz12 vertical-top">请使用24小时制输入时间，格式如11:00至14:30</span>
<p><el-button type="text" @click="addTimeRange">添加时间段</el-button></p> <p><el-button type="text" @click="addTimeRange">添加时间段</el-button></p>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item prop="proShowStatus" label="显示状态" class="is-required"> <el-form-item prop="proShowStatus" label="显示状态" class="is-required">
...@@ -112,7 +97,7 @@ ...@@ -112,7 +97,7 @@
<el-radio :label="1">立即发布</el-radio> <el-radio :label="1">立即发布</el-radio>
<el-radio :label="2">定时发布</el-radio> <el-radio :label="2">定时发布</el-radio>
</el-radio-group> </el-radio-group>
<div class="pt8" v-if="form.releaseType ===2"> <div class="pt8" v-if="form.releaseType === 2">
<el-date-picker v-model="form.limitTimeBegin" type="datetime" placeholder="选择日期时间"></el-date-picker> <el-date-picker v-model="form.limitTimeBegin" type="datetime" placeholder="选择日期时间"></el-date-picker>
</div> </div>
</el-form-item> </el-form-item>
...@@ -124,18 +109,18 @@ ...@@ -124,18 +109,18 @@
</el-radio-group> </el-radio-group>
<div class="pt8"> <div class="pt8">
<span v-show="form.changeType !== 1">库存 <el-input-number controls-position="right" v-model="form.virtualStock" class="w250 vertical-middle" :precison="0" :min="0"></el-input-number></span> <span v-show="form.changeType !== 1">库存 <el-input-number controls-position="right" v-model="form.virtualStock" class="w250 vertical-middle" :precison="0" :min="0"></el-input-number></span>
<span v-show="form.changeType === 1" class="gray fz13">礼品成本金额以选择兑换券的成本金额为准</span> <span v-show="form.changeType === 1" class="gray fz13">礼品成本金额以选择兑换券的成本金额为准</span>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
<div class="dm-form__wrap" v-show="!(form.changeType !== 1 || isInfo || isEdit)"> <div class="dm-form__wrap" v-show="!(form.changeType !== 1 || isInfo || isEdit)">
<h3 class="dm-title__label">选择卡券</h3> <h3 class="dm-title__label">选择卡券</h3>
<div style="margin-bottom:20px;"> <div style="margin-bottom:20px;">
<card-temp ref="cardTemp" pbSize="pb15" :activeId.sync="form.proReferId" @emitActiveObj="getCardActiveObjFun" :showPagination="false" :cardLimitType="3"></card-temp> <card-temp ref="cardTemp" pbSize="pb15" :activeId.sync="form.proReferId" @emitActiveObj="getCardActiveObjFun" :showPagination="false" :cardLimitType="3"></card-temp>
</div> </div>
</div> </div>
<div class="btn-wrap_fixed" :class="{'on':asideShow}"> <div class="btn-wrap_fixed" :class="{ on: asideShow }">
<el-button type="primary" @click="submit('form')" v-if="!isInfo">{{isAdd?'确认新增':'确认编辑'}}</el-button> <el-button type="primary" @click="submit('form')" v-if="!isInfo">{{ isAdd ? '确认新增' : '确认编辑' }}</el-button>
<el-button @click="$router.go(-1)">返 回</el-button> <el-button @click="$router.go(-1)">返 回</el-button>
</div> </div>
</el-form> </el-form>
......
src/views/mall/gift/list.vue
<template> <template>
<section class="dm-wrap"> <section class="dm-wrap">
<div class="pb22 clearfix"> <div class="pb22 clearfix">
<el-input v-model="listParams.giftName" class="w300" placeholder="请输入礼品名称" clearable @change="getPageGiftList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input> <el-input v-model="listParams.giftName" class="w300" placeholder="请输入礼品名称" clearable @change="getPageGiftList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
<el-button class="fr" type="primary" @click="$router.push('/gift/info')">新增礼品</el-button> <el-button class="fr" type="primary" @click="$router.push('/gift/info')">新增礼品</el-button>
</div> </div>
<div class="filter--box"> <div class="filter--box">
<el-select class="vertical-middle w150 pl10" v-model="listParams.category" placeholder="选择分类" @change="getPageGiftList"> <el-select class="vertical-middle w150 pl10" v-model="listParams.category" placeholder="选择分类" @change="getPageGiftList">
...@@ -17,330 +17,330 @@ ...@@ -17,330 +17,330 @@
<el-select class="vertical-middle w150" v-model="listParams.showStatus" placeholder="选择显示状态" @change="getPageGiftList"> <el-select class="vertical-middle w150" v-model="listParams.showStatus" placeholder="选择显示状态" @change="getPageGiftList">
<el-option v-for="v in showStatusOptions" :key="v.value" :label="v.label" :value="v.value"></el-option> <el-option v-for="v in showStatusOptions" :key="v.value" :label="v.label" :value="v.value"></el-option>
</el-select> </el-select>
<el-checkbox class="vertical-middle" size="small" border :true-label="1" :false-label="0" v-model="listParams.proHot" @change="getPageGiftList">只看热门推荐</el-checkbox> <el-checkbox class="vertical-middle" size="small" border :true-label="1" :false-label="0" v-model="listParams.proHot" @change="getPageGiftList">只看热门推荐</el-checkbox>
</div> </div>
<el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading" @sort-change="sortList"> <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading" @sort-change="sortList">
<el-table-column :show-overflow-tooltip="false" width="90" align="left" prop="proHot" fixed="left" label="热门推荐"> <el-table-column :show-overflow-tooltip="false" width="90" align="left" prop="proHot" fixed="left" label="热门推荐">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <el-switch v-model="scope.row.proHot" :active-value="1" :inactive-value="0" @change="changeHotFun(scope.row)"> </el-switch>
v-model="scope.row.proHot" </template>
:active-value="1" </el-table-column>
:inactive-value="0" @change="changeHotFun(scope.row)"> <el-table-column label="礼品信息" align="left" prop="proName" min-width="260">
</el-switch> <template slot-scope="scope">
</template> <div class="ellipsis-100">
</el-table-column> <!-- <img class="vertical-middle table__avatar--gift" :src="scope.row.mainImageUrl || defaultAvatar" width="60" height="60" /> -->
<el-table-column label="礼品信息" align="left" prop="proName" min-width="260">
<template slot-scope="scope"> <img class="vertical-middle table__avatar--gift" v-if="scope.row.mainImageUrl" :src="scope.row.mainImageUrl" width="60" height="60" />
<div class="ellipsis-100" > <img class="vertical-middle table__avatar--gift" v-else src="../../../../static/img/head_default.png" width="60" height="60" />
<img class="vertical-middle table__avatar--gift" :src="scope.row.mainImageUrl || defaultAvatar" width="60" height="60" /> <div class="inline-block vertical-middle">
<div class="inline-block vertical-middle"> <p class="table-name--ellipsis">{{ scope.row.proName || '--' }}</p>
<p class="table-name--ellipsis">{{scope.row.proName || '--'}}</p> <div v-if="scope.row.giftCategoryName">
<div v-if="scope.row.giftCategoryName"> <el-tooltip class="item" effect="dark" :content="scope.row.giftCategoryName" placement="bottom">
<el-tooltip class="item" effect="dark" :content="scope.row.giftCategoryName" placement="bottom"> <p class="fz13 gray table-name--ellipsis">{{ scope.row.giftCategoryName }}</p>
<p class="fz13 gray table-name--ellipsis">{{scope.row.giftCategoryName}}</p> </el-tooltip>
</el-tooltip>
</div>
<p v-else>--</p>
<!-- <p class="fz13 gray table-name--ellipsis">{{scope.row.giftCategoryName || '--'}}</p> -->
</div> </div>
<p v-else>--</p>
<!-- <p class="fz13 gray table-name--ellipsis">{{scope.row.giftCategoryName || '--'}}</p> -->
</div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="积分费用" align="left" prop="integralCost"> <el-table-column label="积分费用" align="left" prop="integralCost">
<template slot-scope="scope"> <template slot-scope="scope">
<updateCount :model="scope.row" theType="integralCost" typeName="积分" @refresh="getPageGiftList"></updateCount> <updateCount :model="scope.row" theType="integralCost" typeName="积分" @refresh="getPageGiftList"></updateCount>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="现金费用" align="left" prop="cashCost"> <el-table-column label="现金费用" align="left" prop="cashCost">
<template slot-scope="scope"> <template slot-scope="scope">
<updateCount :model="scope.row" :precision="2" theType="cashCost" typeName="元" @refresh="getPageGiftList"></updateCount> <updateCount :model="scope.row" :precision="2" theType="cashCost" typeName="元" @refresh="getPageGiftList"></updateCount>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="库存" align="left" prop="sortCost" sortable="custom"> <el-table-column label="库存" align="left" prop="sortCost" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
<updateCount :model="scope.row" theType="virtualStock" @refresh="getPageGiftList"></updateCount> <updateCount :model="scope.row" theType="virtualStock" @refresh="getPageGiftList"></updateCount>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="兑换次数" align="left" prop="sortTimes" sortable="custom"> <el-table-column label="兑换次数" align="left" prop="sortTimes" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.changeType == 1" @click="$router.push('/gift/wxexchange/'+scope.row.integralMallProId)" class="blue">{{scope.row.allExchangeNumber}}</span> <span v-if="scope.row.changeType == 1" @click="$router.push('/gift/wxexchange/' + scope.row.integralMallProId)" class="blue">{{ scope.row.allExchangeNumber }}</span>
<span v-else @click="$router.push('/gift/exchange/'+scope.row.integralMallProId)" class="blue">{{scope.row.allExchangeNumber}}</span> <span v-else @click="$router.push('/gift/exchange/' + scope.row.integralMallProId)" class="blue">{{ scope.row.allExchangeNumber }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="兑换方式" align="left" prop="changeType"> <el-table-column label="兑换方式" align="left" prop="changeType">
<template slot-scope="scope" > <template slot-scope="scope">
<span v-if="scope.row.changeType == 1">微信兑换</span> <span v-if="scope.row.changeType == 1">微信兑换</span>
<span v-if="scope.row.changeType == 2">快递发货</span> <span v-if="scope.row.changeType == 2">快递发货</span>
<span v-if="scope.row.changeType == 3">在线发货</span> <span v-if="scope.row.changeType == 3">在线发货</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="兑换状态" align="left" prop="status" min-width="100px"> <el-table-column label="兑换状态" align="left" prop="status" min-width="100px">
<template slot-scope="scope" > <template slot-scope="scope">
<span v-html="renderStatus(scope.row).html"></span> <span v-html="renderStatus(scope.row).html"></span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="显示状态" align="center" prop="proShowStatus"> <el-table-column label="显示状态" align="center" prop="proShowStatus">
<template slot-scope="scope" > <template slot-scope="scope">
{{renderShowStatus(scope.row)}} {{ renderShowStatus(scope.row) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="left" fixed="right" min-width="160"> <el-table-column label="操作" align="left" fixed="right" min-width="160">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" @click="getLink(scope.row.integralMallProId)">推广</el-button> <el-button type="text" @click="getLink(scope.row.integralMallProId)">推广</el-button>
<el-button type="text" @click="$router.push('/gift/info/'+scope.row.integralMallProId)">编辑</el-button> <el-button type="text" @click="$router.push('/gift/info/' + scope.row.integralMallProId)">编辑</el-button>
<dm-delete @confirm="delData(scope.row)" tips="是否删除该优惠券?"> <dm-delete @confirm="delData(scope.row)" tips="是否删除该优惠券?">
<el-button type="text">删除</el-button> <el-button type="text">删除</el-button>
</dm-delete> </dm-delete>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination> <el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
<!-- 推广 --> <!-- 推广 -->
<eqCodeDialog :modalData="modalData"></eqCodeDialog> <eqCodeDialog :modalData="modalData"></eqCodeDialog>
</section> </section>
</template> </template>
<script> <script>
import { getPageGiftList, getCategoryList, deleteProService ,setHotStatusService} from '@/service/api/mallApi.js'; import { getPageGiftList, getCategoryList, deleteProService, setHotStatusService } from '@/service/api/mallApi.js';
import updateCount from '../common/update-count'; import updateCount from '../common/update-count';
import {formateDateTimeByType,format} from '@/utils/index.js'; import { formateDateTimeByType, format } from '@/utils/index.js';
import eqCodeDialog from '../common/eqCode.vue' import eqCodeDialog from '../common/eqCode.vue';
import request from '../../../api/request.js' import request from '../../../api/request.js';
export default { export default {
name: 'gift-list', name: 'gift-list',
components: { components: {
updateCount, updateCount,
eqCodeDialog eqCodeDialog
}, },
data () { data() {
return { return {
defaultAvatar:require('../../../assets/img/head_default.png'), defaultAvatar: '../../../../static/img/head_default.png',
loading:false, loading: false,
tableList:[], tableList: [],
listParams:{ listParams: {
currentPage:1, currentPage: 1,
pageSize:20, pageSize: 20,
category:'', category: '',
changeType:-1, changeType: -1,
releaseType:-1, releaseType: -1,
showStatus:-1, showStatus: -1,
proHot:'-1', proHot: '-1',
giftName:'', giftName: '',
sortType:'', sortType: '',
sortColumn:'', sortColumn: ''
}, },
total:0, total: 0,
categoryOptions:[], categoryOptions: [],
releaseTypeOptions:[{label:'所有兑换状态',value:-1},{label:'兑换',value:1},{label:'不可兑换',value:0}], releaseTypeOptions: [{ label: '所有兑换状态', value: -1 }, { label: '兑换', value: 1 }, { label: '不可兑换', value: 0 }],
changeTypeOptions:[{label:'所有兑换方式',value:-1},{label:'微信兑换',value:1},{label:'快递发货',value:2},{label:'在线发货',value:3}], changeTypeOptions: [{ label: '所有兑换方式', value: -1 }, { label: '微信兑换', value: 1 }, { label: '快递发货', value: 2 }, { label: '在线发货', value: 3 }],
showStatusOptions:[{label:'所有显示状态',value:-1},{label:'显示',value:1},{label:'不显示',value:2}], showStatusOptions: [{ label: '所有显示状态', value: -1 }, { label: '显示', value: 1 }, { label: '不显示', value: 2 }],
modalData:{ modalData: {
show:false, show: false,
imgUrl:'', imgUrl: '',
loading:false loading: false
}, }
};
},
created() {
this.$store.commit('mutations_breadcrumb', [{ name: '积分商城' }, { name: '礼品', path: '' }]);
this.getPageGiftList();
this.getCategoryList();
},
methods: {
// 获取分类列表
async getCategoryList() {
let res = await getCategoryList();
if (res.errorCode === 0) {
this.categoryOptions = res.result || [];
this.categoryOptions.unshift({ categoryName: '所有分类', integralMallCategoryId: '' });
} }
}, },
created() { renderStatus(item) {
this.$store.commit('mutations_breadcrumb',[{name:'积分商城'},{name:'礼品',path:''}]); var _releaseType = item.releaseType;
this.getPageGiftList(); //上架日期
this.getCategoryList(); var _limit_time_begin = item.limitTimeBegin;
}, //库存
methods: { var _virtual_stock = item.virtualStock;
// 获取分类列表 //兑换日期类型1:全部 2:固定日期 3:每月 4:每周
async getCategoryList() { // 显示状态的优先级：已过期＞无库存＞定时发布＞未在兑换时间
let res = await getCategoryList(); var _exchange_date_type = item.exchangeDateType;
if (res.errorCode === 0) { var dhzt_show_html = '<span class="dm-status--primary">正常</span>';
this.categoryOptions = res.result || []; var dhzt_show = '正常';
this.categoryOptions.unshift({categoryName:'所有分类',integralMallCategoryId:''}) var _exchange_date_week;
} var week;
}, //判断是否在兑换日期内 - 未在兑换时间
renderStatus(item) { if (_virtual_stock <= 0) {
var _releaseType = item.releaseType ; dhzt_show_html = '<span class="dm-status--error">无库存</span>';
//上架日期 dhzt_show = '无库存';
var _limit_time_begin = item.limitTimeBegin ; }
//库存 if (_exchange_date_type == 2) {
var _virtual_stock = item.virtualStock ; if (!(new Date().getTime() >= item.exchangeFixDateBegin && new Date().getTime() <= item.exchangeFixDateEnd + 1000 * 60 * 60 * 24)) {
//兑换日期类型1:全部 2:固定日期 3:每月 4:每周 dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>';
// 显示状态的优先级：已过期＞无库存＞定时发布＞未在兑换时间 dhzt_show = '未在兑换时间';
var _exchange_date_type = item.exchangeDateType ; return {
var dhzt_show_html ='<span class="dm-status--primary">正常</span>' text: dhzt_show,
var dhzt_show = '正常'; html: dhzt_show_html
//判断是否在兑换日期内 - 未在兑换时间 };
if(_virtual_stock<=0) {
dhzt_show_html = '<span class="dm-status--error">无库存</span>';
dhzt_show = "无库存" ;
} }
if(_exchange_date_type==2) { }
if(!(new Date().getTime() >= item.exchangeFixDateBegin && new Date().getTime() <= (item.exchangeFixDateEnd + (1000*60*60*24) ))) { if (_exchange_date_type == 3) {
dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>'; dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>';
dhzt_show = '未在兑换时间'; dhzt_show = '未在兑换时间';
return { const _exchange_date_day = item.exchangeDateDay;
text:dhzt_show, const day = new Date().getDate();
html:dhzt_show_html const _arr = _exchange_date_day.split(',');
}; _arr.map(v => {
} if (day == parseInt(v)) {
} dhzt_show_html = '<span class="dm-status--primary">正常</span>';
if(_exchange_date_type==3) { dhzt_show = '正常';
dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>'; }
dhzt_show = '未在兑换时间'; });
var _exchange_date_day = item.exchangeDateDay ; }
var day = new Date().getDate() ;
var _arr = _exchange_date_day.split(",") ;
_arr.map(v => {
if(day == parseInt(v)) {
dhzt_show_html = '<span class="dm-status--primary">正常</span>' ;
dhzt_show = '正常';
}
})
}
if(_exchange_date_type==4) {
var _exchange_date_week = item.exchangeDateWeek ;
var week = new Date().getDay() ;
if(week == 0) {
week =7 ;
}
if(_exchange_date_week.indexOf(week) == -1) {
dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>';
dhzt_show = '未在兑换时间';
}
}
if(item.exchangeTimeType == 2 && item.exchangeTimeList && (dhzt_show == '无库存'||dhzt_show == '正常')) {
dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>';
dhzt_show = '未在兑换时间';
for(var k=0;k<item.exchangeTimeList.length;k++) {
var _o = item.exchangeTimeList[k] ;
var start = _o.exchangeTimeBeginNumber ;
var end = _o.exchangeTimeEndNumber ;
var _now = format(new Date(),'hhmm') ;
if(_now >= start && _now <= end) {
dhzt_show_html = '<span class="dm-status--primary">正常</span>';
dhzt_show = '正常';
break ;
}
}
}
//定时发布
if(_releaseType == 2 && item.status==2 && new Date().getTime() < _limit_time_begin) {
dhzt_show_html = `<span class="dm-status--success">定时发布<br/>${formateDateTimeByType(new Date(_limit_time_begin),"yyyy-MM-dd-hh-mm-ss")}</span>`;
dhzt_show = '定时发布';
}
if (_exchange_date_type == 4) {
_exchange_date_week = item.exchangeDateWeek;
week = new Date().getDay();
if (week == 0) {
week = 7;
}
if (_exchange_date_week.indexOf(week) == -1) {
dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>';
dhzt_show = '未在兑换时间';
}
}
if(item.status==1) { if (item.exchangeTimeType == 2 && item.exchangeTimeList && (dhzt_show == '无库存' || dhzt_show == '正常')) {
dhzt_show_html = '<span class="dm-status--info">已下架</span>'; dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>';
dhzt_show = "已下架" ; dhzt_show = '未在兑换时间';
} for (let k = 0; k < item.exchangeTimeList.length; k++) {
return { const _o = item.exchangeTimeList[k];
text:dhzt_show, const start = _o.exchangeTimeBeginNumber;
html:dhzt_show_html const end = _o.exchangeTimeEndNumber;
}; const _now = format(new Date(), 'hhmm');
}, if (_now >= start && _now <= end) {
renderShowStatus(item) { dhzt_show_html = '<span class="dm-status--primary">正常</span>';
//商品显示状态 1:上架状态就显示 2:兑换状态下显示 dhzt_show = '正常';
var dhzt_show = this.renderStatus(item).text; break;
var pro_show_status = item.proShowStatus ;
var proShowStatus = "不显示" ;
if(item.status==2) {
if((item.releaseType==1 || (item.releaseType == 2 && new Date().getTime() >= (item.limitTimeBegin || 0)) ) && ( pro_show_status==1 || (pro_show_status==2 && (dhzt_show=="正常" || dhzt_show=='无库存'))) ) {
proShowStatus = "显示" ;
} }
} }
console.log('显示状态',proShowStatus) }
return proShowStatus;
},
// 列表的方法 //定时发布
search() { if (_releaseType == 2 && item.status == 2 && new Date().getTime() < _limit_time_begin) {
this.listParams.currentPage = 1; dhzt_show_html = `<span class="dm-status--success">定时发布<br/>${formateDateTimeByType(new Date(_limit_time_begin), 'yyyy-MM-dd-hh-mm-ss')}</span>`;
this.getPageGiftList(); dhzt_show = '定时发布';
}, }
handleSizeChange(val) {
this.listParams.pageSize = val; if (item.status == 1) {
this.getPageGiftList(); dhzt_show_html = '<span class="dm-status--info">已下架</span>';
}, dhzt_show = '已下架';
handleCurrentChange(val) { }
this.listParams.currentPage = val; return {
this.getPageGiftList(); text: dhzt_show,
}, html: dhzt_show_html
async getPageGiftList() { };
this.loading = true; },
try { renderShowStatus(item) {
let res = await getPageGiftList(this.listParams); //商品显示状态 1:上架状态就显示 2:兑换状态下显示
this.tableList = []; var dhzt_show = this.renderStatus(item).text;
let result = res.result.rows || []; var pro_show_status = item.proShowStatus;
result.map(v => { var proShowStatus = '不显示';
v.integralCostFlag = false; if (item.status == 2) {
v.cashCostFlag = false; if ((item.releaseType == 1 || (item.releaseType == 2 && new Date().getTime() >= (item.limitTimeBegin || 0))) && (pro_show_status == 1 || (pro_show_status == 2 && (dhzt_show == '正常' || dhzt_show == '无库存')))) {
v.virtualStockFlag = false; proShowStatus = '显示';
v.allExchangeNumberFlag = false;
this.tableList.push(v);
})
this.total = res.result.total;
} catch(err) {
this.$tips({type:'warning',message:'加载列表失败'});
} }
this.loading = false; }
}, return proShowStatus;
// 删除 },
delData(row) {
deleteProService({proId:row.integralMallProId}).then(res => { // 列表的方法
search() {
this.listParams.currentPage = 1;
this.getPageGiftList();
},
handleSizeChange(val) {
this.listParams.pageSize = val;
this.getPageGiftList();
},
handleCurrentChange(val) {
this.listParams.currentPage = val;
this.getPageGiftList();
},
async getPageGiftList() {
this.loading = true;
try {
let res = await getPageGiftList(this.listParams);
this.tableList = [];
let result = res.result.rows || [];
result.map(v => {
v.integralCostFlag = false;
v.cashCostFlag = false;
v.virtualStockFlag = false;
v.allExchangeNumberFlag = false;
this.tableList.push(v);
});
this.total = res.result.total;
} catch (err) {
this.$tips({ type: 'warning', message: '加载列表失败' });
}
this.loading = false;
},
// 删除
delData(row) {
deleteProService({ proId: row.integralMallProId })
.then(res => {
if (res.errorCode === 0) { if (res.errorCode === 0) {
this.$tips({type: 'success',message: '删除成功!'}); this.$tips({ type: 'success', message: '删除成功!' });
this.getPageGiftList(); this.getPageGiftList();
} else { } else {
this.$tips({type: 'error',message: '删除失败!'}); this.$tips({ type: 'error', message: '删除失败!' });
} }
}).catch(err => {
this.$tips({type: 'error',message: '删除失败!'});
}) })
}, .catch(err => {
// 推广 this.$tips({ type: 'error', message: '删除失败!' });
getLink(mallProId){ });
this.modalData.loading=true },
let params={ // 推广
integralMallProId:mallProId, getLink(mallProId) {
type:"gift" this.modalData.loading = true;
let params = {
integralMallProId: mallProId,
type: 'gift'
};
this.modalData.show = true;
request.get('/api-integral-mall/get-qRCode', { params }).then(res => {
if (res.data.errorCode === 0) {
this.modalData.show = true;
this.modalData.pageUrl = res.data.result.page;
this.modalData.imgUrl = res.data.result.url;
this.modalData.loading = false;
} else {
this.$message.error(res.data.message);
} }
this.modalData.show=true });
request.get('/api-integral-mall/get-qRCode',{params}).then(res => { },
if(res.data.errorCode===0){ // 热门推荐
this.modalData.show=true changeHotFun(row) {
this.modalData.pageUrl=res.data.result.page setHotStatusService({ status: Number(row.proHot), integralMallProId: row.integralMallProId })
this.modalData.imgUrl=res.data.result.url .then(res => {
this.modalData.loading=false
}else{
this.$message.error(res.data.message)
}
})
},
// 热门推荐
changeHotFun(row) {
setHotStatusService({status:Number(row.proHot),integralMallProId:row.integralMallProId}).then(res => {
if (res.errorCode === 0) { if (res.errorCode === 0) {
this.$tips({type: 'success',message: '设置成功!'}); this.$tips({ type: 'success', message: '设置成功!' });
} else if (res.errorCode === 1){ } else if (res.errorCode === 1) {
this.$tips({type: 'warning',message: '热门推荐礼品上限为20个,当前已超限制,请先取消其他礼品的推荐再来试试'}); this.$tips({ type: 'warning', message: '热门推荐礼品上限为20个,当前已超限制,请先取消其他礼品的推荐再来试试' });
} else { } else {
this.$tips({type: 'error',message: '删除失败!'}); this.$tips({ type: 'error', message: '删除失败!' });
} }
this.getPageGiftList(); this.getPageGiftList();
}).catch(err => {
this.getPageGiftList();
this.$tips({type: 'error',message: '删除失败!'});
}) })
}, .catch(err => {
//列表 排序 this.getPageGiftList();
sortList(obj) { this.$tips({ type: 'error', message: '删除失败!' });
this.listParams.sortColumn = obj.prop; });
this.listParams.sortType = obj.order ? (obj.order === 'descending' ? 'desc' : 'asc') : ''; },
this.getPageGiftList(); //列表 排序
} sortList(obj) {
this.listParams.sortColumn = obj.prop;
this.listParams.sortType = obj.order ? (obj.order === 'descending' ? 'desc' : 'asc') : '';
this.getPageGiftList();
} }
} }
};
</script> </script>
src/views/mall/goods/list.vue
<template> <template>
<section class="dm-wrap"> <section class="dm-wrap">
<!-- <el-input type="textarea" rows="4"></el-input> --> <!-- <el-input type="textarea" rows="4"></el-input> -->
<div class="pb22 clearfix"> <div class="pb22 clearfix">
<el-date-picker class="w250" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="getPageUndeliverList"></el-date-picker> <el-date-picker class="w250" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="getPageUndeliverList"></el-date-picker>
<el-select class="vertical-middle w150" v-model="listParams.changeType" placeholder="选择发货类型" @change="getPageUndeliverList"> <el-select class="vertical-middle w150" v-model="listParams.changeType" placeholder="选择发货类型" @change="getPageUndeliverList">
<el-option v-for="v in changeTypeOptions" :key="v.value" :label="v.label" :value="v.value"></el-option> <el-option v-for="v in changeTypeOptions" :key="v.value" :label="v.label" :value="v.value"></el-option>
</el-select> </el-select>
<el-select class="vertical-middle w150" v-model="listParams.orderStatus" placeholder="选择订单状态" @change="getPageUndeliverList"> <el-select class="vertical-middle w150" v-model="listParams.orderStatus" placeholder="选择订单状态" @change="getPageUndeliverList">
<el-option v-for="v in orderStatusOptions" :key="v.value" :label="v.label" :value="v.value"></el-option> <el-option v-for="v in orderStatusOptions" :key="v.value" :label="v.label" :value="v.value"></el-option>
</el-select> </el-select>
<el-input v-model="listParams.searchParams" class="w300" placeholder="请输入流水号/会员姓名/会员卡号" clearable @change="getPageUndeliverList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input> <el-input v-model="listParams.searchParams" class="w300" placeholder="请输入流水号/会员姓名/会员卡号" clearable @change="getPageUndeliverList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
<el-button class="fr" type="primary" @click="exportExcel">导出列表</el-button> <el-button class="fr" type="primary" @click="exportExcel">导出列表</el-button>
</div> </div>
<el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading"> <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading">
<el-table-column label="礼品信息" align="left" prop="giftName" min-width="140"> <el-table-column label="礼品信息" align="left" prop="giftName" min-width="140">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="ellipsis-100" > <div class="ellipsis-100">
<img class="vertical-middle table__avatar" :src="scope.row.giftMainPic || defaultAvatar" width="60" height="60" /> <!-- <img class="vertical-middle table__avatar" :src="scope.row.giftMainPic || defaultAvatar" width="60" height="60" />
-->
<img class="vertical-middle table__avatar" v-if="scope.row.giftMainPic" :src="scope.row.giftMainPic" width="60" height="60" />
<img class="vertical-middle table__avatar" v-else src="../../../../static/img/head_default.png" width="60" height="60" />
<div class="inline-block vertical-middle"> <div class="inline-block vertical-middle">
<p class="table-name--ellipsis">{{scope.row.giftName || '--'}}</p> <p class="table-name--ellipsis">{{ scope.row.giftName || '--' }}</p>
<p class="fz13 gray" style="line-height:18px">{{scope.row.giftCategoryName || '--'}}</p> <p class="fz13 gray" style="line-height:18px">{{ scope.row.giftCategoryName || '--' }}</p>
</div> </div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="兑换时间" align="left" prop="createTime"> <el-table-column label="兑换时间" align="left" prop="createTime">
<template slot-scope="scope" > <template slot-scope="scope">
<span>{{formateDateTimeByType(scope.row.createTime,'yyyy-MM-dd-HH-mm-ss')}}</span> <span>{{ formateDateTimeByType(scope.row.createTime, 'yyyy-MM-dd-HH-mm-ss') }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="流水号" align="left" prop="definedCode"></el-table-column> <el-table-column label="流水号" align="left" prop="definedCode"></el-table-column>
<el-table-column label="发货类型" align="left" prop="changeType"> <el-table-column label="发货类型" align="left" prop="changeType">
<template slot-scope="scope" > <template slot-scope="scope">
<span v-if="scope.row.changeType == 2">快递发货</span> <span v-if="scope.row.changeType == 2">快递发货</span>
<span v-else-if="scope.row.changeType == 3">在线发货</span> <span v-else-if="scope.row.changeType == 3">在线发货</span>
<span v-else>--</span> <span v-else>--</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="会员信息" align="left" prop="changeType" min-width="180"> <el-table-column label="会员信息" align="left" prop="changeType" min-width="180">
<template slot-scope="scope" > <template slot-scope="scope">
<memberInfoCom :row="scope.row"></memberInfoCom> <memberInfoCom :row="scope.row"></memberInfoCom>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="消耗积分" align="left" prop="status"> <el-table-column label="消耗积分" align="left" prop="status">
<template slot-scope="scope" > <template slot-scope="scope">
<p>{{scope.row.unitCostIntegral}}</p> <p>{{ scope.row.unitCostIntegral }}</p>
<p>{{scope.row.payCost}}</p> <p>{{ scope.row.payCost }}</p>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="微信支付流水号" align="left" prop="proShowStatus"> <el-table-column label="微信支付流水号" align="left" prop="proShowStatus">
<template slot-scope="scope" > <template slot-scope="scope">
<span>{{scope.row.definedCode || '--'}}</span> <span>{{ scope.row.definedCode || '--' }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="left" fixed="right"> <el-table-column label="操作" align="left" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<p> <p>
<el-button type="text" v-if="scope.row.status === 1" @click="sendOrder(scope.row)">发货</el-button> <el-button type="text" v-if="scope.row.status === 1" @click="sendOrder(scope.row)">发货</el-button>
...@@ -68,250 +71,255 @@ ...@@ -68,250 +71,255 @@
<!-- 0 取消订单 --> <!-- 0 取消订单 -->
<el-button type="text" v-if="scope.row.status === 1" @click="cancelOrder(scope.row)">取消订单</el-button> <el-button type="text" v-if="scope.row.status === 1" @click="cancelOrder(scope.row)">取消订单</el-button>
<!-- 1 在线发货 已发货 详情 --> <!-- 1 在线发货 已发货 详情 -->
<el-button type="text" v-if="scope.row.status === 3 && scope.row.changeType !== 2" @click="queryOrderInfo(scope.row,1)">查看详情</el-button> <el-button type="text" v-if="scope.row.status === 3 && scope.row.changeType !== 2" @click="queryOrderInfo(scope.row, 1)">查看详情</el-button>
<!-- 2 在线发货 取消 详情 --> <!-- 2 在线发货 取消 详情 -->
<el-button type="text" v-if="scope.row.status === 0 && scope.row.changeType !== 2" @click="queryOrderInfo(scope.row,2)">查看详情</el-button> <el-button type="text" v-if="scope.row.status === 0 && scope.row.changeType !== 2" @click="queryOrderInfo(scope.row, 2)">查看详情</el-button>
<!-- 3 快递发货 取消 详情 --> <!-- 3 快递发货 取消 详情 -->
<el-button type="text" v-if="scope.row.status === 0 && scope.row.changeType === 2" @click="queryOrderInfo(scope.row,3)">查看详情</el-button> <el-button type="text" v-if="scope.row.status === 0 && scope.row.changeType === 2" @click="queryOrderInfo(scope.row, 3)">查看详情</el-button>
<!-- 4 快递发货 已发货 查看物流 --> <!-- 4 快递发货 已发货 查看物流 -->
<el-button type="text" v-if="scope.row.status === 3 && scope.row.changeType === 2" @click="queryExpress(scope.row,false)">查看物流</el-button> <el-button type="text" v-if="scope.row.status === 3 && scope.row.changeType === 2" @click="queryExpress(scope.row, false)">查看物流</el-button>
</p> </p>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination> <el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
<express :show.sync="expressShow" :id="expressId" :isInfo="isInfo"></express> <express :show.sync="expressShow" :id="expressId" :isInfo="isInfo"></express>
<sendGoods :show.sync="sendGoodsShow" :id="expressId" @refresh="refresh"></sendGoods> <sendGoods :show.sync="sendGoodsShow" :id="expressId" @refresh="refresh"></sendGoods>
<orderInfo :show.sync="orderInfoShow" :id="expressId" @refresh="refresh" :infoStatus="orderInfoStatus"></orderInfo> <orderInfo :show.sync="orderInfoShow" :id="expressId" @refresh="refresh" :infoStatus="orderInfoStatus"></orderInfo>
<vue-gic-export-excel :dataArr="tableList" :dialogVisible.sync="dialogVisible" :type="2" :excelUrl="excelUrl" :params="params" :projectName="projectName"></vue-gic-export-excel> <vue-gic-export-excel :dataArr="tableList" :dialogVisible.sync="dialogVisible" :type="2" :excelUrl="excelUrl" :params="params" :projectName="projectName"></vue-gic-export-excel>
</section> </section>
</template> </template>
<script> <script>
import { getPageUndeliverList,orderOptService,exportOnlineListExcel } from '@/service/api/mallApi.js'; import { getPageUndeliverList, orderOptService } from '@/service/api/mallApi.js';
import {formateDateTimeByType} from '@/utils/index.js'; import { formateDateTimeByType } from '@/utils/index.js';
import express from '../common/express'; import express from '../common/express';
import sendGoods from './send-goods'; import sendGoods from './send-goods';
import orderInfo from './order-info'; import orderInfo from './order-info';
import memberInfoCom from '../common/member-info'; import memberInfoCom from '../common/member-info';
export default { export default {
name: 'goods-list', name: 'goods-list',
components: { components: {
express, express,
sendGoods, sendGoods,
orderInfo, orderInfo,
memberInfoCom memberInfoCom
},
data() {
return {
formateDateTimeByType,
// defaultAvatar: require('../../../assets/img/head_default.png'),
defaultAvatar: ' ../../../../static/img/head_default.png ',
loading: false,
tableList: [],
listParams: {
currentPage: 1,
pageSize: 20,
changeType: -1,
orderStatus: -1,
searchParams: '',
beginTime: '',
endTime: ''
},
total: 0,
changeTypeOptions: [{ label: '所有发货类型', value: -1 }, { label: '快递发货', value: 2 }, { label: '在线发货', value: 3 }],
orderStatusOptions: [{ label: '所有订单状态', value: -1 }, { label: '待发货', value: 1 }, { label: '已发货', value: 3 }, { label: '已取消', value: 0 }, { label: '待付款', value: 11 }],
textareaValue: '',
expressShow: false,
sendGoodsShow: false,
orderInfoShow: false,
orderInfoStatus: 1,
expressId: '',
isInfo: false,
dateTime: ['', ''],
// 导出数据控件
projectName: 'integral-mall', // 当前项目名
dialogVisible: false,
excelUrl: '/api-integral-mall/download-integral-online-excel', // 下载数据的地址
params: {} // 传递的参数
};
},
created() {
this.$store.commit('mutations_breadcrumb', [{ name: '积分商城' }, { name: '待发货', path: '' }]);
this.getPageUndeliverList();
},
methods: {
// 列表的方法
/* eslint-disable */
refresh() {
$bus.$emit('refresh-not-send-count');
this.getPageUndeliverList();
}, },
data () { search() {
return { this.listParams.currentPage = 1;
formateDateTimeByType, this.getPageUndeliverList();
defaultAvatar:require('../../../assets/img/head_default.png'),
loading:false,
tableList:[],
listParams:{
currentPage:1,
pageSize:20,
changeType:-1,
orderStatus:-1,
searchParams:'',
beginTime:'',
endTime:'',
},
total:0,
changeTypeOptions:[{label:'所有发货类型',value:-1},{label:'快递发货',value:2},{label:'在线发货',value:3}],
orderStatusOptions:[{label:'所有订单状态',value:-1},{label:'待发货',value:1},{label:'已发货',value:3},{label:'已取消',value:0},{label:'待付款',value:11}],
textareaValue:'',
expressShow:false,
sendGoodsShow:false,
orderInfoShow:false,
orderInfoStatus:1,
expressId:'',
isInfo:false,
dateTime:['',''],
// 导出数据控件
projectName: 'integral-mall', // 当前项目名
dialogVisible:false,
excelUrl:'/api-integral-mall/download-integral-online-excel', // 下载数据的地址
params:{}, // 传递的参数
}
}, },
created() { handleSizeChange(val) {
this.$store.commit('mutations_breadcrumb',[{name:'积分商城'},{name:'待发货',path:''}]); this.listParams.pageSize = val;
this.getPageUndeliverList(); this.getPageUndeliverList();
}, },
methods: { handleCurrentChange(val) {
// 列表的方法 this.listParams.currentPage = val;
refresh() { this.getPageUndeliverList();
$bus.$emit('refresh-not-send-count'); },
this.getPageUndeliverList(); async getPageUndeliverList() {
}, if (this.dateTime) {
search() { this.listParams.beginTime = formateDateTimeByType(this.dateTime[0], 'yyyy-MM-dd');
this.listParams.currentPage = 1; this.listParams.endTime = formateDateTimeByType(this.dateTime[1], 'yyyy-MM-dd');
this.getPageUndeliverList(); } else {
}, this.listParams.beginTime = this.listParams.senendTimedEndTime = '';
handleSizeChange(val) { }
this.listParams.pageSize = val; this.loading = true;
this.getPageUndeliverList(); let res = await getPageUndeliverList(this.listParams);
}, this.tableList = res.result.rows || [];
handleCurrentChange(val) { this.total = res.result.total || 0;
this.listParams.currentPage = val; this.loading = false;
this.getPageUndeliverList(); },
},
async getPageUndeliverList() {
if (this.dateTime) {
this.listParams.beginTime = formateDateTimeByType(this.dateTime[0],'yyyy-MM-dd');
this.listParams.endTime = formateDateTimeByType(this.dateTime[1],'yyyy-MM-dd');
} else {
this.listParams.beginTime = this.listParams.senendTimedEndTime = '';
}
this.loading = true;
let res = await getPageUndeliverList(this.listParams);
this.tableList = res.result.rows || [];
this.total = res.result.total || 0;
this.loading = false;
},
// 删除 // 删除
delData(row) { // delData(row) {
deleteProService({proId:row.integralMallProId}).then(res => { // deleteProService({ proId: row.integralMallProId })
this.$tips({type: 'success',message: '删除成功!'}); // .then(res => {
this.getPageUndeliverList(); // this.$tips({ type: 'success', message: '删除成功!' });
}).catch(err => { // this.getPageUndeliverList();
this.$tips({type: 'error',message: '删除失败!'}); // })
}) // .catch(err => {
}, // this.$tips({ type: 'error', message: '删除失败!' });
// 取消订单 // });
cancelOrder(row) { // },
this.$prompt(` // 取消订单
cancelOrder(row) {
this.$prompt(
`
<p>确认取消订单吗？</p><p>积分将会实时返回给会员。相应礼品的库存会归还</p> <p>确认取消订单吗？</p><p>积分将会实时返回给会员。相应礼品的库存会归还</p>
`, '取消订单', { `,
'取消订单',
{
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
showCancelButton: true, showCancelButton: true,
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
inputType:'textarea', inputType: 'textarea',
inputPlaceholder:'请输入取消原因', inputPlaceholder: '请输入取消原因',
inputErrorMessage:'原因不能为空', inputErrorMessage: '原因不能为空',
inputValidator:function(value) { inputValidator: function(value) {
if (!value) { if (!value) {
return false; return false;
} else if (value.replace(/[^\x00-\xff]/gi, "--").length > 100) { } else if (value.replace(/[^\x00-\xff]/gi, '--').length > 100) {
return '中文限制50字，数字字母限制100字符' return '中文限制50字，数字字母限制100字符';
} else { } else {
return true; return true;
} }
} }
}).then(({ value }) => { }
orderOptService({optType:2,integralMallProExchangeId:row.integralMallProExchangeId,cancelReason:value}).then(res => { )
.then(({ value }) => {
orderOptService({ optType: 2, integralMallProExchangeId: row.integralMallProExchangeId, cancelReason: value }).then(res => {
if (res.errorCode === 0) { if (res.errorCode === 0) {
this.$tips({type:'success',message:'取消订单成功'}); this.$tips({ type: 'success', message: '取消订单成功' });
this.getPageUndeliverList(); this.getPageUndeliverList();
} else { } else {
this.$tips({type:'error',message:'取消订单失败'}); this.$tips({ type: 'error', message: '取消订单失败' });
}
})
}).catch(err => {
console.log(err);
});
},
// 发货
sendOrder(row) {
if(row.changeType === 2) {
this.sendOrderOutline(row);
} else if (row.changeType === 3) {
this.sendOrderOnline(row);
}
},
// 在线发货
sendOrderOnline(row) {
this.$prompt('请输入发货内容', '在线发货', {
dangerouslyUseHTMLString: true,
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
inputType:'textarea',
inputPlaceholder:'请输入发货内容',
inputErrorMessage:'发货内容不能为空',
inputValidator:function(value) {
if (!value) {
return false;
} else if (value.replace(/[^\x00-\xff]/gi, "--").length > 200) {
return '中文限制100字，数字字母限制200字符'
} else {
return true;
} }
});
})
.catch(err => {});
},
// 发货
sendOrder(row) {
if (row.changeType === 2) {
this.sendOrderOutline(row);
} else if (row.changeType === 3) {
this.sendOrderOnline(row);
}
},
// 在线发货
sendOrderOnline(row) {
this.$prompt('请输入发货内容', '在线发货', {
dangerouslyUseHTMLString: true,
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
inputType: 'textarea',
inputPlaceholder: '请输入发货内容',
inputErrorMessage: '发货内容不能为空',
inputValidator: function(value) {
if (!value) {
return false;
} else if (value.replace(/[^\x00-\xff]/gi, '--').length > 200) {
return '中文限制100字，数字字母限制200字符';
} else {
return true;
} }
}).then(({ value }) => { }
orderOptService({optType:1,integralMallProExchangeId:row.integralMallProExchangeId,deliveryContent:value}).then(res => { })
.then(({ value }) => {
orderOptService({ optType: 1, integralMallProExchangeId: row.integralMallProExchangeId, deliveryContent: value }).then(res => {
if (res.errorCode === 0) { if (res.errorCode === 0) {
this.$tips({type:'success',message:'发货成功'}); this.$tips({ type: 'success', message: '发货成功' });
this.getPageUndeliverList(); this.getPageUndeliverList();
} else { } else {
this.$tips({type:'error',message:'发货失败'}); this.$tips({ type: 'error', message: '发货失败' });
} }
}) });
}).catch(err => { })
console.log(err); .catch(err => {});
}); },
}, // 快递发货
// 快递发货 sendOrderOutline(row) {
sendOrderOutline(row) { this.sendGoodsShow = true;
this.sendGoodsShow = true; this.expressId = row.integralMallProExchangeId;
this.expressId = row.integralMallProExchangeId; },
},
// 查看快递 // 查看快递
queryExpress(row,flag) { queryExpress(row, flag) {
this.expressShow = true; this.expressShow = true;
this.isInfo = flag; this.isInfo = flag;
this.expressId = row.integralMallProExchangeId; this.expressId = row.integralMallProExchangeId;
}, },
// 查看订单详情和取消详情 // 查看订单详情和取消详情
/** /**
* tag * tag
* 1 在线发货 已发货 详情 * 1 在线发货 已发货 详情
* 2 在线发货 取消 详情 * 2 在线发货 取消 详情
* 3 快递发货 取消 详情 * 3 快递发货 取消 详情
*/ */
queryOrderInfo(row,tag) { queryOrderInfo(row, tag) {
this.orderInfoShow = true; this.orderInfoShow = true;
this.orderInfoStatus = tag; this.orderInfoStatus = tag;
this.expressId = row.integralMallProExchangeId; this.expressId = row.integralMallProExchangeId;
}, },
// 导出列表 // 导出列表
exportExcel(){ exportExcel() {
if (this.dateTime) { if (this.dateTime) {
this.listParams.beginTime = formateDateTimeByType(this.dateTime[0],'yyyy-MM-dd'); this.listParams.beginTime = formateDateTimeByType(this.dateTime[0], 'yyyy-MM-dd');
this.listParams.endTime = formateDateTimeByType(this.dateTime[1],'yyyy-MM-dd'); this.listParams.endTime = formateDateTimeByType(this.dateTime[1], 'yyyy-MM-dd');
} else { } else {
this.listParams.beginTime = this.listParams.senendTimedEndTime = ''; this.listParams.beginTime = this.listParams.senendTimedEndTime = '';
} }
if (!this.listParams.beginTime || !this.listParams.endTime) { if (!this.listParams.beginTime || !this.listParams.endTime) {
this.$tips({type: 'warning',message: '时间不能为空'}); this.$tips({ type: 'warning', message: '时间不能为空' });
return; return;
} }
this.params = { this.params = {
orderStatus:this.listParams.orderStatus, orderStatus: this.listParams.orderStatus,
changeType:this.listParams.changeType, changeType: this.listParams.changeType,
searchParams:this.listParams.searchParams, searchParams: this.listParams.searchParams,
beginTime:this.listParams.beginTime, beginTime: this.listParams.beginTime,
endTime:this.listParams.endTime, endTime: this.listParams.endTime,
requestProject:'integral-mall' requestProject: 'integral-mall'
} };
this.dialogVisible = true this.dialogVisible = true;
// window.location = `${exportOnlineListExcel}?orderStatus=${this.listParams.orderStatus}&changeType=${this.listParams.changeType}&searchParams=${this.listParams.searchParams}&beginTime=${this.listParams.beginTime}&endTime=${this.listParams.endTime}&requestProject=marketing`; // window.location = `${exportOnlineListExcel}?orderStatus=${this.listParams.orderStatus}&changeType=${this.listParams.changeType}&searchParams=${this.listParams.searchParams}&beginTime=${this.listParams.beginTime}&endTime=${this.listParams.endTime}&requestProject=marketing`;
},
statusFilter(val) {
let result = '--';
this.releaseTypeOptions.map(v => {
if (v.value === val) {
result = v.label;
}
});
return result;
},
}, },
} statusFilter(val) {
let result = '--';
this.releaseTypeOptions.map(v => {
if (v.value === val) {
result = v.label;
}
});
return result;
}
}
};
</script> </script>
src/views/mall/goods/order-info.vue
...@@ -2,19 +2,25 @@ ...@@ -2,19 +2,25 @@
<el-dialog class="express dialog__body__nopadding" title="查看详情" :visible.sync="show" width="40%" :before-close="close"> <el-dialog class="express dialog__body__nopadding" title="查看详情" :visible.sync="show" width="40%" :before-close="close">
<div class="express--info"> <div class="express--info">
<div v-if="infoStatus === 3"> <div v-if="infoStatus === 3">
<p>收件人：<span style="color:#606266">{{info.consignee || '--'}}</span></p> <p>
<p>联系方式：<span style="color:#606266">{{info.consigneePhone || '--'}}</span></p> 收件人：<span style="color:#606266">{{ info.consignee || '--' }}</span>
<p>收货地址：<span style="color:#606266">{{info.receivingAddress || '--'}}</span></p> </p>
<p>
联系方式：<span style="color:#606266">{{ info.consigneePhone || '--' }}</span>
</p>
<p>
收货地址：<span style="color:#606266">{{ info.receivingAddress || '--' }}</span>
</p>
</div> </div>
<div v-if="infoStatus === 1"> <div v-if="infoStatus === 1">
<p>发货时间：{{formateDateTimeByType(info.deliveryTime,'yyyy-MM-dd-HH-mm') || '--'}}</p> <p>发货时间：{{ formateDateTimeByType(info.deliveryTime, 'yyyy-MM-dd-HH-mm') || '--' }}</p>
<p>操作人员：{{info.clerkName || '--'}}</p> <p>操作人员：{{ info.clerkName || '--' }}</p>
<p>发货内容：{{info.deliveryContent || '--'}}</p> <p>发货内容：{{ info.deliveryContent || '--' }}</p>
</div> </div>
<div v-if="infoStatus !== 1"> <div v-if="infoStatus !== 1">
<p>取消时间：{{formateDateTimeByType(info.cancelTime,'yyyy-MM-dd-HH-mm') || '--'}}</p> <p>取消时间：{{ formateDateTimeByType(info.cancelTime, 'yyyy-MM-dd-HH-mm') || '--' }}</p>
<p>操作人员：{{info.clerkName || '--'}}</p> <p>操作人员：{{ info.clerkName || '--' }}</p>
<p>取消原因：{{info.cancelReason || '--'}}</p> <p>取消原因：{{ info.cancelReason || '--' }}</p>
</div> </div>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
...@@ -23,57 +29,56 @@ ...@@ -23,57 +29,56 @@
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import { getLogisticsInfo } from '@/service/api/mallApi.js';
import { formateDateTimeByType } from '@/utils/index.js';
import {getLogisticsInfo,getLogisticsList,orderOptService} from '@/service/api/mallApi.js'; export default {
import {formateDateTimeByType} from '@/utils/index.js'; props: {
show: {
export default { type: Boolean,
props:{ default: false
show:{
type:Boolean,
default:false
},
id:{
type:String,
default:''
},
infoStatus:{
type:Number,
default:false
}
}, },
watch:{ id: {
show(val) { type: String,
if (val) { default: ''
this.getLogisticsInfo();
}
}
}, },
data() { infoStatus: {
return { type: Number,
formateDateTimeByType, default: 0
loading:false, }
info:{} },
watch: {
show(val) {
if (val) {
this.getLogisticsInfo();
} }
}
},
data() {
return {
formateDateTimeByType,
loading: false,
info: {}
};
},
methods: {
close() {
this.$emit('update:show', false);
}, },
methods: { async getLogisticsInfo() {
close() { this.loading = true;
this.$emit('update:show',false); let res = await getLogisticsInfo({ integralMallProExchangeId: this.id });
}, if (res.errorCode === 0) {
async getLogisticsInfo() { this.info = res.result.changeLog || {};
this.loading = true;
let res = await getLogisticsInfo({integralMallProExchangeId:this.id});
if (res.errorCode === 0) {
this.info = res.result.changeLog || {};
}
this.loading = false;
} }
this.loading = false;
} }
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.express{ .express {
&--info { &--info {
p { p {
line-height: 30px; line-height: 30px;
......
src/views/mall/goods/send-goods.vue
<template> <template>
<el-dialog class="express dialog__body__nopadding" title="发货" :visible.sync="show" width="40%" :before-close="close"> <el-dialog class="express dialog__body__nopadding" title="发货" :visible.sync="show" width="40%" :before-close="close">
<div class="express--info"> <div class="express--info">
<p>收件人：<span style="color:#606266">{{info.consignee || '--'}}</span></p> <p>
<p>联系方式：<span style="color:#606266">{{info.consigneePhone || '--'}}</span></p> 收件人：<span style="color:#606266">{{ info.consignee || '--' }}</span>
<p>收货地址：<span style="color:#606266">{{info.receivingAddress || '--'}}</span></p> </p>
<p class="pb10">快递公司： <p>
<el-select 联系方式：<span style="color:#606266">{{ info.consigneePhone || '--' }}</span>
class="vertical-middle w300" </p>
v-model="params.logisticsCompanyId" <p>
placeholder="选择快递" 收货地址：<span style="color:#606266">{{ info.receivingAddress || '--' }}</span>
@change="changeLogistics"> </p>
<el-option <div class="pb10">
v-for="v in logisticsOptions" 快递公司：
:key="v.logisticsCompanyId" <el-select class="vertical-middle w300" v-model="params.logisticsCompanyId" placeholder="选择快递" @change="changeLogistics">
:label="v.logisticsCompanyName" <el-option v-for="v in logisticsOptions" :key="v.logisticsCompanyId" :label="v.logisticsCompanyName" :value="v.logisticsCompanyId"> </el-option>
:value="v.logisticsCompanyId">
</el-option>
</el-select> </el-select>
<div style="margin:0 0 10px 75px" v-show="otherLogistics"> <div style="margin:0 0 10px 75px" v-show="otherLogistics">
<el-input class="vertical-middle w300" v-model="params.otherLogisticsCompanyName" placeholder="请输入快递公司" @input="(value)=>logisticsNameLimit(value)"></el-input> <el-input class="vertical-middle w300" v-model="params.otherLogisticsCompanyName" placeholder="请输入快递公司" @input="value => logisticsNameLimit(value)"></el-input>
<span style="font-size:12px;color:rgb(144, 147, 153);display:block;margin-top:5px">若设置为其他快递公司，则系统不提供物流信息的查询</span> <span style="font-size:12px;color:rgb(144, 147, 153);display:block;margin-top:5px">若设置为其他快递公司，则系统不提供物流信息的查询</span>
</div> </div>
</p> </div>
<p>运单号码：<el-input class="vertical-middle w300" v-model="params.courierNumber" placeholder="请输入快递单号" @input="(value)=>courierNumberLimit(value)"></el-input></p> <p>运单号码：<el-input class="vertical-middle w300" v-model="params.courierNumber" placeholder="请输入快递单号" @input="value => courierNumberLimit(value)"></el-input></p>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="close">关 闭</el-button> <el-button @click="close">关 闭</el-button>
...@@ -31,180 +29,171 @@ ...@@ -31,180 +29,171 @@
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import { getLogisticsInfo, getLogisticsList, orderOptService } from '@/service/api/mallApi.js';
import {getLogisticsInfo,getLogisticsList,orderOptService} from '@/service/api/mallApi.js'; export default {
export default { props: {
props:{ show: {
show:{ type: Boolean,
type:Boolean, default: false
default:false
},
id:{
type:String,
default:''
}
},
watch:{
show(val) {
if (val) {
this.getLogisticsInfo();
}
}
}, },
data() { id: {
return { type: String,
loading:false, default: ''
info:{}, }
logisticsOptions:[], },
params:{ watch: {
logisticsCompanyId:'', show(val) {
logisticsCompanyCode:'', if (val) {
courierNumber:'', this.getLogisticsInfo();
otherLogisticsCompanyName:'',
},
otherLogistics:false
} }
}
},
data() {
return {
loading: false,
info: {},
logisticsOptions: [],
params: {
logisticsCompanyId: '',
logisticsCompanyCode: '',
courierNumber: '',
otherLogisticsCompanyName: ''
},
otherLogistics: false
};
},
created() {
this.getLogisticsList();
},
methods: {
close() {
this.$emit('update:show', false);
this.otherLogistics = false;
this.params.otherLogisticsCompanyName = ''; //快递公司
this.params.logisticsCompanyId = ''; //运单id
this.params.courierNumber = ''; //运单bain好
}, },
created() { //限制物流公司的名称
this.getLogisticsList(); logisticsNameLimit(value) {
this.$nextTick(() => {
this.params.otherLogisticsCompanyName = this.getInputVal2(value, 8);
});
}, },
methods: { //快递公司下拉
close() { changeLogistics(value) {
this.$emit('update:show',false); if (value) {
this.otherLogistics=false let code = this.logisticsOptions.find(item => {
this.params.otherLogisticsCompanyName=''//快递公司 return item.logisticsCompanyId === value;
this.params.logisticsCompanyId=''//运单id }).logisticsCompanyCode;
this.params.courierNumber=''//运单bain好 if (code === 'QITA') {
}, this.otherLogistics = true;
//限制物流公司的名称
logisticsNameLimit(value){
this.$nextTick(() => {
this.params.otherLogisticsCompanyName = this.getInputVal2(value,8)
})
},
//快递公司下拉
changeLogistics(value){
console.log('物流id',value)
if ( value ) {
let code = this.logisticsOptions.find( item => {
return item.logisticsCompanyId ===value
} ).logisticsCompanyCode
if(code==='QITA'){
this.otherLogistics=true
}else{
this.otherLogistics=false
this.params.otherLogisticsCompanyName=''
}
} else { } else {
this.otherLogistics=false this.otherLogistics = false;
this.params.otherLogisticsCompanyName='' this.params.otherLogisticsCompanyName = '';
} }
}, } else {
submit() { this.otherLogistics = false;
if (!this.params.logisticsCompanyId) { this.params.otherLogisticsCompanyName = '';
this.$tips({type:'warning',message:'请选择快递'}); }
return; },
submit() {
if (!this.params.logisticsCompanyId) {
this.$tips({ type: 'warning', message: '请选择快递' });
return;
}
if (!this.params.courierNumber) {
this.$tips({ type: 'warning', message: '请填写快递单号' });
return;
}
this.logisticsOptions.map(v => {
if (v.logisticsCompanyId === this.params.logisticsCompanyId) {
this.params.logisticsCompanyCode = v.logisticsCompanyCode;
} }
if (!this.params.courierNumber) { });
this.$tips({type:'warning',message:'请填写快递单号'}); if (this.params.logisticsCompanyCode === 'QITA') {
if (this.params.otherLogisticsCompanyName === '') {
this.$tips({ type: 'warning', message: '请填写快递公司' });
return; return;
} }
this.logisticsOptions.map(v => { }
if (v.logisticsCompanyId === this.params.logisticsCompanyId) { let logisticsCompanyName;
this.params.logisticsCompanyCode = v.logisticsCompanyCode; if (this.params.logisticsCompanyCode === 'QITA') {
} logisticsCompanyName = this.params.otherLogisticsCompanyName;
}) } else {
if ( this.params.logisticsCompanyCode ==='QITA' ) { logisticsCompanyName = this.logisticsOptions.find(item => {
if ( this.params.otherLogisticsCompanyName==='' ) { return item.logisticsCompanyId === this.params.logisticsCompanyId;
this.$tips({type:'warning',message:'请填写快递公司'}); }).logisticsCompanyName;
return; }
}
} let params = {
let logisticsCompanyName optType: 1,
if ( this.params.logisticsCompanyCode ==='QITA'){ integralMallProExchangeId: this.id,
logisticsCompanyName=this.params.otherLogisticsCompanyName logisticsCompanyId: this.params.logisticsCompanyId,
}else{ logisticsCompanyCode: this.params.logisticsCompanyCode,
logisticsCompanyName = this.logisticsOptions.find( item => { courierNumber: this.params.courierNumber,
return item.logisticsCompanyId === this.params.logisticsCompanyId logisticsCompanyName: logisticsCompanyName
}).logisticsCompanyName };
} orderOptService(params).then(res => {
let params = {
optType:1,
integralMallProExchangeId:this.id,
logisticsCompanyId:this.params.logisticsCompanyId,
logisticsCompanyCode:this.params.logisticsCompanyCode,
courierNumber:this.params.courierNumber,
logisticsCompanyName:logisticsCompanyName
};
console.log(1111,params)
orderOptService(params).then(res => {
if (res.errorCode === 0) {
this.$tips({type:'success',message:'发货成功'});
this.close();
this.$emit('refresh');
} else {
this.$tips({type:'error',message:'发货失败'});
}
});
},
// 限制运单编号(不管中英文都是32位)
courierNumberLimit(value){
this.$nextTick(() => {
this.params.courierNumber = this.getInputVal(value,32)
})
},
//限制字数
getInputVal(val, max) {
var returnValue = '';
var byteValLen = 0;
for (var i = 0; i < val.length; i++) {
byteValLen += 1;
if (byteValLen > max)
break;
returnValue += val[i];
}
return returnValue;
},
//输入框的输入限制
getInputVal2: function(val, max) {
var returnValue = '';
var byteValLen = 0;
for (var i = 0; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/ig) != null)
byteValLen += 1;
else
byteValLen += 0.5;
if (byteValLen > max)
break;
returnValue += val[i];
}
return returnValue;
},
async getLogisticsList() {
let res = await getLogisticsList();
if (res.errorCode === 0) {
this.logisticsOptions = res.result || [];
}
},
async getLogisticsInfo() {
this.loading = true;
let res = await getLogisticsInfo({integralMallProExchangeId:this.id});
if (res.errorCode === 0) { if (res.errorCode === 0) {
this.info = res.result.changeLog || {}; this.$tips({ type: 'success', message: '发货成功' });
this.close();
this.$emit('refresh');
} else {
this.$tips({ type: 'error', message: '发货失败' });
} }
this.loading = false; });
},
// 限制运单编号(不管中英文都是32位)
courierNumberLimit(value) {
this.$nextTick(() => {
this.params.courierNumber = this.getInputVal(value, 32);
});
},
//限制字数
getInputVal(val, max) {
var returnValue = '';
var byteValLen = 0;
for (let i = 0; i < val.length; i++) {
byteValLen += 1;
if (byteValLen > max) break;
returnValue += val[i];
}
return returnValue;
},
//输入框的输入限制
getInputVal2: function(val, max) {
var returnValue = '';
var byteValLen = 0;
for (let i = 0; i < val.length; i++) {
if (val[i].match(/[^\x00-\xff]/gi) != null) byteValLen += 1;
else byteValLen += 0.5;
if (byteValLen > max) break;
returnValue += val[i];
} }
return returnValue;
},
async getLogisticsList() {
let res = await getLogisticsList();
if (res.errorCode === 0) {
this.logisticsOptions = res.result || [];
}
},
async getLogisticsInfo() {
this.loading = true;
let res = await getLogisticsInfo({ integralMallProExchangeId: this.id });
if (res.errorCode === 0) {
this.info = res.result.changeLog || {};
}
this.loading = false;
} }
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.express{ .express {
&--info { &--info {
padding-bottom:10px; padding-bottom: 10px;
p { p {
line-height: 30px; line-height: 30px;
word-break: break-all; word-break: break-all;
......
src/views/mall/index.vue
<template> <template>
<div> <div>
<router-view></router-view> <router-view></router-view>
</div> </div>
</template> </template>
<script> <script>
import { getNotSendCount } from '@/service/api/mallApi.js'; import { getNotSendCount } from '@/service/api/mallApi.js';
export default { export default {
name: "mall", name: 'mall',
data() { data() {
const vm = this;
return { return {
total:0, total: 0
}; };
}, },
created() { created() {
this.$store.commit("mutations_breadcrumb", [{ name: "积分商城" }]); this.$store.commit('mutations_breadcrumb', [{ name: '积分商城' }]);
this.$store.commit("aside_handler", true); this.$store.commit('aside_handler', true);
this.getNotSendCount(); this.getNotSendCount();
$bus.$on('refresh-not-send-count',() => { /* eslint-disable */
$bus.$on('refresh-not-send-count', () => {
this.getNotSendCount(); this.getNotSendCount();
}); });
}, },
methods:{ methods: {
async getNotSendCount(){ async getNotSendCount() {
let res = await getNotSendCount(); let res = await getNotSendCount();
if (res.errorCode === 0) { if (res.errorCode === 0) {
this.total = res.result; this.total = res.result;
......
static/css/common.css
...@@ -301,7 +301,7 @@ a:hover{ ...@@ -301,7 +301,7 @@ a:hover{
input::-webkit-outer-spin-button, input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { input::-webkit-inner-spin-button {
-webkit-appearance: none !important; -webkit-appearance: none !important;
margin: 0; margin: 0;
} }
input[type="number"] { input[type="number"] {
-moz-appearance: textfield; -moz-appearance: textfield;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment