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) {
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath:"../../",
fallback: 'vue-style-loader'
})
} else {
......
config/index.js
......@@ -27,20 +27,21 @@ module.exports = {
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// 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
// in the browser.
showEslintErrorsInOverlay: false,
// showEslintErrorsInOverlay: false,
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
......@@ -59,7 +60,7 @@ module.exports = {
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/integral-mall/',
assetsPublicPath: './',
/**
* 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>
\ No newline at end of file
<!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
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{
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
margin: 0;
}
input[type="number"] {
-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 @@
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- 库引用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-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/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>
<!-- 组件引用cdn -->
<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/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>
<!-- 二次封装的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>
</html>
\ No newline at end of file
</html>
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 @@
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"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": {
"@gic-test/vue-gic-store-linkage": "^1.0.7",
......@@ -17,7 +19,6 @@
"@tinymce/tinymce-vue": "^1.1.0",
"axios": "^0.18.0",
"element-ui": "^2.4.1",
"packele": "^1.0.8",
"scriptjs": "^2.5.8",
"tinymce": "^4.8.5",
"vue": "^2.5.2",
......@@ -30,19 +31,29 @@
"devDependencies": {
"ansi-html": "^0.0.7",
"autoprefixer": "^7.1.2",
"babel-cli": "^6.26.0",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-flow": "^6.23.0",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"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",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
......@@ -51,12 +62,14 @@
"localforage": "^1.7.2",
"node-notifier": "^5.1.2",
"node-sass": "^4.9.0",
"onchange": "^5.2.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"prettier": "^1.16.4",
"rimraf": "^2.6.0",
"sass-loader": "^7.0.3",
"semver": "^5.3.0",
......
src/App.vue
<template>
<div id="app">
<keep-alive :include="include">
......@@ -10,19 +9,19 @@
<script>
export default {
name: 'App',
data(){
data() {
return {
include:[]
}
include: []
};
}
}
};
</script>
<style lang="scss">
@import './assets/theme/index.css';
@import './assets/style/base/index.scss';
@import './assets/iconfont/iconfont.css';
#app{
#app {
height: 100%;
background-color: #f0f2f5;
}
......
src/api/request.js
/*eslint-disable*/
import axios from 'axios'
import store from '../store/index'
// import router from '../router'
......@@ -35,13 +36,12 @@ request.interceptors.request.use(
request.interceptors.response.use(
response => {
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'
}
return response;
},
error => {
console.log(error)
if (error.response) {
switch (error.response.status) {
case 401:
......
src/components/aside-menu/component.vue
<template>
<div class="left-aside-contain" :style="{height: asideHeight}">
<div class="leftBar-wrap" >
<div class="cardmenu" :class="{collapse: leftCollapse}">
<div class="cardtitle" v-show="!leftCollapse">
<span>{{leftModuleName}}</span>
</div>
<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">
<!--:default-openeds="defaultSub"-->
<template v-for="(menuItem,index) in menuLeftRouter" >
<el-submenu :index="index+''" v-if="menuItem.level4List.length>0" :key="index">
<template slot="title" >
<i :class="['iconfont','menu-icon',menuItem.iconUrl]"></i>
<span slot="title">{{menuItem.menuName}}</span>
</template>
<!-- <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-group> -->
</el-submenu>
<el-menu-item :index="menuItem.menuUrl" v-if="!menuItem.level4List.length" :key="index">
<i :class="['iconfont','menu-icon',menuItem.iconUrl]"></i>
<span slot="title">{{menuItem.menuName}}</span>
</el-menu-item>
</template>
</el-menu>
<div class="left-aside-contain" :style="{ height: asideHeight }">
<div class="leftBar-wrap">
<div class="cardmenu" :class="{ collapse: leftCollapse }">
<div class="cardtitle" v-show="!leftCollapse">
<span>{{ leftModuleName }}</span>
</div>
<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 @select="handleSelect">
<!--:default-openeds="defaultSub"-->
<template v-for="(menuItem, index) in menuLeftRouter">
<el-submenu :index="index + ''" v-if="menuItem.level4List.length > 0" :key="index">
<template slot="title">
<i :class="['iconfont', 'menu-icon', menuItem.iconUrl]"></i>
<span slot="title">{{ menuItem.menuName }}</span>
</template>
<!-- <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-group> -->
</el-submenu>
<el-menu-item :index="menuItem.menuUrl" v-if="!menuItem.level4List.length" :key="index">
<i :class="['iconfont', 'menu-icon', menuItem.iconUrl]"></i>
<span slot="title">{{ menuItem.menuName }}</span>
</el-menu-item>
</template>
</el-menu>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// import { getRequest } from './api';
import qs from 'qs';
export default {
name: 'vue-gic-aside-menu',
props: ['collapseFlag','projectName'],//'leftMenuRouter','leftModulesName',
data () {
return {
repProjectName: 'gic-web', // 项目名
// 高度
asideHeight: '0px',
pathName: '', // 路由名
leftCollapse: false,// 是否收起左侧
leftModuleName: '',
// defaultSub: ['1','2','3','4','5','6','7','8','9'], // 默认打开子菜单
menuLeftRouter: [
],
// 获取 location origin
baseUrl: '',
//已选菜单
selectMenu: '',
}
},
beforeMount() {
var that = this
var host = window.location.origin;
// console.log("当前host:",host)
if (host.indexOf('localhost') != '-1') {
that.baseUrl = 'http://gicdev.demogic.com';
}else {
that.baseUrl = host
}
// import { getRequest } from './api';
import qs from 'qs';
export default {
name: 'vue-gic-aside-menu',
props: ['collapseFlag', 'projectName'], //'leftMenuRouter','leftModulesName',
data() {
return {
repProjectName: 'gic-web', // 项目名
// 高度
asideHeight: '0px',
pathName: '', // 路由名
leftCollapse: false, // 是否收起左侧
leftModuleName: '',
// defaultSub: ['1','2','3','4','5','6','7','8','9'], // 默认打开子菜单
menuLeftRouter: [],
// 获取 location origin
baseUrl: '',
//已选菜单
selectMenu: ''
};
},
beforeMount() {
var that = this;
var host = window.location.origin;
if (host.indexOf('localhost') != '-1') {
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) {
// console.log(key, keyPath);
},
handleSelect(key, keyPath){
var that = this
// console.log(key, keyPath);
that.selectMenu = key
},
// 设置新数据
setNewData(newData) {
var that = this;
// 处理成需要的路由
// var list = [],lists = [];
newData.forEach(function(ele,index){
if (ele.level4List==null || ele.level4List.length==0) {
// 设置新数据
setNewData(newData) {
var that = this;
// 处理成需要的路由
// var list = [],lists = [];
newData.forEach(function(ele, index) {
if (ele.level4List == null || ele.level4List.length == 0) {
// 设置 url
ele.menuUrl = '/' + ele.menuUrl;
} else {
ele.level4List.forEach(function(el, key) {
// 设置 url
ele.menuUrl = '/'+ ele.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
el.menuUrl = '/' + el.menuUrl;
});
}
});
that.menuLeftRouter = newData;
},
that.axios.post(that.baseUrl+'/api-auth/get-current-memu-data',qs.stringify(para))
.then((res) => {
// console.log(res,res.data,res.data.errorCode)
var resData = res.data
// 触发父组件路由
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];
}
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.result) {
// console.log("resData.result: ",resData.result)
return;
}
that.leftModuleName = resData.result.level2.menuName;
that.setNewData(resData.result.leftMenu)
that.selectMenu = that.$route.path
that.setNewData(resData.result.leftMenu);
that.selectMenu = that.$route.path;
if (!!resData.result.level4) {
// 设置选中menu
that.selectMenu = '/'+resData.result.level4.menuUrl
that.selectMenu = '/' + resData.result.level4.menuUrl;
return;
}
if (!!resData.result.level3) {
// 设置选中menu
that.selectMenu = '/'+resData.result.level3.menuUrl
that.selectMenu = '/' + resData.result.level3.menuUrl;
}
// sessionStorage.setItem('activeHead',resData.result.level2.menuCode)
......@@ -172,88 +152,69 @@
that.$message.error({
duration: 1000,
message: resData.message
})
});
})
.catch(function (error) {
// console.log(error);
// that.toLogin()
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
})
});
});
}
},
watch: {
'$route'(val, oldVal){
console.log(this.$route);
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';
},
}
},
watch: {
$route(val, oldVal) {
this.selectMenu = this.$route.meta.path;
},
/* 接收数据 */
mounted(){
// console.log("传递的左侧菜单参数:",this.projectName,this.$route)
collapseFlag: function(newData, oldData) {
var that = this;
that.leftCollapse = newData;
},
projectName: function(newData, oldData) {
var that = this;
that.repProjectName = newData || 'gic-web';
}
},
// 项目名
that.repProjectName = that.projectName || 'gic-web';
// 获取高度
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)
/* 接收数据 */
mounted() {
var that = this;
// 获取菜单
that.getLeftMenu();
// 设置默认打开子菜单
// that.defaultSub = [];
// that.defaultSub.push(this.$route.path);
// console.log("that.defaultSub:",that.defaultSub)
// 项目名
that.repProjectName = that.projectName || 'gic-web';
// 模块名字
// that.leftModuleName = that.leftModulesName;
// 获取高度
that.asideHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 64 + 'px';
//折叠参数
that.leftCollapse = that.collapseFlag;
// that.setNewData(that.leftMenuRouter)
//获取项目名 pathname (路由的hash)
that.pathName = window.location.hash.split('/')[1];
if (that.pathName.indexOf('?') != -1) {
that.pathName = that.pathName.split('?')[0];
}
// 获取菜单
that.getLeftMenu();
},
//折叠参数
that.leftCollapse = that.collapseFlag;
// that.setNewData(that.leftMenuRouter)
}
};
</script>
<style lang="scss" scoped>
.attention-wrap{
.item-label{
.attention-wrap {
.item-label {
font-size: 14px;
color: #606266;
margin-bottom: 30px;
span{
span {
display: inline-block;
width: 80px;
}
......@@ -265,7 +226,7 @@
display: inline-block;
/*overflow: auto;
overflow-x: hidden;*/
&::-webkit-scrollbar{
&::-webkit-scrollbar {
width: 0;
height: 0;
}
......@@ -283,7 +244,7 @@
// height: 0;
// }
.cardmenu{
.cardmenu {
flex: 0 0 200px;
width: 200px;
height: 100%;
......@@ -291,23 +252,23 @@
overflow-x: hidden;
background-color: #020b21;
cursor: pointer;
transition: all .2s ease;
transition: all 0.2s ease;
&::-webkit-scrollbar{
&::-webkit-scrollbar {
width: 0;
height: 0;
}
}
}
.collapse{
transition: all .3s ease;
.collapse {
transition: all 0.3s ease;
flex: 0 0 64px;
width: 64px;
/*transform: translateX(-8px);*/
overflow: hidden;
}
.cardtitle{
.cardtitle {
font-size: 20px;
color: #fff;
padding-left: 20px;
......@@ -320,139 +281,140 @@
}
}
.leftBar-wrap .el-menu .el-menu-item,.el-menu .el-submenu{
background: #020b21;
}
.leftBar-wrap {
/deep/ .el-submenu__title:hover {
background-color: #020b21;
}
}
.leftBar-wrap .cardmenu-item /deep/ .el-menu-item-group .el-menu-item-group__title{
.leftBar-wrap .el-menu .el-menu-item,
.el-menu .el-submenu {
background: #020b21;
}
.leftBar-wrap {
/deep/ .el-submenu__title:hover {
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 {
color: #fff;
background-color: #1890ff;
}
.leftBar-wrap .cardmenu-item /deep/ .el-menu-item span {
color: #c0c4cc;
}
.leftBar-wrap .cardmenu-item /deep/ .el-menu-item.is-active span {
color: #fff;
}
.leftBar-wrap .cardmenu-item /deep/ .el-submenu .el-menu-item label {
color: #c0c4cc;
}
.leftBar-wrap .cardmenu-item /deep/ .el-submenu .el-menu-item.is-active label {
color: #fff;
}
.leftBar-wrap .cardmenu-item .el-menu-item.is-active {
color: #fff;
background-color: #1890ff;
}
.el-menu.el-menu--popup {
background: #020b21;
border-radius: 4px;
}
.leftBar-wrap .cardmenu-item /deep/ .el-menu-item.is-active span {
color: #fff;
}
.el-menu--popup .el-menu-item {
height: 40px;
line-height: 40px;
}
.leftBar-wrap .cardmenu-item /deep/ .el-submenu .el-menu-item.is-active label {
color: #fff;
}
.el-menu--popup .el-menu-item label{
display: block;
margin-left: -34px;
color: #c0c4cc;
cursor: pointer;
}
.el-menu.el-menu--popup {
background: #020b21;
border-radius: 4px;
}
.el-menu--popup .el-menu-item:hover {
background-color: #020b21;
}
.el-menu--popup .el-menu-item {
height: 40px;
line-height: 40px;
}
.el-menu--popup .el-menu-item:hover label {
color: #fff;
}
.el-menu--popup .el-menu-item label {
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{
height: 40px;
line-height: 40px;
}
.leftBar-wrap .cardmenu-item /deep/ li.el-menu-item:hover i{
/*background-color: #1890ff;*/
color: #fff;
}
.el-menu--popup .el-menu-item:hover {
background-color: #020b21;
}
.leftBar-wrap .cardmenu-item /deep/ li.el-menu-item:hover span{
/*background-color: #1890ff;*/
color: #fff;
}
.el-menu--popup .el-menu-item:hover label {
color: #fff;
}
.leftBar-wrap .cardmenu-item /deep/ li.el-submenu:hover i{
/*background-color: #1890ff;*/
color: #fff;
}
.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 {
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{
/*background-color: #1890ff;*/
color: #fff;
}
.leftBar-wrap .cardmenu-item /deep/ li.el-menu-item:hover span {
/*background-color: #1890ff;*/
color: #fff;
}
.leftBar-wrap .cardmenu-item /deep/ li.el-submenu .el-menu-item:hover label{
/*background-color: #1890ff;*/
color: #fff;
cursor: pointer;
}
.leftBar-wrap .cardmenu-item /deep/ li.el-submenu:hover i {
/*background-color: #1890ff;*/
color: #fff;
}
.leftBar-wrap .el-submenu .el-menu-item-group .el-menu-item {
position: relative;
.leftBar-wrap .cardmenu-item /deep/ li.el-submenu:hover span {
/*background-color: #1890ff;*/
color: #fff;
}
}
.leftBar-wrap .el-submenu .el-menu-item::before{
position: absolute;
content: '●';
left: 35px;
top: 0px;
font-size: 10px;
/* color: #fff;*/
}
.leftBar-wrap .cardmenu-item /deep/ li.el-submenu .el-menu-item:hover label {
/*background-color: #1890ff;*/
color: #fff;
cursor: pointer;
}
.leftBar-wrap .el-submenu .el-menu-item:hover::before{
color: #fff;
}
.leftBar-wrap .el-submenu .el-menu-item-group .el-menu-item {
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 {
transition: all .3s ease;
}
.leftBar-wrap .slide-fade-leave-active {
transition: all .3s ease;
}
.leftBar-wrap .cardmenu-item .menu-icon{
/*margin-right: 5px;*/
width: 24px;
text-align: center;
font-size: 14px;
vertical-align: middle;
display: inline-block;
color: #c0c4cc;
}
.leftBar-wrap .cardmenu-item .el-menu-item.is-active .menu-icon {
color: #fff;
}
.leftBar-wrap .slide-fade-enter-active {
transition: all 0.3s ease;
}
.leftBar-wrap .slide-fade-leave-active {
transition: all 0.3s ease;
}
.leftBar-wrap .cardmenu-item .menu-icon {
/*margin-right: 5px;*/
width: 24px;
text-align: center;
font-size: 14px;
vertical-align: middle;
display: inline-block;
color: #c0c4cc;
}
.leftBar-wrap .cardmenu-item .el-menu-item.is-active .menu-icon {
color: #fff;
}
.el-menu-item-group {
.el-menu-item{
height: 40px;
line-height: 40px;
}
.el-menu-item {
height: 40px;
line-height: 40px;
}
}
</style>
src/components/aside-menu/index.js
import vueGicAsideMenu from './component.vue' // 导入组件
import vueGicAsideMenu from './component.vue'; // 导入组件
const vueGicAside = {
install(Vue, options) {
Vue.component(vueGicAsideMenu.name, vueGicAsideMenu) // vueGicAsideMenu.name 组件的name属性
// 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
// Vue.prototype.$xxx // 最终可以在任何地方通过 this.$xxx 调用
// 虽然没有明确规定用$开头 但是大家都默认遵守这个规定
}
}
install(Vue, options) {
Vue.component(vueGicAsideMenu.name, vueGicAsideMenu); // vueGicAsideMenu.name 组件的name属性
// 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
// Vue.prototype.$xxx // 最终可以在任何地方通过 this.$xxx 调用
// 虽然没有明确规定用$开头 但是大家都默认遵守这个规定
}
};
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(vueGicAside);
}
export default vueGicAside
export default vueGicAside;
// export {
// vueGicAsideMenu
// }
src/components/index.js
......@@ -2,4 +2,4 @@ import upload from './upload';
export default {
upload
}
};
src/components/layout/index.vue
......@@ -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>
<div class="layout">
<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">
<el-breadcrumb class="dm-breadcrumb" separator="/">
<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>
<h3><span>{{contentTitle}}</span></h3>
<h3>
<span>{{ contentTitle }}</span>
</h3>
</div>
<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>
</div>
</div>
......@@ -23,165 +25,165 @@
</div>
</template>
<script>
export default {
data () {
return {
collapseFlag: false,
projectName: "integral-mall",
leftModulesName: '公众号配置',
}
},
created(){
$bus.$on('aside-menu',val => {
this.leftMenuRouter = val
})
export default {
data() {
return {
collapseFlag: false,
projectName: 'integral-mall',
leftModulesName: '公众号配置'
};
},
created() {
/* eslint-disable */
$bus.$on('aside-menu', val => {
this.leftMenuRouter = val;
});
},
/* eslint-disable */
destroyed() {
$bus.$off('aside-menu');
},
computed: {
asideShow() {
return this.$store.state.marketing.asideShow;
},
destroyed() {
$bus.$off('aside-menu');
},
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;
}
contentTitle() {
return this.$route.name;
},
// watch:{
// asideShow(val) {
// this.collapseFlag = this.asideShow;
// }
breadcrumb() {
return this.$store.state.marketing.breadcrumb;
}
},
// watch:{
// asideShow(val) {
// this.collapseFlag = this.asideShow;
// }
// },
methods: {
// // 处理路由跳转
// toRouterView(val) {
// var that = this;
// // 模拟检查数据
// // //有两个参数
// //{
// // name:,
// // path:
// //}
// that.$router.push({
// path: val
// });
// },
methods: {
// 处理路由跳转
toRouterView(val) {
var that = this;
// 模拟检查数据
// //有两个参数
//{
// name:,
// path:
//}
that.$router.push({
path: val
})
},
// 处理路由跳转
toRouterView(val) {
//有两个参数
//{
// name:,
// path:
//}
this.$router.push({
path: val.path
})
},
// 折叠事件
collapseTagHandler(val){
this.collapseFlag = val
}
// 处理路由跳转
toRouterView(val) {
//有两个参数
//{
// name:,
// path:
//}
this.$router.push({
path: val.path
});
},
// 折叠事件
collapseTagHandler(val) {
this.collapseFlag = val;
}
}
};
</script>
<style lang="scss">
.layout-container{
height:100%;
display:flex;
.layout-container {
height: 100%;
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 {
display: flex;
flex-direction: row;
background-color: #f0f2f5;
height: calc(100% - 64px);
&-right {
position: relative;
flex: 1;
overflow-x: auto;
overflow-y: hidden;
margin-top: 64px;
width: 100%;
&-left {
width: 200px;
display: inline-block;
position: fixed;
left: 0;
z-index: 9;
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;
}
&-right{
position: relative;
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;
}
&.collapseFlag {
margin-left: 64px;
}
&-title{
// position: absolute;
// width: 100%;
// top:0;
// left:0;
height:85px;
background:#fff;
// box-shadow: 0 3px 5px rgba(147,165,184,.13);
padding:15px 0 0 30px;
border-bottom: 1px solid #e4e7ed;
h3 {
color:#303133;
font-size:20px;
padding:24px 0;
font-weight:500;
span{
color:#303133;
font-size:20px;
font-weight:500;
}
i{
font-size:20px;
color:#c0c4ce;
cursor: pointer;
&:hover{
color:#909399;
}
}
}
&-title {
// position: absolute;
// width: 100%;
// top:0;
// left:0;
height: 85px;
background: #fff;
// box-shadow: 0 3px 5px rgba(147,165,184,.13);
padding: 15px 0 0 30px;
border-bottom: 1px solid #e4e7ed;
h3 {
color: #303133;
font-size: 20px;
padding: 24px 0;
font-weight: 500;
span {
color: #303133;
font-size: 20px;
font-weight: 500;
}
}
&-content__wrap {
overflow-y: auto;
position: relative;
top:-1px;
&::-webkit-scrollbar {
display: none;
i {
font-size: 20px;
color: #c0c4ce;
cursor: pointer;
&:hover {
color: #909399;
}
}
}
&-content {
// margin-top: 100px;
min-height: calc(100% - 200px);
min-width: 1400px;
&.asideShow{
min-width: 1200px;
}
&.collapseFlag{
min-width: 1336px;
}
}
&-content__wrap {
overflow-y: auto;
position: relative;
top: -1px;
&::-webkit-scrollbar {
display: none;
}
}
.dm-breadcrumb{
display: inline-block;
vertical-align: middle;
&-content {
// margin-top: 100px;
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 {
min-width: 95px;
......@@ -189,5 +191,4 @@
.el-popover.user-header-pop {
min-width: 95px;
}
</style>
src/config/index.js
/*eslint-disable*/
const config = {
development: {
api: '/dmApi/'
},
production: {
// api: 'https://hope.demogic.com/',
api: (window.location.protocol + '//' + window.location.host +'/') || ''
api: window.location.protocol + '//' + window.location.host + '/' || ''
}
}
};
export default {
api: config[process.env['NODE_ENV']]['api']
}
};
src/config/interceptors/axios.js
export default axios
\ No newline at end of file
export default axios;
src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import { axios } from './service/api/index'
import ElementUI from 'element-ui'
import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';
import { axios } from './service/api/index';
import ElementUI from 'element-ui';
// import vueGicHeader from '@gic-test/vue-gic-header'
// import vueGicFooter from '@gic-test/vue-gic-footer'
// 单个图片预览插件
// 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 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 packele from 'packele'
Vue.config.productionTip = false
Vue.use(packele)
Vue.use(ElementUI)
Vue.config.productionTip = false;
Vue.use(ElementUI);
// Vue.use(vueGicHeader)
// Vue.use(vueGicFooter)
// Vue.use(vueGicAsideMenu)
Vue.use(vueGicStoreLinkage)
Vue.use(vueGicStoreLinkage);
// Vue.use(vueGicImgPreview)
// Vue.use(vueGicUploadImage)
Vue.use(VueClipboard)
Vue.use(VueClipboard);
// Vue.use(vueGicExportExcel)
Vue.prototype.axios = axios;
Vue.prototype.axios.withCredentials = true
Vue.prototype.axios.withCredentials = true;
/* eslint-disable */
window.$bus = new Vue();
let flag = false
let flag = false;
Vue.prototype.$tips = function({ message = '提示', type = 'success' }) {
if (flag) { return } else { this.$message({ message, type }) }
flag = true;
setTimeout(_ => { flag = false }, 1000)
}
/* eslint-disable no-new */
if (flag) {
return;
} else {
this.$message({ message, type });
}
flag = true;
setTimeout(_ => {
flag = false;
}, 1000);
};
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
\ No newline at end of file
el: '#app',
router,
store,
components: { App },
template: '<App/>'
});
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import routes from './routes'
Vue.use(Router)
import Vue from 'vue';
import Router from 'vue-router';
import routes from './routes';
Vue.use(Router);
let router = new Router({
routes,
......@@ -13,17 +13,14 @@ let router = new Router({
}
const layoutRight = document.querySelector('.layout-right');
if (layoutRight) {
layoutRight.scrollTo(0,0);
layoutRight.scrollTo(0, 0);
}
}
});
})
router.beforeEach((to,from,next) => {
router.beforeEach((to, from, next) => {
document.title = to.name;
next()
})
export default router
next();
});
export default router;
src/router/routes.js
import Layout from '@/components/layout'
import page401 from '@/views/error/401'
import page403 from '@/views/error/403'
import page404 from '@/views/error/404'
import page500 from '@/views/error/500'
import Layout from '@/components/layout';
import page401 from '@/views/error/401';
import page403 from '@/views/error/403';
import page404 from '@/views/error/404';
import page500 from '@/views/error/500';
//积分商城
import mall from '../views/mall/index';
import couponList from '../views/mall/coupon/list';
......@@ -13,144 +13,146 @@ import giftExchange from '../views/mall/gift/exchange';
import giftInfo from '../views/mall/gift/info.vue';
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: '/',
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'
}
},
{
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
{
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
}
];
src/service/api/commonApi.js
import {requests} from './index';
import { requests } from './index';
import router from '@/router';
const MARKET_PREFIX = 'api-marketing/';
const PLUG_PREFIX = 'api-plug/';
const GOODS_PREFIX = 'api-admin/';
import Vue from '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'
import axios from 'axios'
import config from '@/config'
import { log } from '@/utils'
import qs from 'qs'
import Router from 'vue-router'
/*eslint-disable*/
import Vue from 'vue';
import axios from 'axios';
import config from '@/config';
import { log } from '@/utils';
import qs from 'qs';
import Router from 'vue-router';
const router = new Router();
// 加载最小时间
const MINI_TIME = 300
const MINI_TIME = 300;
// 超时时间
let TIME_OUT_MAX = 20000
let TIME_OUT_MAX = 20000;
// 环境value
let _isDev = process.env.NODE_ENV === 'development'
let _isDev = process.env.NODE_ENV === 'development';
// 请求接口host
let _apiHost = config.api
let _apiHost = config.api;
// 请求组（判断当前请求数）
let _requests = []
let _requests = [];
//创建一个请求实例
const instance = axios.create({
baseURL: _apiHost,
timeout: TIME_OUT_MAX,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
})
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
/**
* 添加请求，显示loading
* @param {请求配置} config
*/
function pushRequest(config) {
log(`${config.url}--begin`)
_requests.push(config)
log(`${config.url}--begin`);
_requests.push(config);
}
/**
......@@ -38,12 +39,12 @@ function pushRequest(config) {
* @param {请求配置} config
*/
function popRequest(config) {
log(`${config.url}--end`)
log(`${config.url}--end`);
let _index = _requests.findIndex(r => {
return r === config
})
return r === config;
});
if (_index > -1) {
_requests.splice(_index, 1)
_requests.splice(_index, 1);
}
}
/**
......@@ -51,91 +52,86 @@ function popRequest(config) {
* @param {*} code
* @param {string} [message='请求错误']
*/
function handlerErr(code,message = '请求错误') {
function handlerErr(code, message = '请求错误') {
switch (code) {
case 404:
message = '404,错误请求'
router.push('/404')
break
message = '404,错误请求';
router.push('/404');
break;
case 401:
if (!_isDev) {
window.location.href = config.api+'/gic-web/#/'
window.location.href = config.api + '/gic-web/#/';
}
message = '登录失效'
break
message = '登录失效';
break;
case 403:
message = '禁止访问'
router.push('/403')
break
message = '禁止访问';
router.push('/403');
break;
case 408:
message = '请求超时'
break
message = '请求超时';
break;
case 500:
message = '服务器内部错误'
message = '服务器内部错误';
// router.push('/500')
break
break;
case 501:
message = '功能未实现'
break
message = '功能未实现';
break;
case 503:
message = '服务不可用'
break
message = '服务不可用';
break;
case 504:
message = '网关错误'
break
message = '网关错误';
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') => {
let _opts = { method, url }
const _query = {}
let _timer = null
const requests = (url, data = {}, contentTypeIsJSON = false, isSilence = false, method = 'POST') => {
let _opts = { method, url };
const _query = {};
let _timer = null;
if (method.toLocaleUpperCase() === 'POST') {
if (contentTypeIsJSON) {
_opts.data = data;
_opts.headers = {'Content-Type': 'application/json'};
_opts.headers = { 'Content-Type': 'application/json' };
_opts.url += '?requestProject=marketing';
} else {
_opts.data = qs.stringify(Object.assign({requestProject:'gic-web'},data))
_opts.data = qs.stringify(Object.assign({ requestProject: 'integral-mall' }, data));
}
} else {
_opts.params = _query
_opts.params = _query;
}
return new Promise((resolve, reject) => {
let _random = { stamp: Date.now(), url: `${_apiHost + url}` }
let _random = { stamp: Date.now(), url: `${_apiHost + url}` };
if (!isSilence) {
_timer = setTimeout(() => {
pushRequest(_random)
}, MINI_TIME)
pushRequest(_random);
}, MINI_TIME);
}
instance(_opts)
.then(res => {
clearTimeout(_timer)
popRequest(_random)
clearTimeout(_timer);
popRequest(_random);
if (res.data.errorCode !== 0) {
reject(res);
handlerErr(res.data.errorCode,res.data.message);
handlerErr(res.data.errorCode, res.data.message);
} else {
resolve(res.data)
resolve(res.data);
}
})
.catch(res => {
clearTimeout(_timer)
popRequest(_random)
clearTimeout(_timer);
popRequest(_random);
if (res) {
handlerErr(res.response.status,'接口异常')
handlerErr(res.response.status, '接口异常');
}
reject(res)
})
})
}
export {
instance as axios,
requests
}
reject(res);
});
});
};
export { instance as axios, requests };
src/service/api/mallApi.js
import { requests } from './index';
import config from '@/config';
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 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);
\ No newline at end of file
export const getMemberInfo = params => requests(PREFIX + 'get-member', params);
src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import Vue from 'vue';
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({
modules: {
marketing,
},
})
marketing
}
});
src/store/modules/marketing.js
// initial state
const state = {
all: 0,
cartData: [],
total: 0,
leftMenu:[],
storeObj:{},
asideShow:false,
breadcrumb:[]
}
leftMenu: [],
storeObj: {},
asideShow: false,
breadcrumb: []
};
// getters
const getters = {
allProducts: (state, getters, rootState) => {
return state.all
return state.all;
},
allCartData: state => state.cartData,
total: state => {
state.total = 0;
for( let item of state.cartData ) {
state.total += item.price
for (let item of state.cartData) {
state.total += item.price;
}
return state.total
return state.total;
}
}
};
// actions
const actions = {
setAll({commit},data) {
commit('mutations_setAll',data);
setAll({ commit }, data) {
commit('mutations_setAll', data);
},
setCartData({commit},item) {
commit('mutations_CartData',item)
setCartData({ commit }, item) {
commit('mutations_CartData', item);
},
removecartData( {commit}, item ) {
commit( 'mutations_removeCartData',item )
removecartData({ commit }, item) {
commit('mutations_removeCartData', item);
}
}
};
// mutations
const mutations = {
mutations_setAll( state,num ) {
state.all = num
mutations_setAll(state, num) {
state.all = num;
},
mutations_CartData(state, item ) {
state.cartData.push( item )
mutations_CartData(state, item) {
state.cartData.push(item);
},
mutations_removeCartData( state,item ) {
for( let i in state.cartData ) {
if( state.cartData[i].id === item.id ) {
state.cartData.splice(i,1)
mutations_removeCartData(state, item) {
for (let i in state.cartData) {
if (state.cartData[i].id === item.id) {
state.cartData.splice(i, 1);
}
}
},
mutations_setStoreObj(state,val) {
state.storeObj = val
mutations_setStoreObj(state, val) {
state.storeObj = val;
},
aside_handler(state,val) {
state.asideShow = val
aside_handler(state, val) {
state.asideShow = val;
},
mutations_breadcrumb(state,val) {
state.breadcrumb = val
mutations_breadcrumb(state, val) {
state.breadcrumb = val;
}
}
};
export default {
state,
getters,
actions,
mutations
}
};
src/utils/index.js
/*eslint-disable*/
// 环境value
let _isDev = process.env.NODE_ENV === 'development'
let _isDev = process.env.NODE_ENV === 'development';
import Vue from 'vue';
......@@ -8,25 +8,24 @@ import Vue from 'vue';
* 开发输出log
* @param {消息} msg
*/
export const log = (msg) => {
if (_isDev && console && console.log) {
console.log(msg)
}
}
export const log = msg => {
if (_isDev && console && console.log) {
console.log(msg);
}
};
/**
* 补零
* @param {String/Number} num
*/
export const fillZero = (num) => {
num = num * 1;
if (num < 10) {
return '0' + num;
} else {
return num;
}
}
export const fillZero = num => {
num = num * 1;
if (num < 10) {
return '0' + num;
} else {
return num;
}
};
/**
*
......@@ -34,129 +33,128 @@ export const fillZero = (num) => {
* @param {*转换的格式} type
*/
export const formateDateTimeByType = (date, type = 'yyyy-MM-dd-HH-mm-ss') => {
if (!date) { return '' }
if (typeof date === 'number') {
date = new Date(date);
}
if (typeof date === 'string') {
return date
} else {
var year = type.indexOf('yyyy') >= 0 ? (fillZero(date.getFullYear())) : '';
var month = type.indexOf('MM') >= 0 ? ('-' + fillZero(date.getMonth() + 1)) : '';
var day = type.indexOf('dd') >= 0 ? ('-' + fillZero(date.getDate()) + '') : '';
var hours = type.indexOf('HH') >= 0 ? (' ' + fillZero(date.getHours())) : '';
var min = type.indexOf('mm') >= 0 ? (':' + fillZero(date.getMinutes())) : '';
var sec = type.indexOf('ss') >= 0 ? (':' + fillZero(date.getSeconds())) : '';
// console.log(year+month+day+hours+min+sec);
return year + month + day + hours + min + sec;
}
}
// var year, month, day, hours, min, sec
if (!date) {
return '';
}
if (typeof date === 'number') {
date = new Date(date);
}
if (typeof date === 'string') {
return date;
} else {
let year = type.indexOf('yyyy') >= 0 ? fillZero(date.getFullYear()) : '';
let month = type.indexOf('MM') >= 0 ? '-' + fillZero(date.getMonth() + 1) : '';
let day = type.indexOf('dd') >= 0 ? '-' + fillZero(date.getDate()) + '' : '';
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) => {
var chnNumChar = {
零: 0,
一: 1,
二: 2,
三: 3,
四: 4,
五: 5,
六: 6,
七: 7,
八: 8,
九: 9,
十: 10
};
let result = '';
for (let i in chnNumChar) {
if (num === chnNumChar[i]) {
result = i
}
export const numberToChinese = num => {
var chnNumChar = {
零: 0,
一: 1,
二: 2,
三: 3,
四: 4,
五: 5,
六: 6,
七: 7,
八: 8,
九: 9,
十: 10
};
let result = '';
for (let i in chnNumChar) {
if (num === chnNumChar[i]) {
result = i;
}
return result;
}
}
return result;
};
export const numberToWeekChinese = (num) => {
var chnNumChar = {
日: 0,
一: 1,
二: 2,
三: 3,
四: 4,
五: 5,
六: 6
};
let result = '--';
for (let i in chnNumChar) {
if (num === chnNumChar[i]) {
result = i
}
export const numberToWeekChinese = num => {
var chnNumChar = {
日: 0,
一: 1,
二: 2,
三: 3,
四: 4,
五: 5,
六: 6
};
let result = '--';
for (let i in chnNumChar) {
if (num === chnNumChar[i]) {
result = i;
}
return result;
}
}
return result;
};
/**
*
* @param 清空数据
*/
export const resetParams = (obj) => {
for (let item in obj) {
if (item && obj[item]) {
switch (obj[item].constructor) {
case Array:
obj[item] = [];
break;
case String:
obj[item] = '';
break;
case Number:
obj[item] = 0;
break;
case Boolean:
obj[item] = false;
break;
default:
obj[item] = '';
break;
}
}
export const resetParams = obj => {
for (let item in obj) {
if (item && obj[item]) {
switch (obj[item].constructor) {
case Array:
obj[item] = [];
break;
case String:
obj[item] = '';
break;
case Number:
obj[item] = 0;
break;
case Boolean:
obj[item] = false;
break;
default:
obj[item] = '';
break;
}
}
}
}
};
// 交换数组元素
function swapItems(arr, index1, index2) {
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
return arr;
};
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
return arr;
}
// 上移
export const upRecord = function(arr, $index) {
if ($index == 0) {
return;
}
swapItems(arr, $index, $index - 1);
if ($index == 0) {
return;
}
swapItems(arr, $index, $index - 1);
};
// 下移
export const downRecord = function(arr, $index) {
if ($index == arr.length - 1) {
return;
}
swapItems(arr, $index, $index + 1);
if ($index == arr.length - 1) {
return;
}
swapItems(arr, $index, $index + 1);
};
//字符串判断是否为空
export const voidStr = function(str, msg) {
if (!str) {
Vue.prototype.$tips({ type: 'warning', message: msg || '内容填写不全' })
return true;
} else {
return false;
}
}
if (!str) {
Vue.prototype.$tips({ type: 'warning', message: msg || '内容填写不全' });
return true;
} else {
return false;
}
};
/**
* 频率控制 返回函数连续调用时，action 执行频率限定为 次 / delay
......@@ -166,54 +164,54 @@ export const voidStr = function(str, msg) {
*/
export const throttle = function(delay, action) {
var last = 0;
return function() {
var curr = +new Date()
if (curr - last > delay) {
action.apply(this, arguments)
last = curr
}
var last = 0;
return function() {
var curr = +new Date();
if (curr - last > delay) {
action.apply(this, arguments);
last = curr;
}
}
};
};
/**
* 验证是否为网址
*/
export const checkUrl = function(urlString) {
if (urlString != "") {
var reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
if (!reg.test(urlString)) {
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;
var reg;
if (urlString != '') {
reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
if (!reg.test(urlString)) {
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
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(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-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
export const format = function(date, fmt) { //author: meizz
var o = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"h+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"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 (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(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-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
export const format = function(date, fmt) {
//author: meizz
var o = {
'M+': date.getMonth() + 1, //月份
'd+': date.getDate(), //日
'h+': date.getHours(), //小时
'm+': date.getMinutes(), //分
's+': date.getSeconds(), //秒
'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 (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;
}
\ No newline at end of file
}
};
src/utils/strlen.js
......@@ -5,98 +5,89 @@
export default {
/*
* 一个汉字算两个字符,一个英文字母或数字算一个字符
*/
getByteLen: function(val) {
var len = 0;
for (var i = 0; i < val.length; i++) {
var a = val.charAt(i);
if (a.match(/[^\x00-\xff]/ig) != null) {
len += 2;
}
else {
len += 1;
}
* 一个汉字算两个字符,一个英文字母或数字算一个字符
*/
getByteLen: function(val) {
var len = 0;
for (var i = 0; i < val.length; i++) {
var a = val.charAt(i);
if (a.match(/[^\x00-\xff]/gi) != null) {
len += 2;
} else {
len += 1;
}
return len;
}
return len;
},
/*
* 一个汉字算一个字,一个英文字母或数字算半个字
*/
getZhLen: function (val) {
var len = 0;
for (var i = 0; i < val.length; i++) {
var a = val.charAt(i);
if (a.match(/[^\x00-\xff]/ig) != null) {
len += 1;
}
else {
len += 0.5;
}
/*
* 一个汉字算一个字,一个英文字母或数字算半个字
*/
getZhLen: function(val) {
var len = 0;
for (var i = 0; i < val.length; i++) {
var a = val.charAt(i);
if (a.match(/[^\x00-\xff]/gi) != null) {
len += 1;
} else {
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;
for (var i = 0; i < str.length; i++){
var son_str = str.charAt(i);
if(type==1) {
encodeURI(son_str).length > 2 ? char_length += 1 : char_length += 0.5;
}
if(type==2) {
char_length += 1 ;
}
if (char_length >= len){
var sub_len = char_length == len ? i+1 : i;
return str.substr(0, sub_len);
}
for (var i = 0; i < str.length; i++) {
var son_str = str.charAt(i);
if (type == 1) {
encodeURI(son_str).length > 2 ? (char_length += 1) : (char_length += 0.5);
}
if (type == 2) {
char_length += 1;
}
if (char_length >= len) {
var sub_len = char_length == len ? i + 1 : i;
return str.substr(0, sub_len);
}
}
},
/*
* 限制字数用, 一个汉字算一个字,两个英文/字母算一个字
*/
* 限制字数用, 一个汉字算一个字,两个英文/字母算一个字
*/
getByteVal: 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];
if (val[i].match(/[^\x00-\xff]/gi) != null) byteValLen += 1;
else byteValLen += 0.5;
if (byteValLen > max) break;
returnValue += val[i];
}
return returnValue;
},
/*
* 限制字符数用, 一个汉字算两个字符,一个英文/字母算一个字符
*/
getCharVal: function (val, max) {
* 限制字符数用, 一个汉字算两个字符,一个英文/字母算一个字符
*/
getCharVal: 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 += 2;
else
byteValLen += 1;
if (byteValLen > max)
break;
returnValue += val[i];
if (val[i].match(/[^\x00-\xff]/gi) != null) byteValLen += 2;
else byteValLen += 1;
if (byteValLen > max) break;
returnValue += val[i];
}
return returnValue;
},
/*
* 正则校验,校验非负数字
*/
* 正则校验,校验非负数字
*/
regPos: function(v) {
var regTest = /^\d+(\.\d+)?$/;
return regTest.test(v);
}
}
};
src/utils/validator.js
/*策略规则*/
const strategies = {
isNonEmpty(value, errorMsg) {
return value === '' ?
errorMsg : void 0
return value === '' ? errorMsg : void 0;
},
minLength(value, length, errorMsg) {
return value.length < length ?
errorMsg : void 0
return value.length < length ? errorMsg : void 0;
},
isMoblie(value, errorMsg) {
return !/^1(3|5|7|8|9)[0-9]{9}$/.test(value) ?
errorMsg : void 0
return !/^1(3|5|7|8|9)[0-9]{9}$/.test(value) ? errorMsg : void 0;
},
isEmail(value, errorMsg) {
return !/^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value) ?
errorMsg : void 0
return !/^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value) ? errorMsg : void 0;
}
}
};
/*Validator类*/
export default class Validator {
constructor() {
this.cache = [] //保存校验规则
this.cache = []; //保存校验规则
}
add(dom, rules) {
for (let rule of rules) {
let strategyAry = rule.strategy.split(':') //例如['minLength',6]
let errorMsg = rule.errorMsg //'用户名不能为空'
this.cache.push(() => {
let strategy = strategyAry.shift() //用户挑选的strategy
strategyAry.unshift(dom.value) //把input的value添加进参数列表
strategyAry.push(errorMsg) //把errorMsg添加进参数列表，[dom.value,6,errorMsg]
return strategies[strategy].apply(dom, strategyAry)
})
}
for (let rule of rules) {
let strategyAry = rule.strategy.split(':'); //例如['minLength',6]
let errorMsg = rule.errorMsg; //'用户名不能为空'
this.cache.push(() => {
let strategy = strategyAry.shift(); //用户挑选的strategy
strategyAry.unshift(dom.value); //把input的value添加进参数列表
strategyAry.push(errorMsg); //把errorMsg添加进参数列表，[dom.value,6,errorMsg]
return strategies[strategy].apply(dom, strategyAry);
});
}
}
start() {
for (let validatorFunc of this.cache) {
let errorMsg = validatorFunc()//开始校验，并取得校验后的返回信息
if (errorMsg) {//r如果有确切返回值，说明校验没有通过
return errorMsg
}
for (let validatorFunc of this.cache) {
let errorMsg = validatorFunc(); //开始校验，并取得校验后的返回信息
if (errorMsg) {
//r如果有确切返回值，说明校验没有通过
return errorMsg;
}
}
}
}
src/views/error/401.vue
<template>
<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-col :span="12">
<h1 class="text-jumbo text-ginormous">Oops!</h1>
页面
页面
<h2>你没有权限去该页面</h2>
<h6>如有不满请联系你领导</h6>
<ul class="list-unstyled">
......@@ -13,21 +13,21 @@
<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>
</el-col>
<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-row>
<el-dialog title="随便看" :visible.sync="dialogVisible">
<img class="pan-img" :src="ewizardClap">
<img class="pan-img" :src="ewizardClap" />
</el-dialog>
</div>
</template>
<script>
import errGif from '@/assets/img/401.gif'
import errGif from '@/assets/img/401.gif';
export default {
name: 'page401',
......@@ -36,54 +36,54 @@ export default {
errGif: errGif + '?' + +new Date(),
ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
dialogVisible: false
}
};
},
methods: {
back() {
if (this.$route.query.noGoBack) {
this.$router.push({ path: '/' })
this.$router.push({ path: '/' });
} else {
this.$router.go(-1)
this.$router.go(-1);
}
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.errPage-container {
width: 800px;
margin: 100px auto;
.pan-back-btn {
background: #008489;
color: #fff;
}
.pan-gif {
margin: 0 auto;
display: block;
}
.pan-img {
display: block;
margin: 0 auto;
width: 100%;
}
.text-jumbo {
font-size: 60px;
font-weight: 700;
color: #484848;
.errPage-container {
width: 800px;
margin: 100px auto;
.pan-back-btn {
background: #008489;
color: #fff;
}
.pan-gif {
margin: 0 auto;
display: block;
}
.pan-img {
display: block;
margin: 0 auto;
width: 100%;
}
.text-jumbo {
font-size: 60px;
font-weight: 700;
color: #484848;
}
.list-unstyled {
font-size: 14px;
li {
padding-bottom: 5px;
}
.list-unstyled {
font-size: 14px;
li {
padding-bottom: 5px;
}
a {
color: #008489;
text-decoration: none;
&:hover {
text-decoration: underline;
}
a {
color: #008489;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
</style>
src/views/error/403.vue
......@@ -2,7 +2,7 @@
<div style="background:#f0f2f5;margin-top: -20px;height:100%;">
<div class="wscn-http404">
<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 class="bullshit">
<!-- <div class="bullshit__oops">403</div> -->
......@@ -14,21 +14,21 @@
</template>
<script>
import img_403 from '@/assets/img/error_403.svg'
import img_403 from '@/assets/img/error_403.svg';
export default {
name: 'page403',
data() {
return {
img_403
}
};
},
computed: {
message() {
return '抱歉，你无权访问该页面'
return '抱歉，你无权访问该页面';
}
}
}
};
</script>
<style lang="scss" scoped>
......@@ -174,7 +174,7 @@ export default {
animation-fill-mode: forwards;*/
}
&__headline {
color: rgba(0,0,0,.45);
color: rgba(0, 0, 0, 0.45);
font-size: 20px;
line-height: 28px;
margin-bottom: 16px;
......@@ -200,9 +200,9 @@ export default {
border: 1px solid #1890ff;
color: #fff;
background-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0,0,0,.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.035);
box-shadow: 0 2px 0 rgba(0,0,0,.035);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
cursor: pointer;
/*animation-name: slideUp;
animation-duration: 0.5s;
......
src/views/error/404.vue
......@@ -2,7 +2,7 @@
<div style="background:#f0f2f5;margin-top: -20px;height:100%;">
<div class="wscn-http404">
<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 class="bullshit">
<!-- <div class="bullshit__oops">404</div> -->
......@@ -14,24 +14,21 @@
</template>
<script>
import img_404 from '@/assets/img/error_404.svg'
import img_404 from '@/assets/img/error_404.svg';
export default {
name: 'page404',
data() {
return {
img_404
}
};
},
computed: {
message() {
return '抱歉，你访问的页面不存在'
return '抱歉，你访问的页面不存在';
}
},
mounted(){
console.log(this.$route.path)
}
}
};
</script>
<style lang="scss" scoped>
......@@ -177,7 +174,7 @@ export default {
animation-fill-mode: forwards;*/
}
&__headline {
color: rgba(0,0,0,.45);
color: rgba(0, 0, 0, 0.45);
font-size: 20px;
line-height: 28px;
margin-bottom: 16px;
......@@ -203,9 +200,9 @@ export default {
border: 1px solid #1890ff;
color: #fff;
background-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0,0,0,.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.035);
box-shadow: 0 2px 0 rgba(0,0,0,.035);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
cursor: pointer;
/*animation-name: slideUp;
animation-duration: 0.5s;
......
src/views/error/500.vue
......@@ -2,7 +2,7 @@
<div style="background:#f0f2f5;margin-top: -20px;height:100%;">
<div class="wscn-http404">
<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 class="bullshit">
<!-- <div class="bullshit__oops">500</div> -->
......@@ -14,21 +14,21 @@
</template>
<script>
import img_500 from '@/assets/img/error_500.svg'
import img_500 from '@/assets/img/error_500.svg';
export default {
name: 'page500',
data() {
return {
img_500
}
};
},
computed: {
message() {
return '抱歉，服务器出错了'
return '抱歉，服务器出错了';
}
}
}
};
</script>
<style lang="scss" scoped>
......@@ -174,7 +174,7 @@ export default {
animation-fill-mode: forwards;*/
}
&__headline {
color: rgba(0,0,0,.45);
color: rgba(0, 0, 0, 0.45);
font-size: 20px;
line-height: 28px;
margin-bottom: 16px;
......@@ -200,9 +200,9 @@ export default {
border: 1px solid #1890ff;
color: #fff;
background-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0,0,0,.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.035);
box-shadow: 0 2px 0 rgba(0,0,0,.035);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
cursor: pointer;
/*animation-name: slideUp;
animation-duration: 0.5s;
......
src/views/error/index.vue
......@@ -2,7 +2,7 @@
<div style="background:#f0f2f5;margin-top: -20px;height:100%;">
<div class="wscn-http404">
<div class="pic-404">
<img class="pic-404__parent" :src="imgSrc" alt="404">
<img class="pic-404__parent" :src="imgSrc" alt="404" />
</div>
<div class="bullshit">
<!-- <div class="bullshit__oops">404</div> -->
......@@ -16,7 +16,7 @@
<script>
import img_403 from '@/assets/403_images/error_403.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 {
name: 'errpage',
......@@ -34,15 +34,15 @@ export default {
404: '抱歉，你访问的页面不存在',
500: '抱歉，服务器出错了'
}
}
};
},
mounted(){
mounted() {
var that = this;
var path = that.$route.path.split('/')[1];
that.imgSrc = that.srcList[path];
that.message = that.msgList[path];
}
}
};
</script>
<style lang="scss" scoped>
......@@ -188,7 +188,7 @@ export default {
animation-fill-mode: forwards;*/
}
&__headline {
color: rgba(0,0,0,.45);
color: rgba(0, 0, 0, 0.45);
font-size: 20px;
line-height: 28px;
margin-bottom: 16px;
......@@ -214,9 +214,9 @@ export default {
border: 1px solid #1890ff;
color: #fff;
background-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0,0,0,.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.035);
box-shadow: 0 2px 0 rgba(0,0,0,.035);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
cursor: pointer;
/*animation-name: slideUp;
animation-duration: 0.5s;
......
src/views/mall/common/card-temp.vue
<template>
<section class="sms-lib curson-pointer">
<div class="pb22">
<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>
<span class="fz12 gray pl20">领取限制 < 100的卡券不支持选择，系统已自动过滤</span>
</div>
<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">
<section class="sms-lib curson-pointer">
<div class="pb22">
<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>
<span class="fz12 gray pl20">领取限制 &lt;100的卡券不支持选择，系统已自动过滤</span>
</div>
<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">
<template slot-scope="scope">
<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-else v-model="selectedId" :label="scope.row.coupCardId" 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>
</div>
</template>
</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="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>
<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>
</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="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>
<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>
</template>
<script>
import {getCardList} from '@/service/api/mallApi.js';
import { getCardList } from '@/service/api/mallApi.js';
export default {
props:{
activeId:{
type:String,
default:''
props: {
activeId: {
type: String,
default: ''
},
cardIdName:{
type:String,
default:'coupCardId'
cardIdName: {
type: String,
default: 'coupCardId'
},
tableHeight:{
type:String,
default:'auto'
tableHeight: {
type: String,
default: 'auto'
},
showPagination:{
type:Boolean,
default:true
showPagination: {
type: Boolean,
default: true
},
disabled:{
type:Boolean,
default:false
disabled: {
type: Boolean,
default: false
},
cardType:{
type:String,
default:'2'
cardType: {
type: String,
default: '2'
}
},
data(){
return{
listParams:{
searchParam:'',
currentPage:1,
pageSize:10,
requestProject:'gic-web',
coupCardId:'',
cardType:this.cardType
data() {
return {
listParams: {
searchParam: '',
currentPage: 1,
pageSize: 10,
requestProject: 'gic-web',
coupCardId: '',
cardType: this.cardType
},
total:0,
tableList:[],
selectedId:this.activeId
}
total: 0,
tableList: [],
selectedId: this.activeId
};
},
watch: {
selectedId(val) {
......@@ -73,57 +73,57 @@ export default {
if (this.cardIdName === 'wechatCardId') {
this.tableList.map(v => {
if (v.coupCardId === val) {
val = v.wechatCardId
val = v.wechatCardId;
obj = v;
}
})
});
} else {
this.tableList.map(v => {
if (v.coupCardId === val) {
obj = v;
}
})
});
}
this.$emit('update:activeId',val);
this.$emit('emitActiveObj',obj);
this.$emit('update:activeId', val);
this.$emit('emitActiveObj', obj);
},
activeId(val) {
this.selectedId = val;
}
},
created(){
created() {
this.selectedId = this.activeId;
this.getCardList();
},
methods:{
handleSizeChange(val) {
this.listParams.pageSize = val;
this.getCardList();
},
handleCurrentChange(val) {
this.listParams.currentPage = val;
this.getCardList();
},
async getCardList() {
this.loading = true;
if (this.$route.meta.type === 'edit' || this.$route.meta.type === 'info') {
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);
methods: {
handleSizeChange(val) {
this.listParams.pageSize = val;
this.getCardList();
},
handleCurrentChange(val) {
this.listParams.currentPage = val;
this.getCardList();
},
async getCardList() {
this.loading = true;
if (this.$route.meta.type === 'edit' || this.$route.meta.type === 'info') {
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();
},
/* eslint-disable */
chooseCard(row) {
this.selectedId = row.coupCardId;
$bus.$emit('card-temp-choose', row);
}
}
}
};
</script>
src/views/mall/common/eqCode.vue
......@@ -4,73 +4,49 @@
<div class="wechat-url" style="margin-bottom:30px;">
<p style="font-weight: 600;margin-bottom:15px">页面链接</p>
<div style="display:flex;align-items: center">
<el-input
type="textarea"
: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"
>
<el-input type="textarea" :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>
</div>
</div>
<div class="wechat-img-box" v-loading="modalData.loading">
<p style="font-weight: 600;margin-bottom:15px">小程序二维码</p>
<img
:src="modalData.imgUrl"
class="wechat-img"
style="width:140px;height:140px;margin-left:130px">
</div>
<img :src="modalData.imgUrl" class="wechat-img" style="width:140px;height:140px;margin-left:130px" />
</div>
</div>
</el-dialog>
</template>
<script>
import request from '../../../api/request.js'
import common from '../../../../static/js/common.js';
export default {
props:{
modalData:{
type:Object,
}
},
data() {
return {
// loading:true,
}
},
mounted(){
export default {
props: {
modalData: {
type: Object
}
},
data() {
return {
// loading:true,
};
},
methods: {
onCopy(e) {
this.$message.success('复制成功');
},
methods: {
onCopy(e){
this.$message.success("复制成功")
},
onError(e){
this.$message.error("复制失败")
}
onError(e) {
this.$message.error('复制失败');
}
}
};
</script>
<style scoped>
.wechat-img-box{
margin:0 auto;
.wechat-img-box {
margin: 0 auto;
text-align: center;
}
.wechat-img{
width:200px;
height:200px;
.wechat-img {
width: 200px;
height: 200px;
}
<style>
\ No newline at end of file
</style>
src/views/mall/common/express.vue
<template>
<el-dialog class="express dialog__body__nopadding" title="查看物流信息" :visible.sync="show" width="60%" :before-close="close">
<div class="express--info">
<p>收件人：<span style="color:#606266">{{info.consignee || '--'}}</span></p>
<p>联系方式：<span style="color:#606266">{{info.consigneePhone || '--'}}</span></p>
<p>收货地址：<span style="color:#606266">{{info.receivingAddress || '--'}}</span></p>
<p>
收件人：<span style="color:#606266">{{ info.consignee || '--' }}</span>
</p>
<p>
联系方式：<span style="color:#606266">{{ info.consigneePhone || '--' }}</span>
</p>
<p>
收货地址：<span style="color:#606266">{{ info.receivingAddress || '--' }}</span>
</p>
</div>
<div class="express--order">
<div class="clearfix express--order__info" v-if="!editShow">
<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 pr20"><span style="color:#303133">快递公司</span>：{{ info.logisticsCompanyName || '--' }}</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>
</div>
<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-option v-for="v in logisticsOptions" :key="v.logisticsCompanyId" :label="v.logisticsCompanyName" :value="v.logisticsCompanyId"></el-option>
</el-select>
<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>
</span>
<span>运单号码：
<span
>运单号码：
<el-input class="vertical-middle w150" v-model="params.courierNumber" placeholder="请输入快递单号"></el-input>
</span>
<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>
<span style="font-size:12px;color:rgb(144, 147, 153);display:block;margin-left:180px" v-show="otherLogistics">若设置为其他快递公司，则系统不提供物流信息的查询</span>
</div>
</div>
<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>
<p class="express--list--item__date">{{v.date}}</p>
<p class="express--list--item__day">{{v.day}}</p>
<p class="express--list--item__time">{{v.time}}</p>
<p class="express--list--item__info">{{v.acceptStation}}</p>
<p class="express--list--item__date">{{ v.date }}</p>
<p class="express--list--item__day">{{ v.day }}</p>
<p class="express--list--item__time">{{ v.time }}</p>
<p class="express--list--item__info">{{ v.acceptStation }}</p>
</div>
<div class="no-data" v-if="list.length === 0">暂无快递数据</div>
</div>
......@@ -45,182 +52,176 @@
</el-dialog>
</template>
<script>
import {getLogisticsInfo,getLogisticsList,orderOptService} from '@/service/api/mallApi.js';
import {formateDateTimeByType,numberToWeekChinese} from '@/utils/index.js';
export default {
props:{
show:{
type:Boolean,
default:false
},
id:{
type:String,
default:''
},
isInfo:{
type:Boolean,
default:false
}
import { getLogisticsInfo, getLogisticsList, orderOptService } from '@/service/api/mallApi.js';
import { formateDateTimeByType, numberToWeekChinese } from '@/utils/index.js';
export default {
props: {
show: {
type: Boolean,
default: false
},
watch:{
show(val) {
if (val) {
this.getLogisticsInfo();
}
}
id: {
type: String,
default: ''
},
data() {
return {
loading:false,
info:{},
list:[],
logisticsOptions:[],
params:{
logisticsCompanyId:'',
logisticsCompanyCode:'',
courierNumber:'',
otherLogisticsCompanyName:'',
},
otherLogistics:false,
editShow:false
isInfo: {
type: Boolean,
default: false
}
},
watch: {
show(val) {
if (val) {
this.getLogisticsInfo();
}
}
},
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() {
this.editShow = false;
this.$emit('update:show',false);
},
// 编辑快递
editExpress() {
this.editShow = true;
this.params = {
logisticsCompanyId:this.info.logisticsCompanyId,
logisticsCompanyCode:this.info.logisticsCompanyCode,
courierNumber:this.info.courierNumber
};
},
//限制物流公司的名称
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=''
}
//限制物流公司的名称
logisticsNameLimit(value) {
this.$nextTick(() => {
this.params.otherLogisticsCompanyName = this.getInputVal2(value, 8);
});
},
//快递公司下拉
changeLogistics(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=''
this.otherLogistics = false;
this.params.otherLogisticsCompanyName = '';
}
},
// 提交按钮
submitExpress() {
if (!this.params.logisticsCompanyId) {
this.$tips({type:'warning',message:'请选择快递'});
return;
} else {
this.otherLogistics = false;
this.params.otherLogisticsCompanyName = '';
}
},
// 提交按钮
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;
}
this.logisticsOptions.map(v => {
if (v.logisticsCompanyId === this.params.logisticsCompanyId) {
this.params.logisticsCompanyCode = v.logisticsCompanyCode;
}
})
if ( this.params.logisticsCompanyCode ==='QITA' ) {
if ( this.params.otherLogisticsCompanyName==='' ) {
this.$tips({type:'warning',message:'请填写快递公司'});
return;
}
}
let logisticsCompanyName
if ( this.params.logisticsCompanyCode ==='QITA'){
logisticsCompanyName=this.params.otherLogisticsCompanyName
}else{
logisticsCompanyName = this.logisticsOptions.find( item => {
return item.logisticsCompanyId === this.params.logisticsCompanyId
}).logisticsCompanyName
}
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});
}
let logisticsCompanyName;
if (this.params.logisticsCompanyCode === 'QITA') {
logisticsCompanyName = this.params.otherLogisticsCompanyName;
} else {
logisticsCompanyName = this.logisticsOptions.find(item => {
return item.logisticsCompanyId === this.params.logisticsCompanyId;
}).logisticsCompanyName;
}
let params = {
optType: 3,
integralMallProExchangeId: this.id,
logisticsCompanyId: this.params.logisticsCompanyId,
logisticsCompanyCode: this.params.logisticsCompanyCode,
courierNumber: this.params.courierNumber,
logisticsCompanyName: logisticsCompanyName
};
orderOptService(params).then(res => {
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.$tips({ type: 'success', message: '修改快递信息成功' });
this.editShow = false;
this.getLogisticsInfo();
}
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>
<style lang="scss" scoped>
.express{
.express {
&--info {
padding-bottom:10px;
border-bottom:1px solid #DCDFE6;
padding-bottom: 10px;
border-bottom: 1px solid #dcdfe6;
// border-top:1px solid #DCDFE6;
p {
line-height: 30px;
......@@ -228,19 +229,19 @@ import {formateDateTimeByType,numberToWeekChinese} from '@/utils/index.js';
}
}
&--order {
padding:15px 0;
border-bottom:1px solid #DCDFE6;
padding: 15px 0;
border-bottom: 1px solid #dcdfe6;
&__info {
&--btn {
padding:0;
padding: 0;
}
}
}
&--list {
background:#f0f2f5;
background: #f0f2f5;
max-height: 250px;
overflow-y: auto;
padding:10px 0;
padding: 10px 0;
font-size: 13px;
&--item {
position: relative;
......@@ -253,14 +254,14 @@ import {formateDateTimeByType,numberToWeekChinese} from '@/utils/index.js';
width: 1px;
background: #bfbfbf;
}
padding-left:15px;
padding-left: 15px;
display: table;
line-height: 25px;
p {
display: table-cell;
}
&__dot {
display:inline-block;
display: inline-block;
width: 7px;
height: 7px;
background: #bfbfbf;
......@@ -272,7 +273,6 @@ import {formateDateTimeByType,numberToWeekChinese} from '@/utils/index.js';
}
&__day {
width: 40px;
}
&__time {
width: 80px;
......
src/views/mall/common/member-info.vue
<template>
<el-popover placement="top-start" width="400" height="180" trigger="hover" @show="getSingleInfo">
<div class="corsur-pointer" @click="linkDetail">
<div class="singelinfo">
<div class="singelinfo-img"><img width="100" height="100" :src="singleInfo.thirdImgUrl || defaultAvatar" alt=""></div>
<div class="singelinfo-content pl10 pr10">
<span class="lheigt">{{ singleInfo.memberName }}
<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.wxStatus == 0 ? '未使用小程序' : singleInfo.wxStatus == 1 ? '使用过小程序' : ''" class="channelicon fr mr6"
:src="singleInfo.wxStatus == 0 ? xcxicongray : singleInfo.wxStatus == 1 ? xcxicon : ''"/> -->
<img :title="singleInfo.usedMiniProgram ? '使用过小程序' : '未使用小程序' " class="channelicon fr mr6"
:src="singleInfo.usedMiniProgram ? xcxicon : xcxicongray" 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"
:src="singleInfo.authStatus ? autoIcon : unAutoIcon" style="margin-right:5px"/>
</span>
<p class="lheigt">
<span style="margin-right:5px;">{{ singleInfo.memberGender}}</span>
<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 class="singelinfo-costitem"><p class="no-wrap">{{ singleInfo.lastCostTime || '--'}}</p><p>最近消费</p></div>
</div>
</div>
<el-popover placement="top-start" width="400" height="180" trigger="hover" @show="getSingleInfo">
<div class="corsur-pointer" @click="linkDetail">
<div class="singelinfo">
<div class="singelinfo-img">
<!-- <img width="100" height="100" :src="singleInfo.thirdImgUrl || defaultAvatar" alt="" /> -->
<img width="100" height="100" v-if="singleInfo.thirdImgUrl" :src="singleInfo.thirdImgUrl" alt="" />
<img width="100" height="100" v-else src="../../../../static/img/head_default.png" alt="" />
</div>
<div class="singelinfo-content pl10 pr10">
<span class="lheigt"
>{{ singleInfo.memberName }}
<!-- <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.usedMiniProgram ? '使用过小程序' : '未使用小程序'" class="channelicon fr mr6" :src="singleInfo.usedMiniProgram ? xcxicon : xcxicongray" 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" :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" />
<img title="已关注公众号" class="fr" v-else-if="singleInfo.status == 1" src="../../../../static/img/status@gzh.png" style="margin-right:5px" />
<img title="未关注公众号" class="fr" v-else src="../../../../static/img/status@gzhgray.png" style="margin-right:5px" />
<img title="使用过小程序" class="channelicon fr mr6" v-if="singleInfo.usedMiniProgram" src="../../../../static/img/status@xcx.png" style="margin-right:5px" />
<img title="未使用小程序" class="channelicon fr mr6" v-else src="../../../../static/img/status@xcxgray.png" style="margin-right:5px" />
<img title="已绑定手机号" class="channelicon fr mr6" v-if="singleInfo.bindPhone" src="../../../../static/img/phone_icon.png" style="margin-right:5px" />
<img title="未绑定手机号" class="channelicon fr mr6" v-else src="../../../../static/img/phone_icon_gray.png" style="margin-right:5px" />
<img title="已认证" class="channelicon fr mr6" v-if="singleInfo.authStatus" src="../../../../static/img/member_icon.png" style="margin-right:5px" />
<img title="未认证" class="channelicon fr mr6" v-else src="../../../../static/img/member_icon_gray.png" style="margin-right:5px" />
</span>
<p class="lheigt">
<span style="margin-right:5px;">{{ singleInfo.memberGender }}</span>
<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 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 class="singelinfo-costitem">
<p class="no-wrap">{{ singleInfo.lastCostTime || '--' }}</p>
<p>最近消费</p>
</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>
<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="">
<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>
</a>
</span>
</el-popover>
</template>
<script>
import {formateDateTimeByType} from '@/utils/index.js';
import {getMemberInfo} from '@/service/api/mallApi.js';
import { getMemberInfo } from '@/service/api/mallApi.js';
export default {
name:'member-info',
props:{
row:{
type:Object,
default(){
return {}
}
}
},
data() {
return {
singleInfo:{},
defaultAvatar:require('../../../assets/img/head_default.png'),
gzhiconcanclegray:require('../../../assets/img/status@gzhcanclegray.png'),//取消关注微信公众号
gzhicon:require('../../../assets/img/status@gzh.png'),//已关注微信公众号
gzhicongray:require('../../../assets/img/status@gzhgray.png'),//未关注微信公众号
xcxicongray:require('../../../assets/img/status@xcxgray.png'),//未使用小程序
xcxicon:require('../../../assets/img/status@xcx.png'),//已使用小程序
bphone:require('../../../assets/img/phone_icon.png'),//绑定手机
ubphone:require('../../../assets/img/phone_icon_gray.png'),//未绑定手机
autoIcon:require('../../../assets/img/member_icon.png'),//已认证
unAutoIcon:require('../../../assets/img/member_icon_gray.png'),//未认证
}
name: 'member-info',
props: {
row: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
singleInfo: {},
// defaultAvatar: require('../../../assets/img/head_default.png'),
// gzhiconcanclegray: require('../../../assets/img/status@gzhcanclegray.png'), //取消关注微信公众号
// gzhicon: require('../../../assets/img/status@gzh.png'), //已关注微信公众号
// gzhicongray: require('../../../assets/img/status@gzhgray.png'), //未关注微信公众号
// xcxicongray: require('../../../assets/img/status@xcxgray.png'), //未使用小程序
// xcxicon: require('../../../assets/img/status@xcx.png'), //已使用小程序
// bphone: require('../../../assets/img/phone_icon.png'), //绑定手机
// ubphone: require('../../../assets/img/phone_icon_gray.png'), //未绑定手机
// autoIcon: require('../../../assets/img/member_icon.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:{
filterAvatar(img) {
return img?img.replace(/^http(s)?/,'https'):this.defaultAvatar;
},
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}`);
getSingleInfo() {
getMemberInfo({ memberId: this.row.memberId }).then(res => {
if (res.errorCode === 0) {
this.singleInfo = res.result || {};
}
});
},
filters:{
formatCardName(val) {
if(val) {
if(val.length > 10) {
val = val.substr(0, 10) + '...';
}
linkDetail() {
window.open(`/member/#/wechatmemberDetail?memberId=${this.row.memberId}`);
}
},
filters: {
formatCardName(val) {
if (val) {
if (val.length > 10) {
val = val.substr(0, 10) + '...';
}
return val;
},
}
return val;
}
}
}
};
</script>
src/views/mall/common/tinymce-edit.vue
......@@ -47,31 +47,30 @@ export const postForm = (url, params) => {
-->
<template>
<div class="tinymce-contain">
<editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
<editor id="tinymce" v-model="tinymceHtml" :init="init"></editor>
</div>
</template>
<script>
// import request from '../../api/request.js'
import request from '../../../api/request.js'
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import request from '../../../api/request.js';
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/contextmenu';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/colorpicker';
import 'tinymce/plugins/textcolor';
export default {
name: "tinymce-edit",
props: ["bodyHtml",'projectName'],
name: 'tinymce-edit',
props: ['bodyHtml', 'projectName'],
data() {
return {
tinymceHtml: '请输入内容',
init: {
language_url: 'static/tinymce/zh_CN.js',
......@@ -84,74 +83,67 @@ export default {
// images_upload_base_path: '/some/basepath',
images_upload_credentials: true, //是否应传递cookie等跨域的凭据
// images_upload_handler提供三个参数：blobInfo, success, failure
images_upload_handler: (blobInfo, success, failure)=>{
console.log(blobInfo)
this.handleImgUpload(blobInfo, success, failure)
images_upload_handler: (blobInfo, success, failure) => {
this.handleImgUpload(blobInfo, success, failure);
},
// 添加插件
// plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
// toolbar:
// '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',
toolbar:
'fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | link unlink image code',
fontsize_formats: "8px 10px 12px 14px 18px 24px 36px",
toolbar: 'fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | link unlink image code',
fontsize_formats: '8px 10px 12px 14px 18px 24px 36px',
branding: false,
menubar: false,
setup: function(editor) {
// 点击编辑框回调
editor.on('click', function(e) {
console.log('Editor was clicked');
});
// 点击编辑框回调
editor.on('click', function(e) {});
}
}
}
};
},
methods: {
// 上传图片
handleImgUpload (blobInfo, success, failure) {
var that = this
let formdata = new FormData()
formdata.set('upload_file', blobInfo.blob())
formdata.set("requestProject",that.repProjectName);
console.log(formdata)
request.post('/api-plug/upload-img', formdata).then(res => {
success(res.data.result[0].qcloudImageUrl)
}).catch(res => {
console.log(res)
failure('error')
})
},
handleImgUpload(blobInfo, success, failure) {
var that = this;
let formdata = new FormData();
formdata.set('upload_file', blobInfo.blob());
formdata.set('requestProject', that.repProjectName);
request
.post('/api-plug/upload-img', formdata)
.then(res => {
success(res.data.result[0].qcloudImageUrl);
})
.catch(res => {
failure('error');
});
}
},
watch: {
projectName: function(newData,oldData){
projectName: function(newData, oldData) {
var that = this;
// console.log("新数据:",newData,oldData)
that.repProjectName = newData || 'gic-web';
},
bodyHtml: function(newData,oldData){
bodyHtml: function(newData, oldData) {
var that = this;
// console.log("新数据:",newData,oldData)
that.tinymceHtml = newData;
},
}
},
components: {
Editor
Editor
},
mounted() {
var that = this
var that = this;
tinymce.init({
fontsize_formats: "8px 10px 12px 14px 18px 24px 36px",
fontsize_formats: '8px 10px 12px 14px 18px 24px 36px'
});
that.tinymceHtml = that.bodyHtml;
}
}
};
</script>
<style scoped>
.tinymce-contain {
width: 900px
}
.tinymce-contain {
width: 900px;
}
</style>
src/views/mall/common/update-count.vue
<template slot-scope="scope">
<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-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>
<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>
</div>
<div slot="reference" @click="edit">
<span>{{model[theType]}}{{typeName}}</span> <i class="el-icon-edit cursor-hover"></i>
<div slot="reference" @click="edit">
<span>{{ model[theType] }}{{ typeName }}</span> <i class="el-icon-edit cursor-hover"></i>
</div>
</el-popover>
</template>
......@@ -16,58 +16,60 @@ import { updateStockService, updateIntegralCostService, updateCashCostService }
export default {
props: {
model: {
type: Object,
default() {
return {}
}
},
theType: String,
typeName: String,
precision:{
type:Number,
default:0
model: {
type: Object,
default() {
return {};
}
},
theType: String,
typeName: String,
precision: {
type: Number,
default: 0
}
},
methods:{
methods: {
// 提交更新并刷新列表
async submit() {
// try {
console.log(this.value,this.theType,this.model.inputValue,this.precision)
if (this.theType === 'cashCost' && this.model.inputValue > this.model.costValue) {
this.$tips({type:'warning',message:'现金费用不能大于礼品成本'});
return;
}
let res = null;
if (this.theType === 'virtualStock') { // 库存
res = await updateStockService({proId:this.model.integralMallProId,stock:this.model.inputValue});
} else if (this.theType === 'cashCost') { // 现金费用
res = await updateCashCostService({proId:this.model.integralMallProId,cost:this.model.inputValue});
} else if (this.theType === 'integralCost') { // 积分费用
res = await updateIntegralCostService({proId:this.model.integralMallProId,cost:this.model.inputValue});
}
if (res.errorCode === 0) {
if (this.theType === 'virtualStock') {
this.$tips({type:'success',message: '积分商城修改库存时，请同步修改对应卡券的库存'});
} else {
this.$tips({type:'success',message: '更新成功'});
}
this.$emit('refresh');
if (this.theType === 'cashCost' && this.model.inputValue > this.model.costValue) {
this.$tips({ type: 'warning', message: '现金费用不能大于礼品成本' });
return;
}
let res = null;
if (this.theType === 'virtualStock') {
// 库存
res = await updateStockService({ proId: this.model.integralMallProId, stock: this.model.inputValue });
} else if (this.theType === 'cashCost') {
// 现金费用
res = await updateCashCostService({ proId: this.model.integralMallProId, cost: this.model.inputValue });
} else if (this.theType === 'integralCost') {
// 积分费用
res = await updateIntegralCostService({ proId: this.model.integralMallProId, cost: this.model.inputValue });
}
if (res.errorCode === 0) {
if (this.theType === 'virtualStock') {
this.$tips({ type: 'success', message: '积分商城修改库存时，请同步修改对应卡券的库存' });
} else {
this.$tips({type:'error',message: '更新失败'});
this.$tips({ type: 'success', message: '更新成功' });
}
this.$emit('refresh');
} else {
this.$tips({ type: 'error', message: '更新失败' });
}
// } catch (err) {
// this.$tips({type:'error',message: '更新失败'});
// }
},
// 编辑操作
// 编辑操作
edit() {
// 这里precision不能更新 所以加上nextTick
this.$nextTick(_ => {
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>
src/views/mall/coupon/exchange.vue
<template>
<section class="dm-wrap" v-loading="loading">
<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-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-select>
<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-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-button type="primary" class="fr" icon="iconfont icon-icon_yunxiazai fz14" @click="exportExcel"> 导出列表</el-button>
</div>
<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">
<template slot-scope="scope">
<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>
<span v-else>{{scope.row[v.prop]}}</span>
</template>
</el-table-column>
</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>
<vue-gic-export-excel :dataArr="tableList" :dialogVisible.sync="dialogVisible" :type="2" :excelUrl="excelUrl" :params="params" :projectName="projectName"></vue-gic-export-excel>
</section>
<section class="dm-wrap" v-loading="loading">
<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-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-select>
<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-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-button type="primary" class="fr" icon="iconfont icon-icon_yunxiazai fz14" @click="exportExcel"> 导出列表</el-button>
</div>
<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">
<template slot-scope="scope">
<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>
<span v-else>{{ scope.row[v.prop] }}</span>
</template>
</el-table-column>
</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>
<vue-gic-export-excel :dataArr="tableList" :dialogVisible.sync="dialogVisible" :type="2" :excelUrl="excelUrl" :params="params" :projectName="projectName"></vue-gic-export-excel>
</section>
</template>
<script>
import {getPageExchangeLogsList,exportExchangeListExcel} from '@/service/api/mallApi.js';
import {formateDateTimeByType} from '@/utils/index.js';
import { getPageExchangeLogsList } from '@/service/api/mallApi.js';
import { formateDateTimeByType } from '@/utils/index.js';
import memberInfoCom from '../common/member-info';
export default {
components:{
memberInfoCom
},
data() {
let _vm = this;
return {
loading:false,
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'},
{label:'领取状态',prop:'status',width:'100',align:'left',formatter(row){
let statusLabel ='--';
_vm.statusOptions.map(v => {
if (row.status === v.value) {
statusLabel = v.label
}
});
return statusLabel;
}},
{label:'使用状态',prop:'useStatus',width:'100',align:'left',formatter(row){
return row.useStatus === 5?'已使用':'未使用';
}},
],
total:0,
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:{}, // 传递的参数
};
export default {
components: {
memberInfoCom
},
data() {
var that = this;
return {
loading: false,
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' },
{
label: '领取状态',
prop: 'status',
width: '100',
align: 'left',
formatter(row) {
let statusLabel = '--';
that.statusOptions.map(v => {
if (row.status === v.value) {
statusLabel = v.label;
}
});
return statusLabel;
}
},
{
label: '使用状态',
prop: 'useStatus',
width: '100',
align: 'left',
formatter(row) {
return row.useStatus === 5 ? '已使用' : '未使用';
}
}
],
total: 0,
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() {
// 更新面包屑
this.$store.commit('mutations_breadcrumb',[{name:'积分商城'},{name:'优惠券',path:'/coupon'},{name:'优惠券兑换记录',path:''}]);
handleCurrentChange(val) {
this.listParams.currentPage = val;
this.getPageExchangeLogsList();
},
methods: {
// 列表方法
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`;
},
// 拉去列表
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`;
}
};
}
};
</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 { formateDateTimeByType } from '@/utils/index.js';
export default {
components: {
'card-temp': cardTemp
},
data() {
return {
form: {
integralMallProId: '',
proReferId: '',
cardType:0,
cardName:'',
proName: '', // String 商品名字，优惠券就是所选券的名字。 (必填)
integralCost: 0, // Number 100 积分费用 (必填)
cashCost: 0, // Number 现金费用，两位小数
memberGradeArr: [], // array 适用会员 这里是数组 传给后台要拼接为字符串数组逗号隔开
limitTimes: 0,
exchangeDateType: 1,
exchangeTimeType: 1, // 兑换时间类型 1:全部 2:部分时段
proShowStatus: 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 || '';
components: {
'card-temp': cardTemp
},
data() {
return {
form: {
integralMallProId: '',
proReferId: '',
cardType: 0,
cardName: '',
proName: '', // String 商品名字，优惠券就是所选券的名字。 (必填)
integralCost: 0, // Number 100 积分费用 (必填)
cashCost: 0, // Number 现金费用，两位小数
memberGradeArr: [], // array 适用会员 这里是数组 传给后台要拼接为字符串数组逗号隔开
limitTimes: 0,
exchangeDateType: 1,
exchangeTimeType: 1, // 兑换时间类型 1:全部 2:部分时段
proShowStatus: 1,
releaseType: 1,
this.form.cardType = result.cardType
console.log('333333',this.form.cardType)
// result.showStore = 2;
this.sendChildData = {
storeType: result.showStore || 0
}
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 拉取详情
/* 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.sendChildData.storeGroupIds = result.storeGroupIds || '';
} else if (result.showStore === 2) {
let list = [];
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.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.isLimitTimes = this.form.limitTimes > 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 || [];
}
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);
},
this.form.cardType = result.cardType;
this.sendChildData = {
storeType: result.showStore || 0
};
submit(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.submitService();
} else {
console.log('表单未提交完整');
}
if (result.showStore === 1) {
this.sendChildData.storeGroupIds = result.storeGroupIds || '';
} else if (result.showStore === 2) {
let list = [];
if (result.storeInfo.length) {
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() {
if (!this.form.proReferId) {
this.$tips({ type: 'warning', message: '请选择优惠券' });
return;
}
console.log(4444444,this.form.cardType)
console.log(this.timeRangeList)
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:部分时段
this.isLimitTimes = this.form.limitTimes > 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 (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, //库存
cardType :this.form.cardType
}
console.log(22222,params)
showStore: this.sendChildData.storeType || 0, // 显示门店 0所有 1部分分组 2部分门店
// 判断 兑换日期
if (params.exchangeDateType === 2) {
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;
}
}
virtualStock: this.form.virtualStock || 0, //库存
cardType: this.form.cardType
};
// 判断 兑换时段
if (params.exchangeTimeType === 2) {
let list = [];
let flag = false;
let arr = [];
console.log(JSON.stringify(this.timeRangeList))
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;
}
// 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('#') : '';
}
// 判断 兑换日期
if (params.exchangeDateType === 2) {
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;
}
}
let breakFlag = false;
for (var i = 0; i < arr.length; i++) {
if (breakFlag) {
break;
}
var p1 = arr[i];
for (var j = i + 1; j < arr.length; j++) {
var p2 = arr[j];
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])) {
breakFlag = true;
break;
}
}
}
if (breakFlag) {
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;
}
// 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('#') : '';
}
// 判断发送时间
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;
}
let breakFlag = false;
for (let i = 0; i < arr.length; i++) {
if (breakFlag) {
break;
}
let p1 = arr[i];
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.storeGroupIds) {
params.storeGroupIds = this.sendChildData.storeGroupIds || '';
} else {
this.$tips({ type: 'warning', message: '门店分组不能为空' });
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;
}
}
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: '操作失败' });
})
// 门店分组
if (this.sendChildData.storeType === 1) {
if (this.sendChildData.storeGroupIds) {
params.storeGroupIds = this.sendChildData.storeGroupIds || '';
} else {
this.$tips({ type: 'warning', message: '门店分组不能为空' });
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;
}
}
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>
<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">
<h3 class="dm-title__label">选择卡券</h3>
<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 class="dm-form__wrap">
<h3 class="dm-title__label">优惠券信息</h3>
<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 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-form-item>
<el-form-item prop="limitTimes" label="次数限制">
<el-checkbox :disabled="isInfo" v-model="isLimitTimes"> 每个会员限制兑换
</el-checkbox>
<el-checkbox :disabled="isInfo" v-model="isLimitTimes"> 每个会员限制兑换 </el-checkbox>
<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 prop="memberGradeArr" label="适用会员">
......@@ -34,12 +33,12 @@
<el-radio-group v-model="form.exchangeDateType" style="line-height:inherit;">
<el-radio :label="1">全部日期</el-radio>
<el-radio :label="2">固定日期</el-radio>
<el-radio :label="3">每月</el-radio>
<el-radio :label="4">每周</el-radio>
<el-radio :label="3">每月</el-radio>
<el-radio :label="4">每周</el-radio>
</el-radio-group>
<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-select class="w300" size="small" v-model="form.exchangeDateDayArr" v-if="form.exchangeDateType === 3" multiple placeholder="请选择">
<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-option v-for="item in monthOptions" :key="item" :label="item" :value="item"></el-option>
</el-select>
<el-select class="w300" size="small" v-model="form.exchangeDateWeekArr" v-if="form.exchangeDateType === 4" multiple placeholder="请选择">
......@@ -54,14 +53,13 @@
<el-radio :label="2" class="vertical-middle">部分时段</el-radio>
</el-radio-group>
<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-button v-if="i" class="vertical-middle" type="text" @click="delTimeRange(i)">删除</el-button>
</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>
</div>
</el-form-item>
<el-form-item prop="proShowStatus" label="显示状态">
<el-radio-group v-model="form.proShowStatus">
......@@ -74,13 +72,13 @@
<el-radio :label="1">立即发布</el-radio>
<el-radio :label="2">定时发布</el-radio>
</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>
</div>
</el-form-item>
</div>
<div class="btn-wrap_fixed" :class="{'on':asideShow}">
<el-button type="primary" @click="submit('form')" v-if="!isInfo">{{isAdd?'确认新增':'确认编辑'}}</el-button>
<div class="btn-wrap_fixed" :class="{ on: asideShow }">
<el-button type="primary" @click="submit('form')" v-if="!isInfo">{{ isAdd ? '确认新增' : '确认编辑' }}</el-button>
<el-button @click="$router.go(-1)">返 回</el-button>
</div>
</el-form>
......
src/views/mall/coupon/list.vue
<template>
<section class="dm-wrap">
<section class="dm-wrap">
<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>
<el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading">
<el-table-column label="商品" align="left" prop="timesStatus" min-width="140">
<template slot-scope="scope">
<div class="ellipsis-100" >
<img class="vertical-middle table__avatar--gift" :src="filterAvatar(scope.row.cardType)" 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>
<el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading">
<el-table-column label="商品" align="left" prop="timesStatus" min-width="140">
<template slot-scope="scope">
<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" v-if="scope.row.cardType === 0" src="../../../../static/img/credit_daijin_icon.png" width="40" height="40" />
<img class="vertical-middle table__avatar--gift" v-if="scope.row.cardType === 1" src="../../../../static/img/credit_zhekou_icon.png" width="40" height="40" />
<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>
</template>
</el-table-column>
<el-table-column label="积分费用" align="left" prop="integralCost">
<template slot-scope="scope">
<updateCount :model="scope.row" theType="integralCost" typeName="积分" @refresh="getPageCardsList"></updateCount>
</template>
</el-table-column>
<el-table-column label="现金费用" align="left" prop="cashCost">
<template slot-scope="scope">
</template>
</el-table-column>
<el-table-column label="积分费用" align="left" prop="integralCost">
<template slot-scope="scope">
<updateCount :model="scope.row" theType="integralCost" typeName="积分" @refresh="getPageCardsList"></updateCount>
</template>
</el-table-column>
<el-table-column label="现金费用" align="left" prop="cashCost">
<template slot-scope="scope">
<updateCount :model="scope.row" theType="cashCost" :precision="2" typeName="元" @refresh="getPageCardsList"></updateCount>
</template>
</el-table-column>
<el-table-column label="库存" align="left" prop="virtualStock">
<template slot-scope="scope">
</template>
</el-table-column>
<el-table-column label="库存" align="left" prop="virtualStock">
<template slot-scope="scope">
<updateCount :model="scope.row" theType="virtualStock" @refresh="getPageCardsList"></updateCount>
</template>
</el-table-column>
<el-table-column label="兑换次数" align="left" prop="allExchangeNumber">
<template slot-scope="scope">
<span @click="$router.push('/coupon/exchange/'+scope.row.integralMallProId)" class="blue">{{scope.row.allExchangeNumber}}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="left" prop="status" min-width="100px">
<template slot-scope="scope" >
<span v-html="renderStatus(scope.row).html"></span>
</template>
</el-table-column>
<el-table-column label="显示状态" align="center" prop="proShowStatus">
<template slot-scope="scope" >
{{renderShowStatus(scope.row)}}
</template>
</el-table-column>
<el-table-column label="操作" align="left" min-width="160px">
</template>
</el-table-column>
<el-table-column label="兑换次数" align="left" prop="allExchangeNumber">
<template slot-scope="scope">
<span @click="$router.push('/coupon/exchange/' + scope.row.integralMallProId)" class="blue">{{ scope.row.allExchangeNumber }}</span>
</template>
</el-table-column>
<el-table-column label="状态" align="left" prop="status" min-width="100px">
<template slot-scope="scope">
<span v-html="renderStatus(scope.row).html"></span>
</template>
</el-table-column>
<el-table-column label="显示状态" align="center" prop="proShowStatus">
<template slot-scope="scope">
{{ renderShowStatus(scope.row) }}
</template>
</el-table-column>
<el-table-column label="操作" align="left" min-width="160px">
<template slot-scope="scope">
<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="是否删除该优惠券?">
<el-button type="text">删除</el-button>
</dm-delete>
</template>
</el-table-column>
</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>
<!-- 推广 -->
<eqCodeDialog :modalData="modalData"></eqCodeDialog>
</section>
</el-table-column>
</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>
<!-- 推广 -->
<eqCodeDialog :modalData="modalData"></eqCodeDialog>
</section>
</template>
<script>
import { getPageCardsList, deleteProService } from '@/service/api/mallApi.js';
import updateCount from '../common/update-count';
import {formateDateTimeByType,format} from '@/utils/index.js';
import eqCodeDialog from '../common/eqCode.vue'
import request from '../../../api/request.js'
import { formateDateTimeByType, format } from '@/utils/index.js';
import eqCodeDialog from '../common/eqCode.vue';
import request from '../../../api/request.js';
export default {
name: 'coupon-list',
components: {
updateCount,
eqCodeDialog
},
data () {
return {
uuid:'',
defaultAvatar:require('../../../assets/img/head_default.png'),
daijinAvatar:require('../../../assets/img/credit_daijin_icon.png'),
zhekouAvatar:require('../../../assets/img/credit_zhekou_icon.png'),
duihuanAvatar:require('../../../assets/img/credit_duihuan_icon.png'),
loading:false,
tableList:[],
listParams:{
currentPage:1,
pageSize:20
},
total:0,
modalData:{
show:false,
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));
name: 'coupon-list',
components: {
updateCount,
eqCodeDialog
},
data() {
return {
uuid: '',
// defaultAvatar: require('../../../assets/img/head_default.png'),
// daijinAvatar: require('../../../assets/img/credit_daijin_icon.png'),
// zhekouAvatar: require('../../../assets/img/credit_zhekou_icon.png'),
// duihuanAvatar: require('../../../assets/img/credit_duihuan_icon.png'),
defaultAvatar: '../../../../static/img/head_default.png',
daijinAvatar: '../../../../static/img/credit_daijin_icon.png',
zhekouAvatar: '../../../../static/img/credit_zhekou_icon.png',
duihuanAvatar: '../../../../static/img/credit_duihuan_icon.png',
loading: false,
tableList: [],
listParams: {
currentPage: 1,
pageSize: 20
},
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 = "无库存" ;
total: 0,
modalData: {
show: false,
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) {
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) )))
// console.log(item.cardName,new Date().getTime(),item.exchangeFixDateBegin,item.exchangeFixDateEnd)
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==3) {
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 == 3) {
dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>';
dhzt_show = '未在兑换时间';
let _exchange_date_day = item.exchangeDateDay;
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>';
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 = '未在兑换时间';
}
}
//exchangeTimeType 兑换时间类型 1:全部 2:部分时段
console.log('兑换时间类型'+item.cardName,item.exchangeTimeType==2, item.exchangeTimeList , dhzt_show )
if(item.exchangeTimeType == 2 && item.exchangeTimeList && (dhzt_show == '无库存'||dhzt_show == '正常')) {
dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>';
dhzt_show = '未在兑换时间';
console.log('时间类型',item.exchangeTimeList)
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 (_exchange_date_type == 4) {
let _exchange_date_week = item.exchangeDateWeek;
let 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 = '未在兑换时间';
}
}
//exchangeTimeType 兑换时间类型 1:全部 2:部分时段
if (item.exchangeTimeType == 2 && item.exchangeTimeList && (dhzt_show == '无库存' || dhzt_show == '正常')) {
dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>';
dhzt_show = '未在兑换时间';
for (let k = 0; k < item.exchangeTimeList.length; k++) {
let _o = item.exchangeTimeList[k];
let start = _o.exchangeTimeBeginNumber;
let end = _o.exchangeTimeEndNumber;
let _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 (_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 (item.status == 1) {
dhzt_show_html = '<span class="dm-status--info">已下架</span>';
dhzt_show = '已下架';
}
if(item.status==1) {
dhzt_show_html = '<span class="dm-status--info">已下架</span>';
dhzt_show = "已下架" ;
}
return {
text:dhzt_show,
html:dhzt_show_html
};
},
renderShowStatus(item) {
//商品显示状态 1:上架状态就显示 2:兑换状态下显示
var dhzt_show = this.renderStatus(item).text;
var pro_show_status = item.proShowStatus ;
var proShowStatus = "不显示" ;
// var mall_show_status = "mall_show_no" ;
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 {
text: dhzt_show,
html: dhzt_show_html
};
},
renderShowStatus(item) {
//商品显示状态 1:上架状态就显示 2:兑换状态下显示
var dhzt_show = this.renderStatus(item).text;
var pro_show_status = item.proShowStatus;
var proShowStatus = '不显示';
// var mall_show_status = "mall_show_no" ;
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;
},
search() {
this.listParams.currentPage = 1;
this.getPageCardsList();
},
handleSizeChange(val) {
this.listParams.pageSize = val;
this.getPageCardsList();
},
handleCurrentChange(val) {
this.listParams.currentPage = val;
this.getPageCardsList();
},
async getPageCardsList() {
this.loading = true;
let res = await getPageCardsList(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;
this.loading = false;
},
// 删除
delData(row) {
deleteProService({proId:row.integralMallProId}).then(res => {
this.$tips({type: 'success',message: '删除成功!'});
}
return proShowStatus;
},
search() {
this.listParams.currentPage = 1;
this.getPageCardsList();
},
handleSizeChange(val) {
this.listParams.pageSize = val;
this.getPageCardsList();
},
handleCurrentChange(val) {
this.listParams.currentPage = val;
this.getPageCardsList();
},
async getPageCardsList() {
this.loading = true;
let res = await getPageCardsList(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;
this.loading = false;
},
// 删除
delData(row) {
deleteProService({ proId: row.integralMallProId })
.then(res => {
this.$tips({ type: 'success', message: '删除成功!' });
this.getPageCardsList();
}).catch(err => {
this.$tips({type: 'error',message: '删除失败!'});
})
},
// 推广
getLink(mallProId){
this.modalData.loading=true
let params={
integralMallProId:mallProId,
type:"card"
.catch(err => {
this.$tips({ type: 'error', message: '删除失败!' });
});
},
// 推广
getLink(mallProId) {
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>
src/views/mall/gift/exchange.vue
<template>
<section class="dm-wrap" v-loading="loading">
<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-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-select>
<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-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-button type="primary" class="fr" icon="iconfont icon-icon_yunxiazai fz14" @click="exportExcel"> 导出列表</el-button>
</div>
<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">
<template slot-scope="scope">
<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>
<span v-else>{{scope.row[v.prop]}}</span>
</template>
</el-table-column>
<section class="dm-wrap" v-loading="loading">
<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-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-select>
<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-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-button type="primary" class="fr" icon="iconfont icon-icon_yunxiazai fz14" @click="exportExcel"> 导出列表</el-button>
</div>
<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">
<template slot-scope="scope">
<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>
<span v-else>{{ scope.row[v.prop] }}</span>
</template>
</el-table-column>
<el-table-column label="领取状态" align="left" width="100px" prop="status" v-if="isWxExchange">
<template slot-scope="scope">
<span>{{scope.row.status === 1?'未领取':'已领取'}}</span>
</template>
</el-table-column>'
<el-table-column :label="isWxExchange?'使用状态':'状态'" align="left" width="100px">
<template slot-scope="scope">
<p>
<span v-if="isWxExchange" type="text">{{scope.row.useStatus === 5?'已使用':'未使用'}}</span>
<span v-else type="text">{{filterStatus(scope.row.status)}}</span>
</p>
<p>
<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">
<a target="_blank" :href="'/member/#/wechatmemberDetail?memberId='+scope.row.memberId">查看详情</a>
</el-button>
</p>
</template>
</el-table-column>
</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>
<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>
</section>
<el-table-column label="领取状态" align="left" width="100px" prop="status" v-if="isWxExchange">
<template slot-scope="scope">
<span>{{ scope.row.status === 1 ? '未领取' : '已领取' }}</span>
</template> </el-table-column
>'
<el-table-column :label="isWxExchange ? '使用状态' : '状态'" align="left" width="100px">
<template slot-scope="scope">
<p>
<span v-if="isWxExchange" type="text">{{ scope.row.useStatus === 5 ? '已使用' : '未使用' }}</span>
<span v-else type="text">{{ filterStatus(scope.row.status) }}</span>
</p>
<p>
<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">
<a target="_blank" :href="'/member/#/wechatmemberDetail?memberId=' + scope.row.memberId">查看详情</a>
</el-button>
</p>
</template>
</el-table-column>
</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>
<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>
</section>
</template>
<script>
import {getPageExchangeLogsList,exportExchangeListExcel} from '@/service/api/mallApi.js';
import {formateDateTimeByType} from '@/utils/index.js';
import { getPageExchangeLogsList } from '@/service/api/mallApi.js';
import { formateDateTimeByType } from '@/utils/index.js';
import express from '../common/express';
import memberInfoCom from '../common/member-info';
export default {
components: {
express,
memberInfoCom
export default {
components: {
express,
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() {
let _vm = this;
return {
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:{}, // 传递的参数
};
handleSizeChange(val) {
this.listParams.pageSize = val;
this.getPageExchangeLogsList();
},
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:''}]);
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.statusOptions = [{label:'所有状态',value:-1},{label:'待发货',value:1},{label:'已发货',value:3}];
this.$store.commit('mutations_breadcrumb',[{name:'积分商城'},{name:'礼品',path:'/gift'},{name:'礼品兑换记录',path:''}]);
this.listParams.beginTime = this.listParams.senendTimedEndTime = '';
}
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) {
let result = '--';
switch(status) {
case 0:
result = '已取消';
break;
case 1:
result = '待发货';
break;
case 3:
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;
// 导出列表
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;
}
};
}
};
</script>
src/views/mall/gift/info.js
......@@ -2,452 +2,447 @@ import { getGradeList, getCategoryList, createIntegralProService, getIntegralMal
import cardTemp from '../common/card-temp.vue';
// import dmUploadAvatar from '@/components/upload/avatar';
import { formateDateTimeByType } from '@/utils/index.js';
import tinymceEdit from '../common/tinymce-edit.vue'
import tinymceEdit from '../common/tinymce-edit.vue';
export default {
components: {
'card-temp': cardTemp,
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',
components: {
'card-temp': cardTemp,
tinymceEdit
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: [] // 是否显示已上传文件列表
// 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', // 当前项目名(必传参数)
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) {
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();
}
// 获取分类列表
async getCategoryList() {
let res = await getCategoryList();
if (res.errorCode === 0) {
this.categoryOptions = res.result || [];
}
},
computed: {
asideShow() {
return this.$store.state.marketing.asideShow
// 新建分类
createCategory() {
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: {
// 删除分类
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();
})
.then(({ value }) => {
createCategoryService({ categoryName: value }).then(res => {
if (res.errorCode === 0) {
this.categoryOptions = res.result || [];
this.$tips({ type: 'success', message: '新建分类成功' });
this.getCategoryList();
} else {
this.$tips({ type: 'error', message: '新建分类失败' });
}
},
// 新建分类
createCategory() {
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;
}
}
}).then(({ value }) => {
createCategoryService({ categoryName: value }).then(res => {
if (res.errorCode === 0) {
this.$tips({ type: 'success', message: '新建分类成功' });
this.getCategoryList();
} else {
this.$tips({ type: 'error', message: '新建分类失败' });
}
})
}).catch(err => {
console.log(err);
});
},
// 获取礼品详情
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
}
});
})
.catch(err => {});
},
// 获取礼品详情
/* 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.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;
if (result.showStore === 1) {
this.sendChildData.storeGroupIds = result.storeGroupIds || '';
} else if (result.showStore === 2) {
let list = [];
if (result.storeInfo.length) {
result.storeInfo.map(v => {
list.push(v);
})
}
this.sendChildData.storeIds = list;
}
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;
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]] })
});
}
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);
})();
}
},
this.sendChildData = {
storeType: result.showStore || 0
};
// 新增兑换时段-部分时段
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) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.submitService();
}
if (result.showStore === 1) {
this.sendChildData.storeGroupIds = result.storeGroupIds || '';
} else if (result.showStore === 2) {
let list = [];
if (result.storeInfo.length) {
result.storeInfo.map(v => {
list.push(v);
});
},
// 提交保存
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定时
}
this.sendChildData.storeIds = list;
}
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(','), // 礼品图片
giftImageFiledCodes: this.imageList.map(v => v.code).filter(v => v).join(','), // 礼品图片编码
// 新增兑换时段-部分时段
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) {
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: '', // 选中的门店信息，多个逗号拼接
virtualStock: this.form.changeType === 1 ? this.form.weChatVirtualStock : this.form.virtualStock, //库存
detailDescription:this.form.detailDescription,//图文详情
cardType :this.form.cardType
}
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 (params.exchangeDateType === 2) {
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;
}
}
showStore: this.sendChildData.storeType, // 显示门店 0所有 1部分分类 2部分门店
giftImageUrls: this.imageList
.map(v => v.url)
.filter(v => v)
.join(','), // 礼品图片
giftImageFiledCodes: this.imageList
.map(v => v.code)
.filter(v => v)
.join(','), // 礼品图片编码
// 判断 兑换时段
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('#') : '';
}
storeIds: '', // 选中的门店信息，多个逗号拼接
virtualStock: this.form.changeType === 1 ? this.form.weChatVirtualStock : this.form.virtualStock, //库存
detailDescription: this.form.detailDescription, //图文详情
cardType: this.form.cardType
};
let breakFlag = false;
for (var i = 0; i < arr.length; i++) {
if (breakFlag) {
break;
}
var p1 = arr[i];
for (var j = i + 1; j < arr.length; j++) {
var p2 = arr[j];
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])) {
breakFlag = true;
break;
}
}
}
if (breakFlag) {
this.$tips({ type: 'warning', message: "兑换时段之间不允许出现时间交叠" });
return;
}
}
// 判断 兑换日期
if (params.exchangeDateType === 2) {
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) {
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('#') : '';
}
// 判断发送时间
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;
}
let breakFlag = false;
for (let i = 0; i < arr.length; i++) {
if (breakFlag) {
break;
}
const p1 = arr[i];
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 (this.sendChildData.storeGroupIds) {
params.storeGroupIds = this.sendChildData.storeGroupIds || '';
} else {
this.$tips({ type: 'warning', message: '门店分类不能为空' });
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;
}
}
// 判断发送时间
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(params)
createIntegralProService(params).then(res => {
if (res.errorCode === 0) {
this.$router.push('/gift');
this.$tips({ type: 'success', message: '操作成功' });
} else {
this.$tips({ type: 'error', message: '操作失败' });
}
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;
// 门店分类
if (this.sendChildData.storeType === 1) {
if (this.sendChildData.storeGroupIds) {
params.storeGroupIds = this.sendChildData.storeGroupIds || '';
} else {
this.$tips({ type: 'warning', message: '门店分类不能为空' });
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;
}
}
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>
<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">
<h3 class="dm-title__label">礼品信息</h3>
<el-form-item prop="proName" label="礼品标题">
......@@ -8,33 +8,20 @@
<el-form-item label="礼品主图" class="is-required">
<div class="member-upload-image">
<p class="gray fz13">规格750*750，大小≤1M</p>
<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>
<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>
</el-form-item>
<el-form-item prop="proCategoryId" label="礼品分类">
<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">
<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-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">
<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-option>
</el-select>
<el-button type="text" @click="createCategory">新建分类</el-button>
</el-form-item>
<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 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>
......@@ -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-form-item>
<el-form-item prop="limitTimes" label="次数限制">
<el-checkbox :disabled="isInfo" v-model="isLimitTimes"> 每个会员限制兑换
</el-checkbox>
<el-checkbox :disabled="isInfo" v-model="isLimitTimes"> 每个会员限制兑换 </el-checkbox>
<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 prop="memberGradeArr" label="适用会员">
......@@ -67,18 +53,18 @@
<el-radio-group v-model="form.exchangeDateType" style="line-height:inherit;">
<el-radio :label="1">全部日期</el-radio>
<el-radio :label="2">固定日期</el-radio>
<el-radio :label="3">每月</el-radio>
<el-radio :label="4">每周</el-radio>
<el-radio :label="3">每月</el-radio>
<el-radio :label="4">每周</el-radio>
</el-radio-group>
<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 class="pt8" v-if="form.exchangeDateType === 3">
<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-select>
</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-option v-for="item in exchangeDateWeekOptions" :key="item" :label="item" :value="item"></el-option>
</el-select>
......@@ -91,14 +77,13 @@
<el-radio :label="2" class="vertical-middle">部分时段</el-radio>
</el-radio-group>
<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-button v-if="i" class="vertical-middle" type="text" @click="delTimeRange(i)">删除</el-button>
</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>
</div>
</el-form-item>
<el-form-item prop="proShowStatus" label="显示状态" class="is-required">
......@@ -112,7 +97,7 @@
<el-radio :label="1">立即发布</el-radio>
<el-radio :label="2">定时发布</el-radio>
</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>
</div>
</el-form-item>
......@@ -124,18 +109,18 @@
</el-radio-group>
<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" class="gray fz13">礼品成本金额以选择兑换券的成本金额为准</span>
<span v-show="form.changeType === 1" class="gray fz13">礼品成本金额以选择兑换券的成本金额为准</span>
</div>
</el-form-item>
</div>
<div class="dm-form__wrap" v-show="!(form.changeType !== 1 || isInfo || isEdit)">
<h3 class="dm-title__label">选择卡券</h3>
<div style="margin-bottom:20px;">
<card-temp ref="cardTemp" pbSize="pb15" :activeId.sync="form.proReferId" @emitActiveObj="getCardActiveObjFun" :showPagination="false" :cardLimitType="3"></card-temp>
<div style="margin-bottom:20px;">
<card-temp ref="cardTemp" pbSize="pb15" :activeId.sync="form.proReferId" @emitActiveObj="getCardActiveObjFun" :showPagination="false" :cardLimitType="3"></card-temp>
</div>
</div>
<div class="btn-wrap_fixed" :class="{'on':asideShow}">
<el-button type="primary" @click="submit('form')" v-if="!isInfo">{{isAdd?'确认新增':'确认编辑'}}</el-button>
<div class="btn-wrap_fixed" :class="{ on: asideShow }">
<el-button type="primary" @click="submit('form')" v-if="!isInfo">{{ isAdd ? '确认新增' : '确认编辑' }}</el-button>
<el-button @click="$router.go(-1)">返 回</el-button>
</div>
</el-form>
......
src/views/mall/gift/list.vue
<template>
<section class="dm-wrap">
<section class="dm-wrap">
<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-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 class="filter--box">
<el-select class="vertical-middle w150 pl10" v-model="listParams.category" placeholder="选择分类" @change="getPageGiftList">
......@@ -17,330 +17,330 @@
<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-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>
<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="热门推荐">
<template slot-scope="scope">
<el-switch
v-model="scope.row.proHot"
:active-value="1"
:inactive-value="0" @change="changeHotFun(scope.row)">
</el-switch>
</template>
</el-table-column>
<el-table-column label="礼品信息" align="left" prop="proName" min-width="260">
<template slot-scope="scope">
<div class="ellipsis-100" >
<img class="vertical-middle table__avatar--gift" :src="scope.row.mainImageUrl || defaultAvatar" width="60" height="60" />
<div class="inline-block vertical-middle">
<p class="table-name--ellipsis">{{scope.row.proName || '--'}}</p>
<div v-if="scope.row.giftCategoryName">
<el-tooltip class="item" effect="dark" :content="scope.row.giftCategoryName" placement="bottom">
<p class="fz13 gray table-name--ellipsis">{{scope.row.giftCategoryName}}</p>
</el-tooltip>
</div>
<p v-else>--</p>
<!-- <p class="fz13 gray table-name--ellipsis">{{scope.row.giftCategoryName || '--'}}</p> -->
<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="热门推荐">
<template slot-scope="scope">
<el-switch v-model="scope.row.proHot" :active-value="1" :inactive-value="0" @change="changeHotFun(scope.row)"> </el-switch>
</template>
</el-table-column>
<el-table-column label="礼品信息" align="left" prop="proName" min-width="260">
<template slot-scope="scope">
<div class="ellipsis-100">
<!-- <img class="vertical-middle table__avatar--gift" :src="scope.row.mainImageUrl || defaultAvatar" width="60" height="60" /> -->
<img class="vertical-middle table__avatar--gift" v-if="scope.row.mainImageUrl" :src="scope.row.mainImageUrl" width="60" height="60" />
<img class="vertical-middle table__avatar--gift" v-else src="../../../../static/img/head_default.png" width="60" height="60" />
<div class="inline-block vertical-middle">
<p class="table-name--ellipsis">{{ scope.row.proName || '--' }}</p>
<div v-if="scope.row.giftCategoryName">
<el-tooltip class="item" effect="dark" :content="scope.row.giftCategoryName" placement="bottom">
<p class="fz13 gray table-name--ellipsis">{{ scope.row.giftCategoryName }}</p>
</el-tooltip>
</div>
<p v-else>--</p>
<!-- <p class="fz13 gray table-name--ellipsis">{{scope.row.giftCategoryName || '--'}}</p> -->
</div>
</div>
</template>
</el-table-column>
<el-table-column label="积分费用" align="left" prop="integralCost">
<template slot-scope="scope">
<updateCount :model="scope.row" theType="integralCost" typeName="积分" @refresh="getPageGiftList"></updateCount>
</template>
</el-table-column>
<el-table-column label="现金费用" align="left" prop="cashCost">
<template slot-scope="scope">
</template>
</el-table-column>
<el-table-column label="积分费用" align="left" prop="integralCost">
<template slot-scope="scope">
<updateCount :model="scope.row" theType="integralCost" typeName="积分" @refresh="getPageGiftList"></updateCount>
</template>
</el-table-column>
<el-table-column label="现金费用" align="left" prop="cashCost">
<template slot-scope="scope">
<updateCount :model="scope.row" :precision="2" theType="cashCost" typeName="元" @refresh="getPageGiftList"></updateCount>
</template>
</el-table-column>
<el-table-column label="库存" align="left" prop="sortCost" sortable="custom">
<template slot-scope="scope">
</template>
</el-table-column>
<el-table-column label="库存" align="left" prop="sortCost" sortable="custom">
<template slot-scope="scope">
<updateCount :model="scope.row" theType="virtualStock" @refresh="getPageGiftList"></updateCount>
</template>
</el-table-column>
<el-table-column label="兑换次数" align="left" prop="sortTimes" sortable="custom">
<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-else @click="$router.push('/gift/exchange/'+scope.row.integralMallProId)" class="blue">{{scope.row.allExchangeNumber}}</span>
</template>
</el-table-column>
<el-table-column label="兑换方式" align="left" prop="changeType">
<template slot-scope="scope" >
<span v-if="scope.row.changeType == 1">微信兑换</span>
<span v-if="scope.row.changeType == 2">快递发货</span>
<span v-if="scope.row.changeType == 3">在线发货</span>
</template>
</el-table-column>
<el-table-column label="兑换状态" align="left" prop="status" min-width="100px">
<template slot-scope="scope" >
<span v-html="renderStatus(scope.row).html"></span>
</template>
</el-table-column>
<el-table-column label="显示状态" align="center" prop="proShowStatus">
<template slot-scope="scope" >
{{renderShowStatus(scope.row)}}
</template>
</el-table-column>
<el-table-column label="操作" align="left" fixed="right" min-width="160">
</template>
</el-table-column>
<el-table-column label="兑换次数" align="left" prop="sortTimes" sortable="custom">
<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-else @click="$router.push('/gift/exchange/' + scope.row.integralMallProId)" class="blue">{{ scope.row.allExchangeNumber }}</span>
</template>
</el-table-column>
<el-table-column label="兑换方式" align="left" prop="changeType">
<template slot-scope="scope">
<span v-if="scope.row.changeType == 1">微信兑换</span>
<span v-if="scope.row.changeType == 2">快递发货</span>
<span v-if="scope.row.changeType == 3">在线发货</span>
</template>
</el-table-column>
<el-table-column label="兑换状态" align="left" prop="status" min-width="100px">
<template slot-scope="scope">
<span v-html="renderStatus(scope.row).html"></span>
</template>
</el-table-column>
<el-table-column label="显示状态" align="center" prop="proShowStatus">
<template slot-scope="scope">
{{ renderShowStatus(scope.row) }}
</template>
</el-table-column>
<el-table-column label="操作" align="left" fixed="right" min-width="160">
<template slot-scope="scope">
<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="是否删除该优惠券?">
<el-button type="text">删除</el-button>
</dm-delete>
</template>
</el-table-column>
</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>
<!-- 推广 -->
<eqCodeDialog :modalData="modalData"></eqCodeDialog>
</section>
</el-table-column>
</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>
<!-- 推广 -->
<eqCodeDialog :modalData="modalData"></eqCodeDialog>
</section>
</template>
<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 {formateDateTimeByType,format} from '@/utils/index.js';
import eqCodeDialog from '../common/eqCode.vue'
import request from '../../../api/request.js'
import { formateDateTimeByType, format } from '@/utils/index.js';
import eqCodeDialog from '../common/eqCode.vue';
import request from '../../../api/request.js';
export default {
name: 'gift-list',
components: {
updateCount,
eqCodeDialog
},
data () {
return {
defaultAvatar:require('../../../assets/img/head_default.png'),
loading:false,
tableList:[],
listParams:{
currentPage:1,
pageSize:20,
category:'',
changeType:-1,
releaseType:-1,
showStatus:-1,
proHot:'-1',
giftName:'',
sortType:'',
sortColumn:'',
},
total:0,
categoryOptions:[],
releaseTypeOptions:[{label:'所有兑换状态',value:-1},{label:'兑换',value:1},{label:'不可兑换',value:0}],
changeTypeOptions:[{label:'所有兑换方式',value:-1},{label:'微信兑换',value:1},{label:'快递发货',value:2},{label:'在线发货',value:3}],
showStatusOptions:[{label:'所有显示状态',value:-1},{label:'显示',value:1},{label:'不显示',value:2}],
modalData:{
show:false,
imgUrl:'',
loading:false
},
name: 'gift-list',
components: {
updateCount,
eqCodeDialog
},
data() {
return {
defaultAvatar: '../../../../static/img/head_default.png',
loading: false,
tableList: [],
listParams: {
currentPage: 1,
pageSize: 20,
category: '',
changeType: -1,
releaseType: -1,
showStatus: -1,
proHot: '-1',
giftName: '',
sortType: '',
sortColumn: ''
},
total: 0,
categoryOptions: [],
releaseTypeOptions: [{ label: '所有兑换状态', value: -1 }, { label: '兑换', value: 1 }, { label: '不可兑换', value: 0 }],
changeTypeOptions: [{ label: '所有兑换方式', value: -1 }, { label: '微信兑换', value: 1 }, { label: '快递发货', value: 2 }, { label: '在线发货', value: 3 }],
showStatusOptions: [{ label: '所有显示状态', value: -1 }, { label: '显示', value: 1 }, { label: '不显示', value: 2 }],
modalData: {
show: false,
imgUrl: '',
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() {
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:''})
}
},
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 = "无库存" ;
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 = '正常';
var _exchange_date_week;
var week;
//判断是否在兑换日期内 - 未在兑换时间
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)) {
dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>';
dhzt_show = '未在兑换时间';
return {
text: dhzt_show,
html: dhzt_show_html
};
}
if(_exchange_date_type==2) {
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 = '未在兑换时间';
return {
text:dhzt_show,
html:dhzt_show_html
};
}
}
if(_exchange_date_type==3) {
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 == 3) {
dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>';
dhzt_show = '未在兑换时间';
const _exchange_date_day = item.exchangeDateDay;
const day = new Date().getDate();
const _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) {
_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) {
dhzt_show_html = '<span class="dm-status--info">已下架</span>';
dhzt_show = "已下架" ;
}
return {
text:dhzt_show,
html:dhzt_show_html
};
},
renderShowStatus(item) {
//商品显示状态 1:上架状态就显示 2:兑换状态下显示
var dhzt_show = this.renderStatus(item).text;
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 = "显示" ;
if (item.exchangeTimeType == 2 && item.exchangeTimeList && (dhzt_show == '无库存' || dhzt_show == '正常')) {
dhzt_show_html = '<span class="dm-status--warning">未在兑换时间</span>';
dhzt_show = '未在兑换时间';
for (let k = 0; k < item.exchangeTimeList.length; k++) {
const _o = item.exchangeTimeList[k];
const start = _o.exchangeTimeBeginNumber;
const end = _o.exchangeTimeEndNumber;
const _now = format(new Date(), 'hhmm');
if (_now >= start && _now <= end) {
dhzt_show_html = '<span class="dm-status--primary">正常</span>';
dhzt_show = '正常';
break;
}
}
console.log('显示状态',proShowStatus)
return proShowStatus;
},
}
// 列表的方法
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:'加载列表失败'});
//定时发布
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 (item.status == 1) {
dhzt_show_html = '<span class="dm-status--info">已下架</span>';
dhzt_show = '已下架';
}
return {
text: dhzt_show,
html: dhzt_show_html
};
},
renderShowStatus(item) {
//商品显示状态 1:上架状态就显示 2:兑换状态下显示
var dhzt_show = this.renderStatus(item).text;
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 = '显示';
}
this.loading = false;
},
// 删除
delData(row) {
deleteProService({proId:row.integralMallProId}).then(res => {
}
return proShowStatus;
},
// 列表的方法
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) {
this.$tips({type: 'success',message: '删除成功!'});
this.$tips({ type: 'success', message: '删除成功!' });
this.getPageGiftList();
} else {
this.$tips({type: 'error',message: '删除失败!'});
this.$tips({ type: 'error', message: '删除失败!' });
}
}).catch(err => {
this.$tips({type: 'error',message: '删除失败!'});
})
},
// 推广
getLink(mallProId){
this.modalData.loading=true
let params={
integralMallProId:mallProId,
type:"gift"
.catch(err => {
this.$tips({ type: 'error', message: '删除失败!' });
});
},
// 推广
getLink(mallProId) {
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
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)
}
})
},
// 热门推荐
changeHotFun(row) {
setHotStatusService({status:Number(row.proHot),integralMallProId:row.integralMallProId}).then(res => {
});
},
// 热门推荐
changeHotFun(row) {
setHotStatusService({ status: Number(row.proHot), integralMallProId: row.integralMallProId })
.then(res => {
if (res.errorCode === 0) {
this.$tips({type: 'success',message: '设置成功!'});
} else if (res.errorCode === 1){
this.$tips({type: 'warning',message: '热门推荐礼品上限为20个,当前已超限制,请先取消其他礼品的推荐再来试试'});
this.$tips({ type: 'success', message: '设置成功!' });
} else if (res.errorCode === 1) {
this.$tips({ type: 'warning', message: '热门推荐礼品上限为20个,当前已超限制,请先取消其他礼品的推荐再来试试' });
} else {
this.$tips({type: 'error',message: '删除失败!'});
this.$tips({ type: 'error', message: '删除失败!' });
}
this.getPageGiftList();
}).catch(err => {
this.getPageGiftList();
this.$tips({type: 'error',message: '删除失败!'});
})
},
//列表 排序
sortList(obj) {
this.listParams.sortColumn = obj.prop;
this.listParams.sortType = obj.order ? (obj.order === 'descending' ? 'desc' : 'asc') : '';
this.getPageGiftList();
}
.catch(err => {
this.getPageGiftList();
this.$tips({ type: 'error', message: '删除失败!' });
});
},
//列表 排序
sortList(obj) {
this.listParams.sortColumn = obj.prop;
this.listParams.sortType = obj.order ? (obj.order === 'descending' ? 'desc' : 'asc') : '';
this.getPageGiftList();
}
}
}
};
</script>
src/views/mall/goods/list.vue
<template>
<section class="dm-wrap">
<!-- <el-input type="textarea" rows="4"></el-input> -->
<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-select class="vertical-middle w150" v-model="listParams.changeType" placeholder="选择发货类型" @change="getPageUndeliverList">
<section class="dm-wrap">
<!-- <el-input type="textarea" rows="4"></el-input> -->
<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-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-select>
<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-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-button class="fr" type="primary" @click="exportExcel">导出列表</el-button>
</div>
<el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading">
<el-table-column label="礼品信息" align="left" prop="giftName" min-width="140">
<template slot-scope="scope">
<div class="ellipsis-100" >
<img class="vertical-middle table__avatar" :src="scope.row.giftMainPic || defaultAvatar" width="60" height="60" />
</el-select>
<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-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-button class="fr" type="primary" @click="exportExcel">导出列表</el-button>
</div>
<el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading">
<el-table-column label="礼品信息" align="left" prop="giftName" min-width="140">
<template slot-scope="scope">
<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" 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">
<p class="table-name--ellipsis">{{scope.row.giftName || '--'}}</p>
<p class="fz13 gray" style="line-height:18px">{{scope.row.giftCategoryName || '--'}}</p>
<p class="table-name--ellipsis">{{ scope.row.giftName || '--' }}</p>
<p class="fz13 gray" style="line-height:18px">{{ scope.row.giftCategoryName || '--' }}</p>
</div>
</div>
</template>
</el-table-column>
</div>
</template>
</el-table-column>
<el-table-column label="兑换时间" align="left" prop="createTime">
<template slot-scope="scope" >
<span>{{formateDateTimeByType(scope.row.createTime,'yyyy-MM-dd-HH-mm-ss')}}</span>
</template>
</el-table-column>
<el-table-column label="流水号" align="left" prop="definedCode"></el-table-column>
<el-table-column label="发货类型" align="left" prop="changeType">
<template slot-scope="scope" >
<span v-if="scope.row.changeType == 2">快递发货</span>
<span v-else-if="scope.row.changeType == 3">在线发货</span>
<span v-else>--</span>
</template>
</el-table-column>
<el-table-column label="会员信息" align="left" prop="changeType" min-width="180">
<template slot-scope="scope" >
<memberInfoCom :row="scope.row"></memberInfoCom>
</template>
</el-table-column>
<el-table-column label="消耗积分" align="left" prop="status">
<template slot-scope="scope" >
<p>{{scope.row.unitCostIntegral}}</p>
<p>{{scope.row.payCost}}</p>
</template>
</el-table-column>
<el-table-column label="微信支付流水号" align="left" prop="proShowStatus">
<template slot-scope="scope" >
<span>{{scope.row.definedCode || '--'}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="left" fixed="right">
<el-table-column label="兑换时间" align="left" prop="createTime">
<template slot-scope="scope">
<span>{{ formateDateTimeByType(scope.row.createTime, 'yyyy-MM-dd-HH-mm-ss') }}</span>
</template>
</el-table-column>
<el-table-column label="流水号" align="left" prop="definedCode"></el-table-column>
<el-table-column label="发货类型" align="left" prop="changeType">
<template slot-scope="scope">
<span v-if="scope.row.changeType == 2">快递发货</span>
<span v-else-if="scope.row.changeType == 3">在线发货</span>
<span v-else>--</span>
</template>
</el-table-column>
<el-table-column label="会员信息" align="left" prop="changeType" min-width="180">
<template slot-scope="scope">
<memberInfoCom :row="scope.row"></memberInfoCom>
</template>
</el-table-column>
<el-table-column label="消耗积分" align="left" prop="status">
<template slot-scope="scope">
<p>{{ scope.row.unitCostIntegral }}</p>
<p>{{ scope.row.payCost }}</p>
</template>
</el-table-column>
<el-table-column label="微信支付流水号" align="left" prop="proShowStatus">
<template slot-scope="scope">
<span>{{ scope.row.definedCode || '--' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="left" fixed="right">
<template slot-scope="scope">
<p>
<el-button type="text" v-if="scope.row.status === 1" @click="sendOrder(scope.row)">发货</el-button>
......@@ -68,250 +71,255 @@
<!-- 0 取消订单 -->
<el-button type="text" v-if="scope.row.status === 1" @click="cancelOrder(scope.row)">取消订单</el-button>
<!-- 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 在线发货 取消 详情 -->
<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 快递发货 取消 详情 -->
<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 快递发货 已发货 查看物流 -->
<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>
</template>
</el-table-column>
</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>
<express :show.sync="expressShow" :id="expressId" :isInfo="isInfo"></express>
<sendGoods :show.sync="sendGoodsShow" :id="expressId" @refresh="refresh"></sendGoods>
<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>
</section>
</el-table-column>
</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>
<express :show.sync="expressShow" :id="expressId" :isInfo="isInfo"></express>
<sendGoods :show.sync="sendGoodsShow" :id="expressId" @refresh="refresh"></sendGoods>
<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>
</section>
</template>
<script>
import { getPageUndeliverList,orderOptService,exportOnlineListExcel } from '@/service/api/mallApi.js';
import {formateDateTimeByType} from '@/utils/index.js';
import { getPageUndeliverList, orderOptService } from '@/service/api/mallApi.js';
import { formateDateTimeByType } from '@/utils/index.js';
import express from '../common/express';
import sendGoods from './send-goods';
import orderInfo from './order-info';
import memberInfoCom from '../common/member-info';
export default {
name: 'goods-list',
components: {
express,
sendGoods,
orderInfo,
memberInfoCom
name: 'goods-list',
components: {
express,
sendGoods,
orderInfo,
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 () {
return {
formateDateTimeByType,
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:{}, // 传递的参数
}
search() {
this.listParams.currentPage = 1;
this.getPageUndeliverList();
},
created() {
this.$store.commit('mutations_breadcrumb',[{name:'积分商城'},{name:'待发货',path:''}]);
handleSizeChange(val) {
this.listParams.pageSize = val;
this.getPageUndeliverList();
},
methods: {
// 列表的方法
refresh() {
$bus.$emit('refresh-not-send-count');
this.getPageUndeliverList();
},
search() {
this.listParams.currentPage = 1;
this.getPageUndeliverList();
},
handleSizeChange(val) {
this.listParams.pageSize = val;
this.getPageUndeliverList();
},
handleCurrentChange(val) {
this.listParams.currentPage = val;
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;
},
handleCurrentChange(val) {
this.listParams.currentPage = val;
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) {
deleteProService({proId:row.integralMallProId}).then(res => {
this.$tips({type: 'success',message: '删除成功!'});
this.getPageUndeliverList();
}).catch(err => {
this.$tips({type: 'error',message: '删除失败!'});
})
},
// 取消订单
cancelOrder(row) {
this.$prompt(`
// 删除
// delData(row) {
// deleteProService({ proId: row.integralMallProId })
// .then(res => {
// this.$tips({ type: 'success', message: '删除成功!' });
// this.getPageUndeliverList();
// })
// .catch(err => {
// this.$tips({ type: 'error', message: '删除失败!' });
// });
// },
// 取消订单
cancelOrder(row) {
this.$prompt(
`
<p>确认取消订单吗？</p><p>积分将会实时返回给会员。相应礼品的库存会归还</p>
`, '取消订单', {
`,
'取消订单',
{
dangerouslyUseHTMLString: true,
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
inputType:'textarea',
inputPlaceholder:'请输入取消原因',
inputErrorMessage:'原因不能为空',
inputValidator:function(value) {
inputType: 'textarea',
inputPlaceholder: '请输入取消原因',
inputErrorMessage: '原因不能为空',
inputValidator: function(value) {
if (!value) {
return false;
} else if (value.replace(/[^\x00-\xff]/gi, "--").length > 100) {
return '中文限制50字，数字字母限制100字符'
} else if (value.replace(/[^\x00-\xff]/gi, '--').length > 100) {
return '中文限制50字，数字字母限制100字符';
} else {
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) {
this.$tips({type:'success',message:'取消订单成功'});
this.$tips({ type: 'success', message: '取消订单成功' });
this.getPageUndeliverList();
} else {
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;
this.$tips({ type: 'error', message: '取消订单失败' });
}
});
})
.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) {
this.$tips({type:'success',message:'发货成功'});
this.$tips({ type: 'success', message: '发货成功' });
this.getPageUndeliverList();
} else {
this.$tips({type:'error',message:'发货失败'});
this.$tips({ type: 'error', message: '发货失败' });
}
})
}).catch(err => {
console.log(err);
});
},
// 快递发货
sendOrderOutline(row) {
this.sendGoodsShow = true;
this.expressId = row.integralMallProExchangeId;
},
});
})
.catch(err => {});
},
// 快递发货
sendOrderOutline(row) {
this.sendGoodsShow = true;
this.expressId = row.integralMallProExchangeId;
},
// 查看快递
queryExpress(row,flag) {
this.expressShow = true;
this.isInfo = flag;
this.expressId = row.integralMallProExchangeId;
},
// 查看订单详情和取消详情
/**
* tag
* 1 在线发货 已发货 详情
* 2 在线发货 取消 详情
* 3 快递发货 取消 详情
*/
queryOrderInfo(row,tag) {
this.orderInfoShow = true;
this.orderInfoStatus = tag;
this.expressId = row.integralMallProExchangeId;
},
// 导出列表
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 = {
orderStatus:this.listParams.orderStatus,
changeType:this.listParams.changeType,
searchParams:this.listParams.searchParams,
beginTime:this.listParams.beginTime,
endTime:this.listParams.endTime,
requestProject:'integral-mall'
}
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`;
},
statusFilter(val) {
let result = '--';
this.releaseTypeOptions.map(v => {
if (v.value === val) {
result = v.label;
}
});
return result;
},
// 查看快递
queryExpress(row, flag) {
this.expressShow = true;
this.isInfo = flag;
this.expressId = row.integralMallProExchangeId;
},
// 查看订单详情和取消详情
/**
* tag
* 1 在线发货 已发货 详情
* 2 在线发货 取消 详情
* 3 快递发货 取消 详情
*/
queryOrderInfo(row, tag) {
this.orderInfoShow = true;
this.orderInfoStatus = tag;
this.expressId = row.integralMallProExchangeId;
},
// 导出列表
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 = {
orderStatus: this.listParams.orderStatus,
changeType: this.listParams.changeType,
searchParams: this.listParams.searchParams,
beginTime: this.listParams.beginTime,
endTime: this.listParams.endTime,
requestProject: 'integral-mall'
};
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`;
},
}
statusFilter(val) {
let result = '--';
this.releaseTypeOptions.map(v => {
if (v.value === val) {
result = v.label;
}
});
return result;
}
}
};
</script>
src/views/mall/goods/order-info.vue
......@@ -2,19 +2,25 @@
<el-dialog class="express dialog__body__nopadding" title="查看详情" :visible.sync="show" width="40%" :before-close="close">
<div class="express--info">
<div v-if="infoStatus === 3">
<p>收件人：<span style="color:#606266">{{info.consignee || '--'}}</span></p>
<p>联系方式：<span style="color:#606266">{{info.consigneePhone || '--'}}</span></p>
<p>收货地址：<span style="color:#606266">{{info.receivingAddress || '--'}}</span></p>
<p>
收件人：<span style="color:#606266">{{ info.consignee || '--' }}</span>
</p>
<p>
联系方式：<span style="color:#606266">{{ info.consigneePhone || '--' }}</span>
</p>
<p>
收货地址：<span style="color:#606266">{{ info.receivingAddress || '--' }}</span>
</p>
</div>
<div v-if="infoStatus === 1">
<p>发货时间：{{formateDateTimeByType(info.deliveryTime,'yyyy-MM-dd-HH-mm') || '--'}}</p>
<p>操作人员：{{info.clerkName || '--'}}</p>
<p>发货内容：{{info.deliveryContent || '--'}}</p>
<p>发货时间：{{ formateDateTimeByType(info.deliveryTime, 'yyyy-MM-dd-HH-mm') || '--' }}</p>
<p>操作人员：{{ info.clerkName || '--' }}</p>
<p>发货内容：{{ info.deliveryContent || '--' }}</p>
</div>
<div v-if="infoStatus !== 1">
<p>取消时间：{{formateDateTimeByType(info.cancelTime,'yyyy-MM-dd-HH-mm') || '--'}}</p>
<p>操作人员：{{info.clerkName || '--'}}</p>
<p>取消原因：{{info.cancelReason || '--'}}</p>
<div v-if="infoStatus !== 1">
<p>取消时间：{{ formateDateTimeByType(info.cancelTime, 'yyyy-MM-dd-HH-mm') || '--' }}</p>
<p>操作人员：{{ info.clerkName || '--' }}</p>
<p>取消原因：{{ info.cancelReason || '--' }}</p>
</div>
</div>
<span slot="footer" class="dialog-footer">
......@@ -23,57 +29,56 @@
</el-dialog>
</template>
<script>
import { getLogisticsInfo } from '@/service/api/mallApi.js';
import { formateDateTimeByType } from '@/utils/index.js';
import {getLogisticsInfo,getLogisticsList,orderOptService} from '@/service/api/mallApi.js';
import {formateDateTimeByType} from '@/utils/index.js';
export default {
props:{
show:{
type:Boolean,
default:false
},
id:{
type:String,
default:''
},
infoStatus:{
type:Number,
default:false
}
export default {
props: {
show: {
type: Boolean,
default: false
},
watch:{
show(val) {
if (val) {
this.getLogisticsInfo();
}
}
id: {
type: String,
default: ''
},
data() {
return {
formateDateTimeByType,
loading:false,
info:{}
infoStatus: {
type: Number,
default: 0
}
},
watch: {
show(val) {
if (val) {
this.getLogisticsInfo();
}
}
},
data() {
return {
formateDateTimeByType,
loading: false,
info: {}
};
},
methods: {
close() {
this.$emit('update:show', false);
},
methods: {
close() {
this.$emit('update:show',false);
},
async getLogisticsInfo() {
this.loading = true;
let res = await getLogisticsInfo({integralMallProExchangeId:this.id});
if (res.errorCode === 0) {
this.info = res.result.changeLog || {};
}
this.loading = false;
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>
<style lang="scss" scoped>
.express{
.express {
&--info {
p {
line-height: 30px;
......
src/views/mall/goods/send-goods.vue
<template>
<el-dialog class="express dialog__body__nopadding" title="发货" :visible.sync="show" width="40%" :before-close="close">
<div class="express--info">
<p>收件人：<span style="color:#606266">{{info.consignee || '--'}}</span></p>
<p>联系方式：<span style="color:#606266">{{info.consigneePhone || '--'}}</span></p>
<p>收货地址：<span style="color:#606266">{{info.receivingAddress || '--'}}</span></p>
<p class="pb10">快递公司：
<el-select
class="vertical-middle w300"
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>
<p>
收件人：<span style="color:#606266">{{ info.consignee || '--' }}</span>
</p>
<p>
联系方式：<span style="color:#606266">{{ info.consigneePhone || '--' }}</span>
</p>
<p>
收货地址：<span style="color:#606266">{{ info.receivingAddress || '--' }}</span>
</p>
<div class="pb10">
快递公司：
<el-select class="vertical-middle w300" 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-select>
<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>
</div>
</p>
<p>运单号码：<el-input class="vertical-middle w300" v-model="params.courierNumber" placeholder="请输入快递单号" @input="(value)=>courierNumberLimit(value)"></el-input></p>
</div>
<p>运单号码：<el-input class="vertical-middle w300" v-model="params.courierNumber" placeholder="请输入快递单号" @input="value => courierNumberLimit(value)"></el-input></p>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="close">关 闭</el-button>
......@@ -31,180 +29,171 @@
</el-dialog>
</template>
<script>
import {getLogisticsInfo,getLogisticsList,orderOptService} from '@/service/api/mallApi.js';
export default {
props:{
show:{
type:Boolean,
default:false
},
id:{
type:String,
default:''
}
},
watch:{
show(val) {
if (val) {
this.getLogisticsInfo();
}
}
import { getLogisticsInfo, getLogisticsList, orderOptService } from '@/service/api/mallApi.js';
export default {
props: {
show: {
type: Boolean,
default: false
},
data() {
return {
loading:false,
info:{},
logisticsOptions:[],
params:{
logisticsCompanyId:'',
logisticsCompanyCode:'',
courierNumber:'',
otherLogisticsCompanyName:'',
},
otherLogistics:false
id: {
type: String,
default: ''
}
},
watch: {
show(val) {
if (val) {
this.getLogisticsInfo();
}
}
},
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() {
this.$emit('update:show',false);
this.otherLogistics=false
this.params.otherLogisticsCompanyName=''//快递公司
this.params.logisticsCompanyId=''//运单id
this.params.courierNumber=''//运单bain好
},
//限制物流公司的名称
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=''
}
//快递公司下拉
changeLogistics(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=''
this.otherLogistics = false;
this.params.otherLogisticsCompanyName = '';
}
},
submit() {
if (!this.params.logisticsCompanyId) {
this.$tips({type:'warning',message:'请选择快递'});
return;
} else {
this.otherLogistics = false;
this.params.otherLogisticsCompanyName = '';
}
},
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;
}
this.logisticsOptions.map(v => {
if (v.logisticsCompanyId === this.params.logisticsCompanyId) {
this.params.logisticsCompanyCode = v.logisticsCompanyCode;
}
})
if ( this.params.logisticsCompanyCode ==='QITA' ) {
if ( this.params.otherLogisticsCompanyName==='' ) {
this.$tips({type:'warning',message:'请填写快递公司'});
return;
}
}
let logisticsCompanyName
if ( this.params.logisticsCompanyCode ==='QITA'){
logisticsCompanyName=this.params.otherLogisticsCompanyName
}else{
logisticsCompanyName = this.logisticsOptions.find( item => {
return item.logisticsCompanyId === this.params.logisticsCompanyId
}).logisticsCompanyName
}
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});
}
let logisticsCompanyName;
if (this.params.logisticsCompanyCode === 'QITA') {
logisticsCompanyName = this.params.otherLogisticsCompanyName;
} else {
logisticsCompanyName = this.logisticsOptions.find(item => {
return item.logisticsCompanyId === this.params.logisticsCompanyId;
}).logisticsCompanyName;
}
let params = {
optType: 1,
integralMallProExchangeId: this.id,
logisticsCompanyId: this.params.logisticsCompanyId,
logisticsCompanyCode: this.params.logisticsCompanyCode,
courierNumber: this.params.courierNumber,
logisticsCompanyName: logisticsCompanyName
};
orderOptService(params).then(res => {
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>
<style lang="scss" scoped>
.express{
.express {
&--info {
padding-bottom:10px;
padding-bottom: 10px;
p {
line-height: 30px;
word-break: break-all;
......
src/views/mall/index.vue
<template>
<div>
<router-view></router-view>
</div>
<div>
<router-view></router-view>
</div>
</template>
<script>
import { getNotSendCount } from '@/service/api/mallApi.js';
export default {
name: "mall",
name: 'mall',
data() {
const vm = this;
return {
total:0,
total: 0
};
},
created() {
this.$store.commit("mutations_breadcrumb", [{ name: "积分商城" }]);
this.$store.commit("aside_handler", true);
this.$store.commit('mutations_breadcrumb', [{ name: '积分商城' }]);
this.$store.commit('aside_handler', true);
this.getNotSendCount();
$bus.$on('refresh-not-send-count',() => {
/* eslint-disable */
$bus.$on('refresh-not-send-count', () => {
this.getNotSendCount();
});
},
methods:{
async getNotSendCount(){
methods: {
async getNotSendCount() {
let res = await getNotSendCount();
if (res.errorCode === 0) {
this.total = res.result;
......
static/css/common.css
......@@ -301,7 +301,7 @@ a:hover{
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
margin: 0;
}
input[type="number"] {
-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