提交
This commit is contained in:
熊丽君
@ -2,4 +2,4 @@
|
||||
ENV = 'production'
|
||||
|
||||
# 管理系统/生产环境
|
||||
VUE_APP_BASE_API = 'http://140.143.229.114:1818'
|
||||
VUE_APP_BASE_API = 'http://golden.shangqie.cn/api'
|
||||
|
||||
@ -4,4 +4,4 @@ NODE_ENV = production
|
||||
ENV = 'staging'
|
||||
|
||||
# 管理系统/测试环境
|
||||
VUE_APP_BASE_API = 'http://140.143.229.114:1818'
|
||||
VUE_APP_BASE_API = 'http://golden.shangqie.cn/api'
|
||||
|
||||
13
package.json
13
package.json
@ -40,18 +40,15 @@
|
||||
"url": "https://gitee.com/y_project/RuoYi-Vue.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"element-ui": "^2.13.0",
|
||||
"vue": "^2.6.10",
|
||||
"vuedraggable": "^2.23.2",
|
||||
"core-js": "^3.4.4",
|
||||
"html2canvas": "^1.0.0-rc.5",
|
||||
"uuid": "^3.3.3",
|
||||
"@riophae/vue-treeselect": "0.4.0",
|
||||
"axios": "0.18.1",
|
||||
"clipboard": "2.0.4",
|
||||
"core-js": "3.6.5",
|
||||
"echarts": "4.2.1",
|
||||
"element-ui": "^2.13.0",
|
||||
"file-saver": "2.0.1",
|
||||
"fuse.js": "3.4.4",
|
||||
"html2canvas": "^1.0.0-rc.5",
|
||||
"js-beautify": "1.10.2",
|
||||
"js-cookie": "2.2.0",
|
||||
"jsencrypt": "3.0.0-rc.1",
|
||||
@ -61,11 +58,15 @@
|
||||
"quill": "1.3.7",
|
||||
"screenfull": "4.2.0",
|
||||
"sortablejs": "1.8.4",
|
||||
"uuid": "^3.3.3",
|
||||
"vue": "^2.6.10",
|
||||
"vue-canvas-poster": "^1.2.1",
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-cropper": "0.4.9",
|
||||
"vue-qr": "^2.5.0",
|
||||
"vue-router": "3.0.2",
|
||||
"vue-splitpane": "1.0.4",
|
||||
"vuedraggable": "^2.23.2",
|
||||
"vuex": "3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
29
src/App.vue
29
src/App.vue
@ -5,7 +5,30 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App'
|
||||
}
|
||||
export default {
|
||||
name: 'App'
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.btn-adds {
|
||||
background-color: #41b584;
|
||||
color: #fff;
|
||||
border-color: #41b584;
|
||||
&:hover {
|
||||
background: #67c49d;
|
||||
border-color: #67c49d;
|
||||
}
|
||||
}
|
||||
.btn-del {
|
||||
color: #fff;
|
||||
background-color: #ff4d4f;
|
||||
border-color: #ff4d4f;
|
||||
&:hover {
|
||||
background: #ff7172;
|
||||
border-color: #ff7172;
|
||||
}
|
||||
}
|
||||
.el-menu-item {
|
||||
color: #515a6e;
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 203 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 268 KiB After Width: | Height: | Size: 46 KiB |
BIN
src/assets/image/login_form.png
Normal file
BIN
src/assets/image/login_form.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 77 KiB |
@ -4,7 +4,7 @@
|
||||
**/
|
||||
|
||||
/* theme color */
|
||||
$--color-primary: #1890ff;
|
||||
$--color-primary: #41b584;
|
||||
$--color-success: #13ce66;
|
||||
$--color-warning: #ffba00;
|
||||
$--color-danger: #ff4949;
|
||||
@ -17,12 +17,12 @@ $--button-font-weight: 400;
|
||||
$--border-color-light: #dfe4ed;
|
||||
$--border-color-lighter: #e6ebf5;
|
||||
|
||||
$--table-border:1px solid#dfe6ec;
|
||||
$--table-border: 1px solid#dfe6ec;
|
||||
|
||||
/* icon font path, required */
|
||||
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||
|
||||
@import "~element-ui/packages/theme-chalk/src/index";
|
||||
@import '~element-ui/packages/theme-chalk/src/index';
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
|
||||
@ -10,7 +10,8 @@ body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
|
||||
Microsoft YaHei, Arial, sans-serif;
|
||||
}
|
||||
|
||||
label {
|
||||
@ -90,7 +91,7 @@ div:focus {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
content: " ";
|
||||
content: ' ';
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
@ -104,7 +105,8 @@ aside {
|
||||
display: block;
|
||||
line-height: 32px;
|
||||
font-size: 16px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
color: #2c3e50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@ -122,6 +124,7 @@ aside {
|
||||
//main-container全局样式
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
background-color: #f6f8f9 !important;
|
||||
}
|
||||
|
||||
.components-container {
|
||||
@ -134,7 +137,7 @@ aside {
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sub-navbar {
|
||||
@ -145,7 +148,13 @@ aside {
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
transition: 600ms ease position;
|
||||
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(32, 182, 249, 1) 0%,
|
||||
rgba(32, 182, 249, 1) 0%,
|
||||
rgba(33, 120, 241, 1) 100%,
|
||||
rgba(33, 120, 241, 1) 100%
|
||||
);
|
||||
|
||||
.subtitle {
|
||||
font-size: 20px;
|
||||
@ -199,6 +208,6 @@ aside {
|
||||
margin-top: 20px;
|
||||
}
|
||||
// 操作栏样式
|
||||
.operate-container{
|
||||
.operate-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
#app {
|
||||
|
||||
.main-container {
|
||||
min-height: 100%;
|
||||
transition: margin-left .28s;
|
||||
transition: margin-left 0.28s;
|
||||
margin-left: $sideBarWidth;
|
||||
position: relative;
|
||||
}
|
||||
@ -22,7 +21,8 @@
|
||||
|
||||
// reset element-ui css
|
||||
.horizontal-collapse-transition {
|
||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out,
|
||||
0s padding-right ease-in-out;
|
||||
}
|
||||
|
||||
.scrollbar-wrapper {
|
||||
@ -63,7 +63,8 @@
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.el-menu-item, .el-submenu__title {
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
white-space: nowrap !important;
|
||||
@ -77,11 +78,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.is-active>.el-submenu__title {
|
||||
.is-active > .el-submenu__title {
|
||||
color: $subMenuActiveText !important;
|
||||
}
|
||||
|
||||
& .nest-menu .el-submenu>.el-submenu__title,
|
||||
& .nest-menu .el-submenu > .el-submenu__title,
|
||||
& .el-submenu .el-menu-item {
|
||||
min-width: $sideBarWidth !important;
|
||||
background-color: $subMenuBg !important;
|
||||
@ -117,7 +118,7 @@
|
||||
.el-submenu {
|
||||
overflow: hidden;
|
||||
|
||||
&>.el-submenu__title {
|
||||
& > .el-submenu__title {
|
||||
padding: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
@ -132,8 +133,8 @@
|
||||
|
||||
.el-menu--collapse {
|
||||
.el-submenu {
|
||||
&>.el-submenu__title {
|
||||
&>span {
|
||||
& > .el-submenu__title {
|
||||
& > span {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
@ -156,7 +157,7 @@
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
transition: transform .28s;
|
||||
transition: transform 0.28s;
|
||||
width: $sideBarWidth !important;
|
||||
}
|
||||
|
||||
@ -170,7 +171,6 @@
|
||||
}
|
||||
|
||||
.withoutAnimation {
|
||||
|
||||
.main-container,
|
||||
.sidebar-container {
|
||||
transition: none;
|
||||
@ -180,13 +180,13 @@
|
||||
|
||||
// when menu collapsed
|
||||
.el-menu--vertical {
|
||||
&>.el-menu {
|
||||
& > .el-menu {
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.nest-menu .el-submenu>.el-submenu__title,
|
||||
.nest-menu .el-submenu > .el-submenu__title,
|
||||
.el-menu-item {
|
||||
&:hover {
|
||||
// you can use $subMenuHover
|
||||
@ -195,7 +195,7 @@
|
||||
}
|
||||
|
||||
// the scroll bar appears when the subMenu is too long
|
||||
>.el-menu--popup {
|
||||
> .el-menu--popup {
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
// base color
|
||||
$blue:#324157;
|
||||
$light-blue:#3A71A8;
|
||||
$red:#C03639;
|
||||
$pink: #E65D6E;
|
||||
$green: #30B08F;
|
||||
$tiffany: #4AB7BD;
|
||||
$yellow:#FEC171;
|
||||
$panGreen: #30B08F;
|
||||
$blue: #324157;
|
||||
$light-blue: #3a71a8;
|
||||
$red: #c03639;
|
||||
$pink: #e65d6e;
|
||||
$green: #30b08f;
|
||||
$tiffany: #4ab7bd;
|
||||
$yellow: #fec171;
|
||||
$panGreen: #30b08f;
|
||||
|
||||
// sidebar
|
||||
$menuText:#bfcbd9;
|
||||
$menuActiveText:#409EFF;
|
||||
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
|
||||
$menuText: #515a6e;
|
||||
$menuActiveText: #409eff;
|
||||
$subMenuActiveText: #41b584; // https://github.com/ElemeFE/element/issues/12951
|
||||
|
||||
$menuBg:#304156;
|
||||
$menuHover:#263445;
|
||||
$menuBg: #fff;
|
||||
$menuHover: #ecf8f3;
|
||||
|
||||
$subMenuBg:#1f2d3d;
|
||||
$subMenuHover:#001528;
|
||||
$subMenuBg: #fff;
|
||||
$subMenuHover: #ecf8f3;
|
||||
|
||||
$sideBarWidth: 200px;
|
||||
$sideBarWidth: 266px;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
|
||||
@ -7,8 +7,11 @@
|
||||
clearable
|
||||
v-model="search"
|
||||
placeholader="搜索内容"
|
||||
class="width-200" size="mini" suffix-icon="el-icon-search">
|
||||
<el-button slot="append">搜索</el-button>
|
||||
class="width-200"
|
||||
size="mini"
|
||||
suffix-icon="el-icon-search"
|
||||
>
|
||||
<el-button slot="append">搜索</el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
@ -19,11 +22,12 @@
|
||||
class="list-item cursor-p"
|
||||
:key="item.uid"
|
||||
v-for="(item, i) in imageList"
|
||||
:style="{background: item.bg}">
|
||||
:style="{ background: item.bg }"
|
||||
>
|
||||
<el-checkbox class="check-ct" :value="item.active"></el-checkbox>
|
||||
<img :src="item.path" class="img"/>
|
||||
<img :src="item.path" class="img" />
|
||||
<div class="text single-row-ellipsis">
|
||||
{{item.name}}
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -35,7 +39,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import uuid from 'uuid'
|
||||
import uuid from 'uuid';
|
||||
export default {
|
||||
props: {
|
||||
// 是否单选
|
||||
@ -47,39 +51,39 @@ export default {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
search: '',
|
||||
imageList: [
|
||||
{
|
||||
uid: uuid(),
|
||||
name: '钢铁侠',
|
||||
path: require('../assets/image/1.jpg')
|
||||
path: require('../assets/image/profile.jpg')
|
||||
},
|
||||
{
|
||||
uid: uuid(),
|
||||
name: '蜘蛛侠',
|
||||
path: require('../assets/image/2.jpg')
|
||||
path: require('../assets/image/profile.jpg')
|
||||
},
|
||||
{
|
||||
uid: uuid(),
|
||||
name: '美国队长',
|
||||
path: require('../assets/image/3.jpg')
|
||||
path: require('../assets/image/profile.jpg')
|
||||
},
|
||||
{
|
||||
uid: uuid(),
|
||||
name: '奇异博士',
|
||||
path: require('../assets/image/4.jpg')
|
||||
path: require('../assets/image/profile.jpg')
|
||||
},
|
||||
{
|
||||
uid: uuid(),
|
||||
name: '蚁人',
|
||||
path: require('../assets/image/5.jpg')
|
||||
path: require('../assets/image/profile.jpg')
|
||||
},
|
||||
{
|
||||
uid: uuid(),
|
||||
name: '钢铁侠2',
|
||||
path: require('../assets/image/6.jpg')
|
||||
path: require('../assets/image/profile.jpg')
|
||||
}
|
||||
],
|
||||
activeIndex: -1,
|
||||
@ -90,63 +94,67 @@ export default {
|
||||
tagSelect: ''
|
||||
// systemMaterialListCount: 0,
|
||||
// materialListCount: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClickImageItem (i, item) {
|
||||
this.isSingle ? this.singleModeClick(i, item) : this.multipleModeClick(i, item)
|
||||
handleClickImageItem(i, item) {
|
||||
this.isSingle
|
||||
? this.singleModeClick(i, item)
|
||||
: this.multipleModeClick(i, item);
|
||||
},
|
||||
singleModeClick (i, item) {
|
||||
singleModeClick(i, item) {
|
||||
if (i === this.activeIndex) {
|
||||
this.$set(this.imageList, i, { ...item, active: false })
|
||||
this.activeIndex = -1
|
||||
this.$set(this.imageList, i, { ...item, active: false });
|
||||
this.activeIndex = -1;
|
||||
} else {
|
||||
let oldItem = this.imageList[this.activeIndex]
|
||||
this.$set(this.imageList, this.activeIndex, { ...oldItem, active: false })
|
||||
this.activeIndex = i
|
||||
this.$set(this.imageList, this.activeIndex, { ...item, active: true })
|
||||
let oldItem = this.imageList[this.activeIndex];
|
||||
this.$set(this.imageList, this.activeIndex, {
|
||||
...oldItem,
|
||||
active: false
|
||||
});
|
||||
this.activeIndex = i;
|
||||
this.$set(this.imageList, this.activeIndex, { ...item, active: true });
|
||||
}
|
||||
},
|
||||
multipleModeClick (i, item) {
|
||||
this.$set(this.imageList, i, { ...item, active: !item.active })
|
||||
multipleModeClick(i, item) {
|
||||
this.$set(this.imageList, i, { ...item, active: !item.active });
|
||||
},
|
||||
reset () {
|
||||
reset() {
|
||||
this.imageList.forEach(v => {
|
||||
v.active = false
|
||||
})
|
||||
v.active = false;
|
||||
});
|
||||
},
|
||||
async submit () {
|
||||
let imageSelection = this.imageList.filter(v => v.active)
|
||||
async submit() {
|
||||
let imageSelection = this.imageList.filter(v => v.active);
|
||||
if (imageSelection.length === 0) {
|
||||
this.$message.error('请选择图片!')
|
||||
return false
|
||||
this.$message.error('请选择图片!');
|
||||
return false;
|
||||
}
|
||||
this.$emit('success', this.isSingle ? imageSelection[0] : imageSelection)
|
||||
this.reset()
|
||||
this.$emit('success', this.isSingle ? imageSelection[0] : imageSelection);
|
||||
this.reset();
|
||||
},
|
||||
cancel () {
|
||||
this.$emit('cancel')
|
||||
this.reset()
|
||||
cancel() {
|
||||
this.$emit('cancel');
|
||||
this.reset();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (val) {
|
||||
value(val) {
|
||||
if (val) {
|
||||
// this.findBackground()
|
||||
}
|
||||
}
|
||||
},
|
||||
async created () {
|
||||
}
|
||||
}
|
||||
async created() {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.image-selection-comp{
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.image-selection-comp {
|
||||
position: relative;
|
||||
.header-ct{
|
||||
.header-ct {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -155,30 +163,30 @@ export default {
|
||||
font-weight: 400;
|
||||
color: rgba(44, 62, 80, 1);
|
||||
}
|
||||
.right{
|
||||
.right {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.main{
|
||||
.main {
|
||||
display: flex;
|
||||
.left{
|
||||
.left {
|
||||
box-sizing: border-box;
|
||||
width: 200px;
|
||||
height: 400px;
|
||||
border-right: 1px solid #E4E8EB;
|
||||
.type-child-item{
|
||||
border-right: 1px solid #e4e8eb;
|
||||
.type-child-item {
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
&.active{
|
||||
background: #409EFF;
|
||||
&.active {
|
||||
background: #409eff;
|
||||
color: white;
|
||||
&:before{
|
||||
&:before {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
&:before{
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -193,7 +201,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
.right {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
flex-wrap: wrap;
|
||||
@ -202,31 +210,31 @@ export default {
|
||||
grid-row-gap: 8px;
|
||||
grid-column-gap: 8px;
|
||||
margin-left: 16px;
|
||||
.list-item{
|
||||
.list-item {
|
||||
position: relative;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
border: 1px solid #e1e1e1;
|
||||
overflow: hidden;
|
||||
.check-ct{
|
||||
.check-ct {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
}
|
||||
.img{
|
||||
.img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100.8px;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
.text {
|
||||
height: 43px;
|
||||
line-height: 43px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-ct{
|
||||
.bottom-ct {
|
||||
/*position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;*/
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<svg
|
||||
:class="{active: active}"
|
||||
class="icon el-icon cursor-p" aria-hidden="true">
|
||||
:class="{ active: active }"
|
||||
class="icon el-icon cursor-p"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use :xlink:href="'#icon-' + icon"></use>
|
||||
</svg>
|
||||
</template>
|
||||
<script>
|
||||
import './iconfont.js'
|
||||
import './iconfont.js';
|
||||
export default {
|
||||
props: {
|
||||
icon: {
|
||||
@ -18,18 +20,18 @@ export default {
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.icon{
|
||||
.icon {
|
||||
font-size: 18px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: rgba(0,0,0,0.5);
|
||||
fill: rgba(255, 255, 255, 1);
|
||||
overflow: hidden;
|
||||
&.active{
|
||||
fill: rgba(0,0,0,1);
|
||||
&.active {
|
||||
fill: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,15 +24,12 @@ export default {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log(this.value);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.img-widget-ct {
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@ -9,7 +9,12 @@
|
||||
@click="getHistory(-1)"
|
||||
type="text"
|
||||
>
|
||||
<Icon :active="canClickPrev" class="m-r-16" icon="Undo"></Icon>
|
||||
<Icon
|
||||
style="color:#fff"
|
||||
:active="canClickPrev"
|
||||
class="m-r-16"
|
||||
icon="Undo"
|
||||
></Icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="前进" placement="top-start">
|
||||
@ -26,7 +31,8 @@
|
||||
轻点元素开始编辑
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button @click="submitImg">提交</el-button>
|
||||
<el-button size="small" @click="resetItme">重置</el-button>
|
||||
<el-button size="small" @click="submitImg">保存并返回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<draggable
|
||||
@ -42,7 +48,19 @@
|
||||
class="poster-content m-b-16"
|
||||
tag="div"
|
||||
>
|
||||
<img class="bg-puppet" :src="value && value.background.img" />
|
||||
<div>
|
||||
<vue-canvas-poster
|
||||
v-show="true"
|
||||
:painting="painting"
|
||||
@success="success"
|
||||
@fail="fail"
|
||||
></vue-canvas-poster>
|
||||
</div>
|
||||
<img
|
||||
v-show="value.background.img"
|
||||
class="bg-puppet"
|
||||
:src="value && value.background.img"
|
||||
/>
|
||||
<widget
|
||||
:class="{ disabled: !item.active }"
|
||||
@click.native="handleActiveWidget(item)"
|
||||
@ -256,6 +274,7 @@ import { setDataRangeMap, defaultDataMap } from './widgetInitDataMap';
|
||||
import Icon from './icon/index';
|
||||
import { qrUpdate } from '@/api/index';
|
||||
import VueQr from 'vue-qr';
|
||||
import { VueCanvasPoster } from 'vue-canvas-poster';
|
||||
|
||||
let zIndex = 0;
|
||||
|
||||
@ -278,8 +297,8 @@ export default {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: 375,
|
||||
height: 620
|
||||
width: 620,
|
||||
height: 375
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -291,10 +310,30 @@ export default {
|
||||
blankDialog,
|
||||
imageSelection,
|
||||
Icon,
|
||||
VueQr
|
||||
VueQr,
|
||||
VueCanvasPoster
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
painting: {
|
||||
width: '120px',
|
||||
height: '120px',
|
||||
background: '#eee',
|
||||
views: [
|
||||
{
|
||||
type: 'qrcode',
|
||||
content: 'http://golden.shangqie.cn/#/?id=' + this.id,
|
||||
css: {
|
||||
top: '0',
|
||||
left: '0',
|
||||
color: '#000',
|
||||
width: '120px',
|
||||
height: '120px'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
imgArr: '',
|
||||
editorUid: 'uid' + uuid(),
|
||||
dZoom: 0.52,
|
||||
isDragging: false,
|
||||
@ -311,12 +350,36 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
resetItme() {
|
||||
this.$emit('resetData');
|
||||
},
|
||||
success(e) {
|
||||
this.imgArr = e;
|
||||
},
|
||||
fail(e) {
|
||||
console.log(e);
|
||||
},
|
||||
submitImg() {
|
||||
// const
|
||||
console.log(this.id);
|
||||
// qrUpdate(this.value).then(res => {
|
||||
// console.log(res);
|
||||
// });
|
||||
html2canvas(
|
||||
document
|
||||
.querySelector(`#${this.editorUid}`)
|
||||
.querySelector('.poster-content'),
|
||||
{
|
||||
useCORS: true,
|
||||
// 编辑器缩放保持 960 * 720 的尺寸
|
||||
scale: 1 / this.dZoom
|
||||
}
|
||||
).then(canvas => {
|
||||
localStorage.setItem('itemImg', canvas.toDataURL());
|
||||
qrUpdate({
|
||||
id: this.id,
|
||||
notice: JSON.stringify(this.value),
|
||||
noticePic: localStorage.getItem('itemImg')
|
||||
}).then(({ message }) => {
|
||||
this.msgSuccess(message);
|
||||
this.$router.go(-1);
|
||||
});
|
||||
});
|
||||
},
|
||||
beforeAddImgWidget(imgObj) {
|
||||
this.addWidget('img', imgObj.path);
|
||||
@ -344,7 +407,6 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
this.handleActiveWidget(item);
|
||||
});
|
||||
console.log(this.value);
|
||||
this.$emit('input', {
|
||||
background: this.value.background,
|
||||
widgetList: this.widgetList
|
||||
@ -442,6 +504,7 @@ export default {
|
||||
this.widgetList.forEach(w => {
|
||||
w.active = false;
|
||||
});
|
||||
let that = this;
|
||||
return new Promise(resolve => {
|
||||
// 激活当前编辑器 方便截图
|
||||
this.$emit('active');
|
||||
@ -456,17 +519,28 @@ export default {
|
||||
scale: 1 / this.dZoom
|
||||
}
|
||||
).then(async canvas => {
|
||||
console.timeEnd('1');
|
||||
console.time('2');
|
||||
// console.timeEnd('1');
|
||||
// console.time('2');
|
||||
localStorage.setItem('itemImg', canvas.toDataURL());
|
||||
let file = canvas
|
||||
.toDataURL('image/jpeg', 1)
|
||||
.replace('data:image/jpeg;base64,', '');
|
||||
// console.log('图片');
|
||||
// console.log(file);
|
||||
// base64的图片
|
||||
console.timeEnd('2');
|
||||
console.time('3');
|
||||
// console.timeEnd('2');
|
||||
// console.time('3');
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.href = canvas.toDataURL();
|
||||
link.setAttribute('download', new Date().getTime() + '.png');
|
||||
link.style.display = 'none';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
if (cb) {
|
||||
await cb(file, resolve);
|
||||
console.timeEnd('3');
|
||||
// console.timeEnd('3');
|
||||
instance.close();
|
||||
}
|
||||
});
|
||||
@ -474,7 +548,7 @@ export default {
|
||||
});
|
||||
},
|
||||
changeBackground(imgUrl) {
|
||||
console.log((this.value.background.img = imgUrl));
|
||||
this.value.background.img = imgUrl;
|
||||
// this.value.background = imgUrl;
|
||||
// this.value.material_uid = imgObj.uid;
|
||||
// this.value.materialType = imgObj.expandType;
|
||||
@ -482,7 +556,6 @@ export default {
|
||||
},
|
||||
changeTextColor(color) {
|
||||
this.value.background.color = color;
|
||||
console.log(this.value.background);
|
||||
},
|
||||
pushHistory(type, item, index) {
|
||||
const obj = {
|
||||
@ -598,6 +671,168 @@ export default {
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
imgArr() {
|
||||
// 解决多次合并
|
||||
const noticeItem = localStorage.getItem('notice');
|
||||
if (noticeItem == 'null') {
|
||||
const item = [
|
||||
{
|
||||
label: '图片',
|
||||
type: 'img',
|
||||
content: this.imgArr,
|
||||
uuid: '32a' + +new Date(),
|
||||
active: false,
|
||||
style: {
|
||||
top: 129,
|
||||
left: 86,
|
||||
height: 120,
|
||||
width: 120,
|
||||
align: { x: 0, y: 0 },
|
||||
lineHeight: 14,
|
||||
fontSize: 14,
|
||||
background: 'rgba(0, 0, 0, 0)',
|
||||
color: 'rgba(0, 0, 0, 1)',
|
||||
letterSpacing: 0,
|
||||
isOblique: false,
|
||||
isBold: false,
|
||||
zIndex: 1
|
||||
},
|
||||
setDataRange: {
|
||||
box: {
|
||||
show: true,
|
||||
detail: {
|
||||
top: true,
|
||||
left: true,
|
||||
height: true,
|
||||
width: true,
|
||||
background: false,
|
||||
zIndex: true
|
||||
}
|
||||
},
|
||||
content: {
|
||||
show: false
|
||||
},
|
||||
innerStyle: {
|
||||
show: false,
|
||||
detail: {
|
||||
align: true,
|
||||
lineHeight: true,
|
||||
fontSize: true,
|
||||
color: true,
|
||||
letterSpacing: true,
|
||||
isOblique: true,
|
||||
isBold: true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '文本',
|
||||
type: 'text',
|
||||
content: '提货须知',
|
||||
uuid: '32b' + +new Date(),
|
||||
active: false,
|
||||
style: {
|
||||
top: 108,
|
||||
left: 269,
|
||||
height: 40,
|
||||
width: 120,
|
||||
align: { x: 0, y: 0 },
|
||||
lineHeight: 14,
|
||||
fontSize: 18,
|
||||
background: 'rgba(0, 0, 0, 0)',
|
||||
color: 'rgba(0, 0, 0, 1)',
|
||||
letterSpacing: 0,
|
||||
isOblique: false,
|
||||
isBold: true,
|
||||
zIndex: 1
|
||||
},
|
||||
setDataRange: {
|
||||
box: {
|
||||
show: true,
|
||||
detail: {
|
||||
top: true,
|
||||
left: true,
|
||||
height: true,
|
||||
width: true,
|
||||
background: false,
|
||||
zIndex: true
|
||||
}
|
||||
},
|
||||
content: {
|
||||
show: false
|
||||
},
|
||||
innerStyle: {
|
||||
show: false,
|
||||
detail: {
|
||||
align: true,
|
||||
lineHeight: true,
|
||||
fontSize: true,
|
||||
color: true,
|
||||
letterSpacing: true,
|
||||
isOblique: true,
|
||||
isBold: true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '文本',
|
||||
type: 'text',
|
||||
content: ` 1. 微信或者手机浏览器扫码提货卡二维码，填写姓名、手机号、邮寄地址，点击“我要提货”<br>
|
||||
2. 一个手机号仅限验证一次，提交地址后即可失效<br>
|
||||
3. 有问题请联系客服 0551-63442479`,
|
||||
uuid: '32c' + +new Date(),
|
||||
active: false,
|
||||
style: {
|
||||
top: 142,
|
||||
left: 268,
|
||||
height: 155,
|
||||
width: 345,
|
||||
align: { x: 0, y: 0 },
|
||||
lineHeight: 30,
|
||||
fontSize: 16,
|
||||
background: 'rgba(0, 0, 0, 0)',
|
||||
color: 'rgba(0, 0, 0, 1)',
|
||||
letterSpacing: 0,
|
||||
isOblique: false,
|
||||
isBold: false,
|
||||
zIndex: 1
|
||||
},
|
||||
setDataRange: {
|
||||
box: {
|
||||
show: true,
|
||||
detail: {
|
||||
top: true,
|
||||
left: true,
|
||||
height: true,
|
||||
width: true,
|
||||
background: false,
|
||||
zIndex: true
|
||||
}
|
||||
},
|
||||
content: {
|
||||
show: false
|
||||
},
|
||||
innerStyle: {
|
||||
show: false,
|
||||
detail: {
|
||||
align: true,
|
||||
lineHeight: true,
|
||||
fontSize: true,
|
||||
color: true,
|
||||
letterSpacing: true,
|
||||
isOblique: true,
|
||||
isBold: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
this.value.widgetList = [...this.value.widgetList, ...item];
|
||||
} else {
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -609,6 +844,7 @@ export default {
|
||||
window.removeEventListener('resize', this.handleResizeFn);
|
||||
},
|
||||
created() {
|
||||
console.log(this.value);
|
||||
this.widgetList = this.value.widgetList || [];
|
||||
this.widgetList.forEach(v => {
|
||||
v.history = {
|
||||
@ -627,6 +863,7 @@ export default {
|
||||
display: flex;
|
||||
min-width: 830px;
|
||||
.main-pane {
|
||||
background-color: #7f7f7f;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding: 0 16px;
|
||||
@ -643,11 +880,13 @@ export default {
|
||||
}
|
||||
}
|
||||
.center {
|
||||
color: #fff;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.poster-content {
|
||||
top: 40px;
|
||||
border: 1px solid #ccc;
|
||||
top: 100px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
/*min-width: 480px;
|
||||
|
||||
@ -3,8 +3,10 @@
|
||||
:style="{
|
||||
transform: `scale(${needScale ? dZoom : 1})`
|
||||
}"
|
||||
class="text-widget-ct">
|
||||
{{value}}
|
||||
class="text-widget-ct"
|
||||
v-html="value"
|
||||
>
|
||||
<!-- {{value}} -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -24,10 +26,10 @@ export default {
|
||||
required: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.text-widget-ct {
|
||||
user-select: none;
|
||||
}
|
||||
.text-widget-ct {
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,15 +5,6 @@
|
||||
}"
|
||||
class="widget-ct cursor-p"
|
||||
>
|
||||
<widgetWrapper
|
||||
:d-zoom="dZoom"
|
||||
:page="page"
|
||||
:show-wrapper="showWrapper"
|
||||
:widget-data="widgetData"
|
||||
:widget-name="widgetData.type"
|
||||
>
|
||||
<vue-qr text="123" :size="140"></vue-qr>
|
||||
</widgetWrapper>
|
||||
<widgetWrapper
|
||||
:d-zoom="dZoom"
|
||||
:page="page"
|
||||
@ -36,12 +27,6 @@ import widgetWrapper from './widgetWrapper';
|
||||
import textWidget from './textWidget';
|
||||
import imgWidget from './imgWidget';
|
||||
export default {
|
||||
created() {
|
||||
console.log(this.dZoom);
|
||||
console.log(this.widgetData);
|
||||
console.log(this.showWrapper);
|
||||
console.log(this.page);
|
||||
},
|
||||
props: {
|
||||
dZoom: {
|
||||
type: Number,
|
||||
|
||||
@ -83,7 +83,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
toggleSideBar() {
|
||||
// this.$store.dispatch('app/toggleSideBar')
|
||||
this.$store.dispatch('app/toggleSideBar');
|
||||
},
|
||||
async logout() {
|
||||
this.$confirm('确定注销并退出系统吗？', '提示', {
|
||||
|
||||
@ -31,7 +31,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '九益车管理端',
|
||||
title: '金槐花提货管理',
|
||||
logo: logoImg
|
||||
// logo: ''
|
||||
};
|
||||
@ -54,7 +54,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
background: #2b2f3a;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
@ -72,7 +72,7 @@ export default {
|
||||
& .sidebar-title {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
color: #515a6e;
|
||||
font-weight: 600;
|
||||
line-height: 50px;
|
||||
font-size: 22px;
|
||||
|
||||
@ -107,7 +107,7 @@ export const asyncRouterMap = [
|
||||
path: 'index3',
|
||||
component: resolve => require(['@/views/index3'], resolve),
|
||||
name: 'index3',
|
||||
meta: { title: '生成海报', icon: 'list' },
|
||||
meta: { title: '生成提货卡', icon: 'list' },
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
@ -117,7 +117,7 @@ export const asyncRouterMap = [
|
||||
component: Layout,
|
||||
redirect: '/ums/admin',
|
||||
name: 'ums',
|
||||
meta: { title: '系统设置', icon: 'system' },
|
||||
meta: { title: '系统设置', icon: 'list' },
|
||||
children: [
|
||||
{
|
||||
path: 'admin',
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
module.exports = {
|
||||
title: '九益车服务平台',
|
||||
title: '金槐花服务平台',
|
||||
|
||||
/**
|
||||
* 是否系统布局配置
|
||||
|
||||
@ -81,7 +81,7 @@ const permission = {
|
||||
const { username } = data;
|
||||
const accessedRouters = asyncRouterMap.filter(v => {
|
||||
//admin帐号直接返回所有菜单
|
||||
if (username === 'admin') return true;
|
||||
// if (username === 'admin') return true;
|
||||
if (hasPermission(menus, v)) {
|
||||
if (v.children && v.children.length > 0) {
|
||||
v.children = v.children.filter(child => {
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<div class="dashboard-editor-container">
|
||||
<div style="height:10%"></div>
|
||||
<el-row class="tc">
|
||||
<div style="font-size:50px">WELCOME LOGIN</div>
|
||||
<div class="mt10 mb10">欢迎登录九益车管理系统</div>
|
||||
<div style="font-size:50px">欢迎登录金槐花提货管理系统</div>
|
||||
<!-- <div class="mt10 mb10"></div> -->
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -39,18 +39,36 @@
|
||||
<i class="el-icon-tickets"></i>
|
||||
<span>数据列表</span>
|
||||
<div class="btn-add">
|
||||
<el-button @click="handleAdd" size="small" type="success"
|
||||
>手动添加</el-button
|
||||
<el-button
|
||||
@click="handleImport"
|
||||
class="btn-adds"
|
||||
size="small"
|
||||
type="success"
|
||||
>
|
||||
<el-button @click="handleDelete(false)" size="small" type="success"
|
||||
>一键删除</el-button
|
||||
>
|
||||
<el-button @click="handleImport" size="small" type="success">
|
||||
导入
|
||||
</el-button>
|
||||
<el-button @click="handleExport" size="small" type="warning">
|
||||
<el-button
|
||||
@click="handleExport"
|
||||
class="btn-adds"
|
||||
size="small"
|
||||
type="warning"
|
||||
>
|
||||
导出
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="handleAdd"
|
||||
class="btn-adds"
|
||||
size="small"
|
||||
type="success"
|
||||
>手动添加</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="handleDelete(false)"
|
||||
class="btn-del"
|
||||
size="small"
|
||||
type="success"
|
||||
>一键删除</el-button
|
||||
>
|
||||
</div>
|
||||
</el-card>
|
||||
<!-- @selection-change="handleSelectionChange" -->
|
||||
@ -88,7 +106,8 @@
|
||||
></el-table-column>
|
||||
<el-table-column label="领取状态" align="center" prop="status">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.status == 0 ? '未领取' : '已领取' }}
|
||||
<el-tag v-if="scope.row.status == 0" type="danger">未领取</el-tag>
|
||||
<el-tag v-else>已领取</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
@ -165,7 +184,9 @@
|
||||
<em>点击上传</em>
|
||||
</div>
|
||||
<div class="el-upload__tip" slot="tip">
|
||||
<el-link type="info" style="font-size:12px" @click="importTemplate"
|
||||
<el-link
|
||||
style="font-size:16px;font-weight:700"
|
||||
@click="importTemplate"
|
||||
>下载模板</el-link
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -5,8 +5,14 @@
|
||||
<el-card class="operate-container" shadow="never" style="margin-top:0">
|
||||
<i class="el-icon-tickets"></i>
|
||||
<span>数据列表</span>
|
||||
<el-button class="btn-add" @click="handleAdd" size="small" type="success"
|
||||
>添加活动</el-button
|
||||
<el-button
|
||||
class="btn-add btn-adds"
|
||||
@click="handleAdd"
|
||||
size="small"
|
||||
type="success"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
添加活动</el-button
|
||||
>
|
||||
</el-card>
|
||||
<el-table style="width: 100%" class="table-container" :data="dataList">
|
||||
@ -25,11 +31,16 @@
|
||||
<vue-qr :text="path + '?id=' + scope.row.id" :size="140"></vue-qr>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品图片" align="center" prop="pic">
|
||||
|
||||
<el-table-column label="提货卡" align="center" prop="noticePic">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.noticePic == null">
|
||||
等待创建...
|
||||
</span>
|
||||
<el-image
|
||||
style="width: 100px; height: 100px"
|
||||
:src="scope.row.pic"
|
||||
v-else
|
||||
style="height: 100px"
|
||||
:src="scope.row.noticePic"
|
||||
fit="cover"
|
||||
></el-image>
|
||||
</template>
|
||||
@ -39,8 +50,17 @@
|
||||
align="center"
|
||||
prop="unit"
|
||||
></el-table-column>
|
||||
<el-table-column label="礼品图片" align="center" prop="pic">
|
||||
<template slot-scope="scope">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px"
|
||||
:src="scope.row.pic"
|
||||
fit="cover"
|
||||
></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="详情"
|
||||
label="礼品详情"
|
||||
align="center"
|
||||
prop="note"
|
||||
show-overflow-tooltip
|
||||
@ -62,7 +82,7 @@
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="handlePage2(scope.row)" type="text" size="small">
|
||||
生成海报
|
||||
编辑提货卡
|
||||
</el-button>
|
||||
<el-button @click="handlePage(scope.row)" type="text" size="small">
|
||||
领取名单
|
||||
@ -89,14 +109,14 @@
|
||||
/>
|
||||
<!-- 添加修改 -->
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="活动名称" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位" prop="unit">
|
||||
<el-input v-model="form.unit"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="截止时间" prop="lastTime">
|
||||
<el-form-item label="截止时间">
|
||||
<el-date-picker
|
||||
v-model="form.lastTime"
|
||||
type="datetime"
|
||||
@ -105,12 +125,12 @@
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品详情" prop="note">
|
||||
<el-form-item label="礼品详情" prop="note">
|
||||
<div id="text">
|
||||
<editor v-model="form.note" :min-height="192" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品图片" prop="pic">
|
||||
<el-form-item label="礼品图片" prop="pic">
|
||||
<multi-upload
|
||||
v-model="selectProductPics"
|
||||
:maxCount="1"
|
||||
@ -148,7 +168,7 @@ export default {
|
||||
imageUrl: require('@/assets/logo/logo.png'), //icon路径
|
||||
path:
|
||||
process.env.NODE_ENV === 'development'
|
||||
? 'http://192.168.0.125:1777'
|
||||
? 'http://golden.shangqie.cn/#/'
|
||||
: process.env.VUE_APP_BASE_API,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
@ -235,7 +255,7 @@ export default {
|
||||
this.form = {};
|
||||
this.resetForm('form');
|
||||
this.dialogVisible = true;
|
||||
this.title = '添加商品';
|
||||
this.title = '添加礼品';
|
||||
},
|
||||
// 编辑
|
||||
handleUpdate(row) {
|
||||
@ -278,6 +298,7 @@ export default {
|
||||
// path: '/index3',
|
||||
// query: { row: JSON.stringify(row) }
|
||||
// });
|
||||
localStorage.setItem('notice', row.notice);
|
||||
this.$router.push({ path: '/index3', query: { id: row.id } });
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
|
||||
@ -1,26 +1,30 @@
|
||||
<template>
|
||||
<div id="app-container" class="app-container">
|
||||
<el-menu
|
||||
default-active="1"
|
||||
default-active="2"
|
||||
:collapse="true"
|
||||
style="background-color:#e8e8e8;border-right:1px solid #e0e0e0"
|
||||
style="background-color:#fff;border-right:1px solid #e0e0e0"
|
||||
>
|
||||
<el-menu-item index="1" @click="index = 1">
|
||||
<!-- <el-menu-item index="1" @click="index = 1">
|
||||
<i class="el-icon-menu"></i>
|
||||
<span slot="title">模板</span>
|
||||
</el-menu-item>
|
||||
</el-menu-item> -->
|
||||
<el-menu-item index="2" @click="index = 2">
|
||||
<i class="el-icon-picture"></i>
|
||||
<span slot="title">图片</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3" @click="index = 3">
|
||||
<i class="el-icon-document"></i>
|
||||
<span slot="title">文本</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3" @click="index = 3">
|
||||
<i class="el-icon-picture"></i>
|
||||
<span slot="title">图片</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4" @click="index = 4">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">背景色</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="5" @click="saveAllTheme">
|
||||
<i class="el-icon-upload"></i>
|
||||
<span slot="title">导出</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
<div class="left-pane">
|
||||
<ul class="poster-ct" v-if="index == 1">
|
||||
@ -85,13 +89,14 @@
|
||||
<template v-for="(item, i) in editorList">
|
||||
<posterEditor
|
||||
ref="child"
|
||||
@resetData="setData"
|
||||
:order="i"
|
||||
:id="id"
|
||||
v-model="item.content"
|
||||
v-show="item.active"
|
||||
:key="i"
|
||||
:page="
|
||||
i === 0 ? { width: 375, height: 620 } : { width: 620, height: 375 }
|
||||
i === 0 ? { width: 620, height: 375 } : { width: 620, height: 375 }
|
||||
"
|
||||
@active="handleEditorClick(i, 'active')"
|
||||
></posterEditor>
|
||||
@ -104,6 +109,14 @@
|
||||
@success="handleImageSelection"
|
||||
></imageSelection>
|
||||
</blankDialog> -->
|
||||
<div>
|
||||
<vue-canvas-poster
|
||||
v-show="true"
|
||||
:painting="painting"
|
||||
@success="success"
|
||||
@fail="fail"
|
||||
></vue-canvas-poster>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -114,17 +127,22 @@ import imageSelection from '@/components/imageSelection';
|
||||
import widgetView from '../widgetView';
|
||||
import { findComponentsDownward } from '@/utils/assist';
|
||||
import singleUpload from '@/components/Upload/singleUpload';
|
||||
import { VueCanvasPoster } from 'vue-canvas-poster';
|
||||
export default {
|
||||
components: {
|
||||
posterEditor,
|
||||
blankDialog,
|
||||
imageSelection,
|
||||
widgetView,
|
||||
singleUpload
|
||||
singleUpload,
|
||||
VueCanvasPoster
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 1,
|
||||
id: null,
|
||||
painting: {},
|
||||
imgArr: '',
|
||||
index: 2,
|
||||
textColor: '',
|
||||
imgSrc: '',
|
||||
bgImgSrc: '',
|
||||
@ -134,26 +152,13 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
clickParent() {
|
||||
this.$refs.child[0].addWidget('text');
|
||||
success(e) {
|
||||
this.imgArr = e;
|
||||
},
|
||||
checkImg(e) {
|
||||
const a = {
|
||||
// active: false,
|
||||
// name: +new Date(),
|
||||
path: e
|
||||
// uid: 'a04c' + +new Date()
|
||||
};
|
||||
this.$refs.child[0].beforeAddImgWidget(a);
|
||||
fail(e) {
|
||||
console.log(e);
|
||||
},
|
||||
checkBgImg(e) {
|
||||
this.$refs.child[0].changeBackground(e);
|
||||
},
|
||||
checkTextCol(e) {
|
||||
this.$refs.child[0].changeTextColor(e);
|
||||
},
|
||||
fn() {},
|
||||
getEditorList() {
|
||||
setData() {
|
||||
this.editorList = [
|
||||
{
|
||||
name: '蜘蛛侠',
|
||||
@ -169,15 +174,15 @@ export default {
|
||||
{
|
||||
label: '图片',
|
||||
type: 'img',
|
||||
content: require('@/assets/image/6.jpg'),
|
||||
uuid: '32a73470-cfc1-4b1a-9daf-c1f59275c022',
|
||||
content: this.imgArr,
|
||||
uuid: '32a' + +new Date(),
|
||||
active: false,
|
||||
style: {
|
||||
top: 10,
|
||||
left: 49,
|
||||
height: 160,
|
||||
width: 240,
|
||||
align: { x: 2, y: 2 },
|
||||
top: 129,
|
||||
left: 86,
|
||||
height: 120,
|
||||
width: 120,
|
||||
align: { x: 0, y: 0 },
|
||||
lineHeight: 14,
|
||||
fontSize: 14,
|
||||
background: 'rgba(0, 0, 0, 0)',
|
||||
@ -215,26 +220,176 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '文本',
|
||||
type: 'text',
|
||||
content: '提货须知',
|
||||
uuid: '32b' + +new Date(),
|
||||
active: false,
|
||||
style: {
|
||||
top: 108,
|
||||
left: 269,
|
||||
height: 40,
|
||||
width: 120,
|
||||
align: { x: 0, y: 0 },
|
||||
lineHeight: 14,
|
||||
fontSize: 18,
|
||||
background: 'rgba(0, 0, 0, 0)',
|
||||
color: 'rgba(0, 0, 0, 1)',
|
||||
letterSpacing: 0,
|
||||
isOblique: false,
|
||||
isBold: true,
|
||||
zIndex: 1
|
||||
},
|
||||
setDataRange: {
|
||||
box: {
|
||||
show: true,
|
||||
detail: {
|
||||
top: true,
|
||||
left: true,
|
||||
height: true,
|
||||
width: true,
|
||||
background: false,
|
||||
zIndex: true
|
||||
}
|
||||
},
|
||||
content: {
|
||||
show: false
|
||||
},
|
||||
innerStyle: {
|
||||
show: false,
|
||||
detail: {
|
||||
align: true,
|
||||
lineHeight: true,
|
||||
fontSize: true,
|
||||
color: true,
|
||||
letterSpacing: true,
|
||||
isOblique: true,
|
||||
isBold: true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '文本',
|
||||
type: 'text',
|
||||
content: ` 1. 微信或者手机浏览器扫码提货卡二维码，填写姓名、手机号、邮寄地址，点击“我要提货”<br>
|
||||
2. 一个手机号仅限验证一次，提交地址后即可失效<br>
|
||||
3. 有问题请联系客服 0551-63442479`,
|
||||
uuid: '32c' + +new Date(),
|
||||
active: false,
|
||||
style: {
|
||||
top: 142,
|
||||
left: 268,
|
||||
height: 155,
|
||||
width: 345,
|
||||
align: { x: 0, y: 0 },
|
||||
lineHeight: 30,
|
||||
fontSize: 16,
|
||||
background: 'rgba(0, 0, 0, 0)',
|
||||
color: 'rgba(0, 0, 0, 1)',
|
||||
letterSpacing: 0,
|
||||
isOblique: false,
|
||||
isBold: false,
|
||||
zIndex: 1
|
||||
},
|
||||
setDataRange: {
|
||||
box: {
|
||||
show: true,
|
||||
detail: {
|
||||
top: true,
|
||||
left: true,
|
||||
height: true,
|
||||
width: true,
|
||||
background: false,
|
||||
zIndex: true
|
||||
}
|
||||
},
|
||||
content: {
|
||||
show: false
|
||||
},
|
||||
innerStyle: {
|
||||
show: false,
|
||||
detail: {
|
||||
align: true,
|
||||
lineHeight: true,
|
||||
fontSize: true,
|
||||
color: true,
|
||||
letterSpacing: true,
|
||||
isOblique: true,
|
||||
isBold: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '美国队长',
|
||||
active: false,
|
||||
content: {
|
||||
background: {
|
||||
color: '#fff',
|
||||
img: ''
|
||||
},
|
||||
material_uid: 'a32c6558-1130-4e45-8d0d-efc6f887be50',
|
||||
materialType: '__vue_devtool_undefined__',
|
||||
widgetList: []
|
||||
}
|
||||
}
|
||||
];
|
||||
this.handleEditorClick(0);
|
||||
},
|
||||
clickParent() {
|
||||
this.$refs.child[0].addWidget('text');
|
||||
},
|
||||
checkImg(e) {
|
||||
const a = {
|
||||
// active: false,
|
||||
// name: +new Date(),
|
||||
path: e
|
||||
// uid: 'a04c' + +new Date()
|
||||
};
|
||||
this.$refs.child[0].beforeAddImgWidget(a);
|
||||
},
|
||||
checkBgImg(e) {
|
||||
this.$refs.child[0].changeBackground(e);
|
||||
},
|
||||
checkTextCol(e) {
|
||||
this.$refs.child[0].changeTextColor(e);
|
||||
},
|
||||
fn() {},
|
||||
getEditorList() {
|
||||
const noticeItem = localStorage.getItem('notice');
|
||||
if (noticeItem == 'null') {
|
||||
this.editorList = [
|
||||
{
|
||||
name: '蜘蛛侠',
|
||||
active: false,
|
||||
content: {
|
||||
background: {
|
||||
color: '#fff',
|
||||
img: ''
|
||||
},
|
||||
material_uid: '79b5ff3f-ab9a-4384-9904-aa96338202d2',
|
||||
materialType: '__vue_devtool_undefined__',
|
||||
widgetList: []
|
||||
}
|
||||
}
|
||||
// {
|
||||
// name: '美国队长',
|
||||
// active: false,
|
||||
// content: {
|
||||
// background: {
|
||||
// color: '#fff',
|
||||
// img: ''
|
||||
// },
|
||||
// material_uid: 'a32c6558-1130-4e45-8d0d-efc6f887be50',
|
||||
// materialType: '__vue_devtool_undefined__',
|
||||
// widgetList: []
|
||||
// }
|
||||
// }
|
||||
];
|
||||
} else {
|
||||
this.editorList = [
|
||||
{
|
||||
name: '蜘蛛侠',
|
||||
active: false,
|
||||
content: JSON.parse(noticeItem)
|
||||
}
|
||||
];
|
||||
}
|
||||
this.handleEditorClick(0);
|
||||
},
|
||||
handleEditorClick(i) {
|
||||
if (this.activeEditorIndex > -1) {
|
||||
let oldItem = this.editorList[this.activeEditorIndex];
|
||||
@ -291,7 +446,7 @@ export default {
|
||||
await current
|
||||
.fn((file, done) => {
|
||||
return new Promise(resolve => {
|
||||
// console.log('截图成功', file)
|
||||
// console.log('截图成功', file);
|
||||
done('file');
|
||||
resolve('file');
|
||||
});
|
||||
@ -343,10 +498,32 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
localStorage.removeItem('itemImg');
|
||||
},
|
||||
created() {
|
||||
this.getEditorList();
|
||||
const { id } = this.$route.query;
|
||||
this.id = id;
|
||||
this.painting = {
|
||||
width: '120px',
|
||||
height: '120px',
|
||||
background: '#eee',
|
||||
views: [
|
||||
{
|
||||
type: 'qrcode',
|
||||
content: 'http://golden.shangqie.cn/#/?id=' + id,
|
||||
css: {
|
||||
top: '0',
|
||||
left: '0',
|
||||
color: '#000',
|
||||
width: '120px',
|
||||
height: '120px'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
console.log(this.painting.views[0].content);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -366,7 +543,7 @@ export default {
|
||||
width: 276px;
|
||||
min-width: 276px;
|
||||
text-align: center;
|
||||
background: rgb(232, 232, 232);
|
||||
background: rgb(255, 255, 255);
|
||||
.header {
|
||||
margin: 10px 0 10px;
|
||||
color: #2c2c2c;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="login">
|
||||
<div class="login-title">
|
||||
<!-- <img src="../assets/image/logo.png" alt="" /> -->
|
||||
<!-- <span>九益车服务平台</span> -->
|
||||
<!-- <span>金槐花服务平台</span> -->
|
||||
</div>
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
@ -10,8 +10,12 @@
|
||||
:rules="loginRules"
|
||||
class="login-form"
|
||||
>
|
||||
<h3 class="col">九益车服务平台</h3>
|
||||
<h1 class="title">登录</h1>
|
||||
<!-- <h3 class="col">金槐花服务平台</h3>
|
||||
<h1 class="title">登录</h1> -->
|
||||
<div style="font-size: 54px;font-weight: 500;color:#fff">hello</div>
|
||||
<div style="margin: 29px 0;font-size: 26px;font-weight: 400;color:#fff">
|
||||
欢迎来到金槐花管理系统
|
||||
</div>
|
||||
<div class="login-info">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
@ -64,7 +68,7 @@
|
||||
<!-- <div class="login-form-bg"></div> -->
|
||||
<!-- 底部 -->
|
||||
<!-- <div class="el-login-footer">
|
||||
<span>版权所有：九益车</span>
|
||||
<span>版权所有：金槐花</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
@ -149,14 +153,14 @@ export default {
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
$loginHeight: 570px;
|
||||
$loginForm: 383px;
|
||||
$loginForm: 470px;
|
||||
.login {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
min-height: $loginHeight;
|
||||
background-image: url('../assets/image/login-bg.png');
|
||||
background: url('../assets/image/login-bg.png') 50% fixed no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
}
|
||||
@ -187,32 +191,37 @@ $loginForm: 383px;
|
||||
color: #209cff;
|
||||
}
|
||||
.login-form {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
background: url(../assets/image/login_form.png);
|
||||
background-size: 100% 100%;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
// background: #ffffff;
|
||||
width: 520px;
|
||||
min-height: $loginForm;
|
||||
padding: 20px;
|
||||
padding-top: 10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
top: 45%;
|
||||
left: 77%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 9;
|
||||
// bottom: 0;
|
||||
// margin: auto;
|
||||
.el-input {
|
||||
height: 38px;
|
||||
height: 48px;
|
||||
input {
|
||||
height: 38px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
.input-icon {
|
||||
height: 39px;
|
||||
height: 48px;
|
||||
width: 14px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.login-info {
|
||||
padding: 0 100px;
|
||||
// padding: 0 100px;
|
||||
}
|
||||
}
|
||||
.login-form-bg {
|
||||
|
||||
@ -6,7 +6,7 @@ function resolve(dir) {
|
||||
return path.join(__dirname, dir);
|
||||
}
|
||||
|
||||
const name = defaultSettings.title || '九益车服务平台'; // 标题
|
||||
const name = defaultSettings.title || '金槐花服务平台'; // 标题
|
||||
|
||||
const port = process.env.port || process.env.npm_config_port || 8080; // 端口
|
||||
|
||||
@ -34,7 +34,8 @@ module.exports = {
|
||||
proxy: {
|
||||
// detail: https://cli.vuejs.org/config/#devserver-proxy
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
target: `http://192.168.0.125:1777`,
|
||||
// target: `http://192.168.0.125:1777`,
|
||||
target: `http://golden.shangqie.cn/api`,
|
||||
// target: `http://140.143.229.114:1818`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
|
||||
Reference in New Issue
Block a user