dai_siki
6 years ago
19 changed files with 1048 additions and 4 deletions
|
After Width: | Height: | Size: 129 B |
|
After Width: | Height: | Size: 267 B |
|
After Width: | Height: | Size: 248 B |
|
After Width: | Height: | Size: 245 B |
|
After Width: | Height: | Size: 441 B |
|
After Width: | Height: | Size: 568 B |
|
After Width: | Height: | Size: 780 B |
|
After Width: | Height: | Size: 626 B |
|
After Width: | Height: | Size: 373 B |
|
After Width: | Height: | Size: 779 B |
|
After Width: | Height: | Size: 399 B |
@ -0,0 +1,129 @@ |
|||
@import "./config.scss"; |
|||
|
|||
@keyframes rotation { |
|||
0% { |
|||
transform: rotateY(0deg); |
|||
} |
|||
|
|||
100% { |
|||
transform: rotateY(360deg); |
|||
} |
|||
} |
|||
|
|||
@keyframes rotation-x { |
|||
0% { |
|||
transform: rotateX(0deg); |
|||
} |
|||
|
|||
100% { |
|||
transform: rotateX(360deg); |
|||
} |
|||
} |
|||
|
|||
@keyframes rotation-z { |
|||
0% { |
|||
transform: rotateZ(0deg); |
|||
} |
|||
|
|||
100% { |
|||
transform: rotateZ(360deg); |
|||
} |
|||
} |
|||
|
|||
.a-rotation { |
|||
animation: rotation $ad1 linear; |
|||
} |
|||
|
|||
.a-rotation-x { |
|||
animation: rotation-x $ad1 linear; |
|||
} |
|||
|
|||
.a-rotation-z { |
|||
animation: rotation-z $ad1 linear; |
|||
} |
|||
|
|||
.a-rotation-z-i { |
|||
animation: rotation-z 8*$ad1 linear infinite; |
|||
} |
|||
|
|||
|
|||
|
|||
$fade_in_px: 100px; |
|||
|
|||
@keyframes fade_in { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
@keyframes fade_in_up { |
|||
0% { |
|||
transform: translate(0, $fade_in_px); |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
100% { |
|||
transform: translate(0); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
@keyframes fade_in_down { |
|||
0% { |
|||
transform: translate(0, -$fade_in_px); |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
100% { |
|||
transform: translate(0); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
@keyframes fade_in_right { |
|||
0% { |
|||
transform: translate($fade_in_px, 0); |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
100% { |
|||
transform: translate(0); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
@keyframes fade_in_left { |
|||
0% { |
|||
transform: translate(-$fade_in_px, 0); |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
100% { |
|||
transform: translate(0); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
.a-fade-in { |
|||
animation: fade_in $ad2 ease-in; |
|||
} |
|||
|
|||
.a-fade-in-up { |
|||
animation: fade_in_up $ad2 ease-in; |
|||
} |
|||
|
|||
.a-fade-in-right { |
|||
animation: fade_in_right $ad2 ease-in; |
|||
} |
|||
|
|||
.a-fade-in-left { |
|||
animation: fade_in_left $ad2 ease-in; |
|||
} |
|||
|
|||
.a-fade-in-down { |
|||
animation: fade_in_down $ad2 ease-in; |
|||
} |
|||
@ -0,0 +1,42 @@ |
|||
/** |
|||
* 全局配置 |
|||
* |
|||
* @author dai-siki同学 < 851733175@qq.com > |
|||
*/ |
|||
/*--------------------------------------------------------------- |
|||
| 参数配置 | |
|||
---------------------------------------------------------------*/ |
|||
//主宽度 |
|||
$w1: 1200px; |
|||
|
|||
//网站主色 primary color bgcolor |
|||
$c1: #3b7cff; // 红 dd000f |
|||
$c2: #f24949; |
|||
|
|||
//灰度色 用于字体 |
|||
$fc0: #010033; |
|||
$fc1: #3b4859; |
|||
$fc2: #445161; |
|||
$fc3: #8998ac; |
|||
$fc4: #b0b0b0; |
|||
|
|||
// 背景色 |
|||
$bgc1: #f5f6f7; |
|||
$bgc2: #595b5f; |
|||
|
|||
// 线框色 |
|||
$bdc1: #eeeeee; |
|||
|
|||
// 渐变背景色 |
|||
$rg1: radial-gradient(at bottom right, rgba(#fff, 0.35), transparent); |
|||
$lg1: linear-gradient(to left, rgba(#fff, 0.35), transparent); |
|||
|
|||
// 动画时长 |
|||
$ad1: 0.18s; // 很短很小幅度 |
|||
$ad2: 0.27s; // 0.18s |
|||
$ad3: 0.47s; // 0.18s |
|||
$ad4: 0.88s; // 0.18s |
|||
$ad4: 1.34s; // 0.18s |
|||
|
|||
// 黄金分割 |
|||
$goldenCut: 1.618; |
|||
@ -0,0 +1,206 @@ |
|||
@import "./config.scss"; |
|||
|
|||
/*--------------------------------------------------------------- |
|||
| 公共函数 | |
|||
---------------------------------------------------------------*/ |
|||
// 字体大小 |
|||
@mixin ff1 { |
|||
font-family: "Gotham", "Helvetica Neue", "Hiragino Sans GB", Arial, "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, |
|||
sans-serif; |
|||
} |
|||
@mixin ff2 { |
|||
font-family: "Open Sans", "PingFang SC", Arial, "Microsoft YaHei", "Helvetica Neue", "Hiragino Sans GB", |
|||
"WenQuanYi Micro Hei", Arial, sans-serif; |
|||
} |
|||
@mixin ff3 { |
|||
font-family: Tahoma, Verdana, sans-serif, "simsun", "微软雅黑"; |
|||
} |
|||
// 统一的圆角 |
|||
@mixin bdrs { |
|||
border-radius: 15px; |
|||
} |
|||
// 统一的阴影 |
|||
@mixin bs1 { |
|||
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); |
|||
} |
|||
@mixin bs2 { |
|||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12); |
|||
} |
|||
@mixin bs3 { |
|||
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1); |
|||
} |
|||
@mixin bs4 { |
|||
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.12); |
|||
} |
|||
// 定宽居中 |
|||
@mixin bd_center { |
|||
width: $w1; |
|||
margin-right: auto; |
|||
margin-left: auto; |
|||
} |
|||
// 清除容器自身浮动 |
|||
@mixin cs { |
|||
&::after { |
|||
display: block; |
|||
visibility: hidden; |
|||
clear: both; |
|||
overflow: hidden; |
|||
height: 0; |
|||
content: ""; |
|||
} |
|||
} |
|||
// 已知高度的容器在页面中水平垂直居中 |
|||
@mixin centre { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
// 已知高度的容器在页面中水平垂直居中 |
|||
@mixin hub($w, $h) { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
width: $w; |
|||
height: $h; |
|||
margin: -$h * 0.5 0 0 -$w * 0.5; |
|||
} |
|||
// 未知高度容器在页面居中,父元素必须相对定位 |
|||
@mixin hub2($sel, $w, $h) { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
margin: 0; |
|||
padding: 0; |
|||
|
|||
#{$sel} { |
|||
position: absolute; |
|||
top: -50%; |
|||
left: -50%; |
|||
display: block; |
|||
} |
|||
} |
|||
// 不换行显示省略号 |
|||
@mixin toe { |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
word-wrap: normal; |
|||
} |
|||
// 图片居中 |
|||
@mixin img_hub { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
display: block; |
|||
|
|||
img { |
|||
position: absolute; |
|||
top: -50%; |
|||
left: -50%; |
|||
display: block; |
|||
|
|||
&.hidden { |
|||
position: static; |
|||
visibility: hidden; |
|||
} |
|||
} |
|||
} |
|||
//遮蔽盒子 |
|||
@mixin shield { |
|||
position: fixed; |
|||
z-index: 9999; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0, 0, 0, 0.1); |
|||
} |
|||
//居中 |
|||
@mixin absolute_center { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
} |
|||
// 白色的一闪而过的光芒，展示那种光滑靓丽 |
|||
@mixin flicker { |
|||
position: relative; |
|||
overflow: hidden; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
display: block; |
|||
top: -50px; |
|||
left: -50px; |
|||
width: 1000px; |
|||
height: 1px; |
|||
box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.3); |
|||
background-color: rgba(255, 255, 255, 0.18); |
|||
} |
|||
|
|||
&:hover { |
|||
&::before { |
|||
transform: rotate(-90deg) translatey(100px); |
|||
transition: all 3s; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 加载组件 |
|||
.z-loading { |
|||
display: block; |
|||
text-align: center; |
|||
padding: 50px 0; |
|||
|
|||
.fa-spinner { |
|||
font-size: 50px; |
|||
color: $fc3; |
|||
} |
|||
} |
|||
|
|||
//遮蔽盒子 |
|||
.u-shield { |
|||
@include shield; |
|||
} |
|||
|
|||
//清除浮动 |
|||
.f-cb { |
|||
float: none; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
|
|||
//清除自身 |
|||
.f-cs { |
|||
@include cs; |
|||
} |
|||
|
|||
.f-hide { |
|||
display: none !important; |
|||
} |
|||
|
|||
.f-hide2 { |
|||
display: none; |
|||
} |
|||
|
|||
.f-fl { |
|||
float: left; |
|||
} |
|||
|
|||
.f-fr { |
|||
float: right; |
|||
} |
|||
|
|||
.f-ww { |
|||
@include bd_center; |
|||
} |
|||
|
|||
.f-pl-10 { |
|||
padding-left: 10px; |
|||
} |
|||
@ -0,0 +1,93 @@ |
|||
@import "./config.scss"; |
|||
@import "./function.scss"; |
|||
|
|||
/*--------------------------------------------------------------- |
|||
| 样式重置 | |
|||
---------------------------------------------------------------*/ |
|||
|
|||
* { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
} |
|||
|
|||
body { |
|||
@include ff2; |
|||
height: 100%; |
|||
font-size: 14px; |
|||
background: #fff; |
|||
background-attachment: fixed; |
|||
color: $fc1; |
|||
} |
|||
|
|||
::selection { |
|||
background-color: $c1; |
|||
color: #fff; |
|||
} |
|||
|
|||
a { |
|||
text-decoration: none; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
|
|||
li { |
|||
list-style-type: none; |
|||
} |
|||
|
|||
img { |
|||
border: none; |
|||
display: block; |
|||
} |
|||
|
|||
i { |
|||
font-style: normal; |
|||
} |
|||
|
|||
b { |
|||
// font-weight: normal; |
|||
} |
|||
|
|||
table { |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
button, |
|||
input, |
|||
select, |
|||
textarea { |
|||
@include ff2; |
|||
outline: none; |
|||
border: none; |
|||
} |
|||
|
|||
button, |
|||
input[type="button"], |
|||
input[type="submit"] { |
|||
cursor: pointer; |
|||
} |
|||
// 去掉input[type="number"]的箭头 |
|||
|
|||
input::-webkit-inner-spin-button, |
|||
input::-webkit-outer-spin-button { |
|||
-webkit-appearance: none; |
|||
} |
|||
|
|||
input[type="number"] { |
|||
-moz-appearance: textfield; |
|||
} |
|||
|
|||
a, |
|||
button, |
|||
input { |
|||
&:hover { |
|||
transition: all 0.15s; |
|||
-webkit-touch-callout: none; |
|||
} |
|||
} |
|||
@ -0,0 +1,145 @@ |
|||
@import "@/assets/scss/c/config.scss"; |
|||
@import "@/assets/scss/c/function.scss"; |
|||
|
|||
.m-wx_index { |
|||
.wrap { |
|||
margin-top: 10px; |
|||
} |
|||
.mw-cpt_type { |
|||
min-height: 200px; |
|||
border-radius: 4px; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.mw-show { |
|||
padding: 40px 0 100px; |
|||
|
|||
.mw-phone { |
|||
position: relative; |
|||
margin: 0 auto; |
|||
width: 375px; |
|||
min-height: 500px; |
|||
background-color: #ffffff; |
|||
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1); |
|||
|
|||
.mw-phone-hint { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
text-align: center; |
|||
color: #aaaaaa; |
|||
height: 30px; |
|||
line-height: 30px; |
|||
font-size: 12px; |
|||
transition: transform $ad2 ease-in-out; |
|||
|
|||
&.z-out-left { |
|||
transform: translateX(-250px); |
|||
} |
|||
|
|||
&.z-out-down { |
|||
transform: translateY(100px); |
|||
} |
|||
} |
|||
|
|||
.z-none { |
|||
border: 1px dashed #aaa; |
|||
} |
|||
|
|||
.mw-cpt { |
|||
cursor: pointer; |
|||
|
|||
&.z-focused { |
|||
box-shadow: 0 0 8px 4px #cc5; |
|||
} |
|||
|
|||
.d-cpt-operate { |
|||
@include bs1; |
|||
position: absolute; |
|||
top: -1000px; |
|||
bottom: -1000px; |
|||
right: -50px; |
|||
width: 50px; |
|||
padding: 5px 0; |
|||
height: 200px; |
|||
margin: auto 0; |
|||
border-radius: 0 4px 4px 0; |
|||
border-left: 1px solid #bb5; |
|||
background-color: #ffffff; |
|||
text-align: center; |
|||
.d-cpt-btn { |
|||
margin-bottom: 2px; |
|||
padding: 8px 0 4px; |
|||
line-height: 16px; |
|||
|
|||
&:hover { |
|||
background-color: #f1f2f3; |
|||
} |
|||
|
|||
img { |
|||
height: 12px; |
|||
line-height: 12px; |
|||
} |
|||
p { |
|||
line-height: 10px; |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.mw-cpt-top_title { |
|||
position: relative; |
|||
background-color: #ff4c52; |
|||
line-height: 50px; |
|||
padding-left: 15px; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #ffffff; |
|||
font-size: 13px; |
|||
} |
|||
.mw-cpt-cnt_news { |
|||
position: relative; |
|||
} |
|||
} |
|||
|
|||
.mw-phone-fixed { |
|||
@include bs1; |
|||
position: absolute; |
|||
z-index: 10; |
|||
top: 300px; |
|||
right: -2px; |
|||
height: 50px; |
|||
width: 120px; |
|||
border-radius: 50px 0 0 50px; |
|||
border: 1px dashed #aaa; |
|||
background-color: #ffffff; |
|||
} |
|||
.mw-phone-top { |
|||
position: relative; |
|||
height: 50px; |
|||
} |
|||
.mw-phone-ban { |
|||
position: relative; |
|||
height: 200px; |
|||
} |
|||
.mw-phone-cnt { |
|||
position: relative; |
|||
min-height: 300px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.mw-set { |
|||
padding: 5px 20px; |
|||
min-height: 400px; |
|||
border-radius: 4px; |
|||
background-color: #ffffff; |
|||
.d-operate { |
|||
padding: 20px 0; |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,428 @@ |
|||
<template> |
|||
<div> |
|||
<el-card v-show="step==1" shadow="never" class="aui-card--fill"> |
|||
<el-table |
|||
v-loading="dataListLoading" |
|||
:data="dataList" |
|||
border |
|||
@selection-change="dataListSelectionChangeHandle" |
|||
@sort-change="dataListSortChangeHandle" |
|||
style="width: 100%;"> |
|||
<el-table-column prop="customerName" label="客户名称" header-align="left" align="left"></el-table-column> |
|||
<el-table-column label="小程序首页配置" fixed="right" header-align="center" align="center" width="150"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" size="small" |
|||
@click="startSetWxIndex(scope.row.customerId, scope.row.customerName, 0)">政府端</el-button> |
|||
<el-button type="text" size="small" |
|||
@click="startSetWxIndex(scope.row.customerId, scope.row.customerName, 1)">居民端</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-card> |
|||
|
|||
<div class="m-wx_index" v-show="step==2"> |
|||
<el-button type="default" |
|||
@click="toStep(1)">取消返回</el-button> |
|||
<el-button type="success" |
|||
@click="save">保存</el-button> |
|||
<el-button type="danger" |
|||
@click="publish">发布</el-button> |
|||
|
|||
<el-row class="wrap" :gutter="20"> |
|||
<el-col :span="4"> |
|||
<h4>选择组件</h4> |
|||
<div class="mw-cpt_type"> |
|||
<div class="d-function" v-show="item.componentList.length > 0" :key="item.functionId" v-for="item in cptTypeList"> |
|||
<div class="d-info" @click="shiftCptTypeItemUnfold(item)"> |
|||
<img v-if="item.functionId==0" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/common-cpt.png"> |
|||
<img v-if="item.functionId==1" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt1.png"> |
|||
<img v-if="item.functionId==2" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt2.png"> |
|||
<img v-if="item.functionId==3" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt3.png"> |
|||
<img v-if="item.functionId==4" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt4.png"> |
|||
|
|||
<span class="d-name">{{ item.functionName }}</span> |
|||
|
|||
<img class="d-arrow" :class="{'z-unfold': item.isUnfold}" src="@/assets/img/modules/wx-mini/index-set/arrow-down.png"> |
|||
</div> |
|||
<div class="d-list" v-show="item.isUnfold"> |
|||
<div class="d-item" :key="cptItem.componentId" v-for="cptItem in item.componentList"> |
|||
<span class="d-item-name">{{ cptItem.componentName }}</span> |
|||
<span class="d-item-btn" @click="beforeAddCpt(cptItem)"> |
|||
<img class="d-item-ico" src="@/assets/img/modules/wx-mini/index-set/add.png"> |
|||
<span>添加</span> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="14"> |
|||
<div class="mw-show"> |
|||
<div class="mw-phone"> |
|||
<div class="mw-phone-top z-none"> |
|||
<div class="mw-phone-hint" :class="{'z-out-left': topCptList.length>0}">（标题区）</div> |
|||
<div class="mw-cpt" |
|||
:class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}" |
|||
@click="focusCpt(item)" :key="item.componentId" |
|||
v-for="item in topCptList"> |
|||
<div class="mw-cpt-top_title" v-if="item.componentFrontId==='top_title'"> |
|||
<span>{{ item.demoData.content }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="mw-phone-ban z-none"> |
|||
<div class="mw-phone-hint" :class="{'z-out-left': banCptList.length>0}">（置顶区）</div> |
|||
</div> |
|||
<div class="mw-phone-fixed z-none"> |
|||
<div class="mw-phone-hint" :class="{'z-out-down': fixedCptList.length>0}">（浮窗区）</div> |
|||
</div> |
|||
<div class="mw-phone-cnt z-none"> |
|||
<div class="mw-phone-hint" :class="{'z-out-left': cntCptList.length>0}">（功能区）</div> |
|||
<div class="mw-cpt" |
|||
:class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}" |
|||
@click="focusCpt(item)" |
|||
:key="index" |
|||
v-for="(item, index) in cntCptList"> |
|||
<div class="mw-cpt-cnt_news" :style="{backgroundColor: item.configuration.bgc}" v-if="item.componentFrontId==='cnt_news'"> |
|||
<div class="d-news-title">{{ item.demoData.title }}</div> |
|||
<p class="d-news-cnt">{{ item.demoData.content }}</p> |
|||
<div class="d-cpt-operate" |
|||
v-show="focusedCpt.tempOnlyId===item.tempOnlyId" |
|||
@click.stop> |
|||
<div class="d-cpt-btn" @click="changeCptDisplayOrder(item, 'up')"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/up.png"> |
|||
<p>上移</p> |
|||
</div> |
|||
<div class="d-cpt-btn" @click="delCpt(item)"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/del.png"> |
|||
<p>删除</p> |
|||
</div> |
|||
<div class="d-cpt-btn" @click="changeCptDisplayOrder(item, 'down')"> |
|||
<img src="@/assets/img/modules/wx-mini/index-set/down.png"> |
|||
<p>下移</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<transition v-show="focusedCpt.tempOnlyId" name="el-zoom-in-top"> |
|||
<div class="mw-set el-zoom-in-top" v-if="focusedCpt.tempOnlyId"> |
|||
<div class="d-set-head" @click="focusedCpt.demoIsUnfold = !focusedCpt.demoIsUnfold"> |
|||
<span class="d-title">演示数据</span> |
|||
<img class="d-arrow" |
|||
:class="{'z-unfold': focusedCpt.demoIsUnfold}" |
|||
src="@/assets/img/modules/wx-mini/index-set/arrow-down.png"> |
|||
</div> |
|||
<el-form v-show="focusedCpt.demoIsUnfold" ref="form" label-position="left" label-width="60px" :model="focusedCpt.demoData" size="mini"> |
|||
<el-form-item label="标题"> |
|||
<el-input v-model="focusedCpt.demoData.title"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="内容"> |
|||
<el-input type="textarea" v-model="focusedCpt.demoData.content"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<div class="d-set-head" @click="focusedCpt.confIsUnfold = !focusedCpt.confIsUnfold"> |
|||
<span class="d-title">高级选项</span> |
|||
<img class="d-arrow" |
|||
:class="{'z-unfold': focusedCpt.confIsUnfold}" |
|||
src="@/assets/img/modules/wx-mini/index-set/arrow-down.png"> |
|||
</div> |
|||
<el-form v-show="focusedCpt.confIsUnfold" ref="form" label-position="left" label-width="60px" :model="focusedCpt.configuration" size="mini"> |
|||
<el-form-item label="背景色"> |
|||
<el-input v-model="focusedCpt.configuration.bgc"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<div class="d-operate"> |
|||
<el-button type="default" size="small" round |
|||
@click="resetFocusedCptData">重置</el-button> |
|||
<el-button type="success" size="small" round |
|||
@click="saveFocusedCptData">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</transition> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style lang="scss" src="@/assets/scss/modules/wx-mini/index-set.scss"></style> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import { Loading } from 'element-ui' |
|||
import nextTick from 'dai-js/tools/nextTick' |
|||
import getRandomString from 'dai-js/tools/getRandomString' |
|||
import cloneDeep from 'lodash/cloneDeep' |
|||
|
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/oper/crm/customer/getvalidcustomerlist', |
|||
getDataListIsPage: false |
|||
}, |
|||
|
|||
dataList: [ |
|||
{ |
|||
customerName: '青岛李沧区党委', |
|||
customerId: '1' |
|||
}, |
|||
{ |
|||
customerName: '青岛市北区党委', |
|||
customerId: '2' |
|||
} |
|||
], |
|||
|
|||
// 步骤: 1列表选择 2首页配置 |
|||
step: 2, |
|||
|
|||
wxIndex: { |
|||
customerId: '', |
|||
customerName: '', |
|||
clientType: '' |
|||
}, |
|||
|
|||
// 可用列表 |
|||
cptTypeList: [ |
|||
// 通用组件 |
|||
{ |
|||
functionId: '0', |
|||
functionName: '通用组件', |
|||
functionType: 1, // 1通用 2功能 |
|||
isUnfold: true, |
|||
componentList: [ |
|||
{ |
|||
componentId: '1', |
|||
componentName: '顶部标题', |
|||
componentFrontId: 'top_title', |
|||
configuration: { |
|||
content: '青岛市党委' |
|||
}, |
|||
demoData: { |
|||
content: '我是标题' |
|||
}, |
|||
configurationDescription: '请配置具体内容' |
|||
} |
|||
] |
|||
}, |
|||
// 功能组件 |
|||
{ |
|||
functionId: '1', |
|||
functionName: '议事厅', |
|||
functionType: 2, // 1通用 2功能 |
|||
isUnfold: false, |
|||
componentList: [ |
|||
{ |
|||
componentId: '5', |
|||
componentName: '新闻类', |
|||
componentFrontId: 'cnt_news', |
|||
configuration: { |
|||
bgc: '#eee' |
|||
}, |
|||
demoData: { |
|||
title: '我是标题', |
|||
content: '我是内容。我是内容。我是内容。' |
|||
}, |
|||
configurationDescription: '请配置具体内容' |
|||
} |
|||
] |
|||
} |
|||
], |
|||
// 当前应用组件列表 |
|||
cptList: [ |
|||
// { |
|||
// componentId: '1', |
|||
// componentName: '顶部标题', |
|||
// componentFrontId: 'top_title', |
|||
// configuration: { |
|||
// content: '青岛市党委' |
|||
// }, |
|||
// demoData: { |
|||
// content: '我是标题' |
|||
// }, |
|||
// configurationDescription: '请配置具体内容', |
|||
// displayOrder: 1, |
|||
// region: 1 // 区域 1top 2ban 3fixed 4cnt |
|||
// } |
|||
], |
|||
focusedCpt: { |
|||
tempOnlyId: '' |
|||
} |
|||
} |
|||
}, |
|||
|
|||
components: { |
|||
}, |
|||
|
|||
computed: { |
|||
cptTypeListTiled () { |
|||
const { cptTypeList } = this |
|||
let list = [] |
|||
cptTypeList.forEach(item => { |
|||
list = [...list, ...item.componentList] |
|||
}) |
|||
return list |
|||
}, |
|||
topCptList () { |
|||
return this.cptList.filter(item => this.checkCptRegion(item) === 'top') |
|||
}, |
|||
banCptList () { |
|||
return this.cptList.filter(item => this.checkCptRegion(item) === 'ban') |
|||
}, |
|||
cntCptList () { |
|||
console.log('cntCpt发生了变化') |
|||
let arr = this.cptList.filter(item => this.checkCptRegion(item) === 'cnt') |
|||
arr.sort((f, s) => f.displayOrder - s.displayOrder) |
|||
return arr |
|||
}, |
|||
fixedCptList () { |
|||
return this.cptList.filter(item => this.checkCptRegion(item) === 'fixed') |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
// 改变步骤 |
|||
toStep (s) { |
|||
this.step = s |
|||
}, |
|||
// 选择用户开始配置 |
|||
async startSetWxIndex (id, name, type) { |
|||
this.wxIndex.customerId = id |
|||
this.wxIndex.customerName = name |
|||
this.wxIndex.clientType = type |
|||
let loadingInstance = Loading.service() |
|||
await nextTick(1000) |
|||
loadingInstance.close() |
|||
this.toStep(2) |
|||
console.log(this.wxIndex) |
|||
}, |
|||
|
|||
// 保存配置 |
|||
save () { |
|||
console.log('保存配置') |
|||
}, |
|||
// 发布配置 |
|||
publish () { |
|||
console.log('发布配置') |
|||
}, |
|||
// 判断组件所属区域类别 |
|||
checkCptRegion (item) { |
|||
const { componentFrontId } = item |
|||
const fun = name => name === componentFrontId |
|||
if (['top_title'].findIndex(fun) !== -1) { |
|||
return 'top' |
|||
} else if (['ban_banner'].findIndex(fun) !== -1) { |
|||
return 'ban' |
|||
} else if (['cnt_news'].findIndex(fun) !== -1) { |
|||
return 'cnt' |
|||
} else if (['fixed_msg'].findIndex(fun) !== -1) { |
|||
return 'fixed' |
|||
} else { |
|||
return 'none' |
|||
} |
|||
}, |
|||
// 添加组件到实例-前验证 |
|||
beforeAddCpt (item) { |
|||
console.log('添加组件到实例-前验证') |
|||
const regionType = this.checkCptRegion(item) |
|||
const tempOnlyId = getRandomString(20) |
|||
if (regionType === 'top') { |
|||
if (this.topCptList.length > 0) { |
|||
|
|||
} else { |
|||
this.addCpt(item, tempOnlyId, 1) |
|||
} |
|||
} else if (regionType === 'ban') { |
|||
if (this.banCptList.length > 0) { |
|||
|
|||
} else { |
|||
this.addCpt(item, tempOnlyId, 2) |
|||
} |
|||
} else if (regionType === 'fixed') { |
|||
if (this.fixedCptList.length > 0) { |
|||
|
|||
} else { |
|||
this.addCpt(item, tempOnlyId, 3) |
|||
} |
|||
} else if (regionType === 'cnt') { |
|||
this.addCpt(item, tempOnlyId, 4, (this.cntCptList.length + 1) * 10) |
|||
} else { |
|||
return false |
|||
} |
|||
}, |
|||
// 实例内容组件重置displayOrder属性 |
|||
cntCptListResort () { |
|||
console.log('实例内容组件重置displayOrder属性') |
|||
this.cntCptList.forEach((item, index) => { |
|||
item.displayOrder = (index + 1) * 10 |
|||
}) |
|||
}, |
|||
// 添加组件到实例 |
|||
addCpt (item, tempOnlyId, region, displayOrder = 0) { |
|||
console.log('添加组件到实例') |
|||
let trueItem = cloneDeep(item) |
|||
trueItem.tempOnlyId = tempOnlyId |
|||
trueItem.region = region |
|||
trueItem.displayOrder = displayOrder |
|||
this.cptList.push(trueItem) |
|||
}, |
|||
// 改变实例组件显示顺序 |
|||
async changeCptDisplayOrder (item, type) { |
|||
console.log('改变实例组件显示顺序') |
|||
if (type === 'up') { |
|||
item.displayOrder -= 11 |
|||
} else if (type === 'down') { |
|||
item.displayOrder += 11 |
|||
} |
|||
await nextTick() |
|||
this.cntCptListResort() |
|||
}, |
|||
// 删除组件 |
|||
delCpt (item) { |
|||
this.cptList = this.cptList.filter(cptItem => item.tempOnlyId !== cptItem.tempOnlyId) |
|||
}, |
|||
// 聚焦实例组件 |
|||
focusCpt (item) { |
|||
console.log('聚焦实例组件') |
|||
if (this.focusedCpt.tempOnlyId === item.tempOnlyId) { |
|||
this.focusedCpt = { tempOnlyId: '' } |
|||
} else { |
|||
this.focusedCpt = { ...cloneDeep(item), demoIsUnfold: true, confIsUnfold: false } |
|||
} |
|||
}, |
|||
// 保存聚焦组件数据 |
|||
saveFocusedCptData () { |
|||
const { focusedCpt } = this |
|||
this.cptList.forEach(item => { |
|||
if (item.tempOnlyId === focusedCpt.tempOnlyId) { |
|||
item.demoData = cloneDeep(focusedCpt.demoData) |
|||
item.configuration = cloneDeep(focusedCpt.configuration) |
|||
} |
|||
}) |
|||
}, |
|||
// 重置聚焦组件数据 |
|||
resetFocusedCptData () { |
|||
const { focusedCpt } = this |
|||
this.cptTypeListTiled.forEach(item => { |
|||
if (item.componentId === focusedCpt.componentId) { |
|||
focusedCpt.demoData = cloneDeep(item.demoData) |
|||
focusedCpt.configuration = cloneDeep(item.configuration) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 改变可用列表组件展开与收起 |
|||
shiftCptTypeItemUnfold (item) { |
|||
item.isUnfold = !item.isUnfold |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue