init commit
This commit is contained in:
291
public/assets/js/backend/wdsxh/person_center_diy_page.js
Normal file
291
public/assets/js/backend/wdsxh/person_center_diy_page.js
Normal file
@@ -0,0 +1,291 @@
|
||||
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
|
||||
var Controller = {
|
||||
index: function () {
|
||||
new Vue({
|
||||
el: '#diy',
|
||||
data: {
|
||||
// 页面数据
|
||||
pageData: pageData,
|
||||
// 默认数据
|
||||
defaultData: defaultData,
|
||||
// 已选页面样式
|
||||
selectPageStyle: {},
|
||||
// 已选组件索引
|
||||
selectedIndex: -1,
|
||||
// 当前组件数据
|
||||
currentData: {},
|
||||
// 当前日期
|
||||
currentDate: "",
|
||||
// 选择弹窗是否显示
|
||||
selectVisible: false,
|
||||
// 选择弹窗数据
|
||||
selectData: null,
|
||||
// 选择弹窗选中类型
|
||||
selectType: 'Custom',
|
||||
// 选择弹窗选中回调事件
|
||||
selectCallback: null,
|
||||
// 选择弹窗表单数据
|
||||
selectForm: {
|
||||
title: "",
|
||||
content: "",
|
||||
appid: '',
|
||||
path: '',
|
||||
protocol: '',
|
||||
url: '',
|
||||
phone: '',
|
||||
},
|
||||
// 标题栏样式
|
||||
titleBarStyle: {
|
||||
background: "rgba(255, 255, 255, 0)",
|
||||
color: "",
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getCurrentDate()
|
||||
this.getPageStyle()
|
||||
$("#diy").show()
|
||||
$("#loading").hide()
|
||||
},
|
||||
methods: {
|
||||
// 获取已选页面样式
|
||||
getPageStyle() {
|
||||
var index = this.pageData.pageStyle.findIndex(item => {
|
||||
if (item.layout == this.pageData.pageLayout) return true
|
||||
})
|
||||
if (index === -1) index = 0
|
||||
this.selectPageStyle = JSON.parse(JSON.stringify(this.pageData.pageStyle[index]))
|
||||
},
|
||||
// 获取当前时间
|
||||
getCurrentDate() {
|
||||
const date = new Date();
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
this.currentDate = `${year}/${month}/${day}`;
|
||||
},
|
||||
// 编辑组件
|
||||
handleEdit(index) {
|
||||
this.selectedIndex = index;
|
||||
this.currentData = {}
|
||||
this.$nextTick(() => {
|
||||
if (this.selectedIndex == -1) {
|
||||
this.currentData = this.selectPageStyle;
|
||||
} else {
|
||||
this.currentData = this.pageData.items[this.selectedIndex];
|
||||
if (!this.currentData.activeName) this.currentData.activeName = "first"
|
||||
}
|
||||
})
|
||||
},
|
||||
// 拖动组件
|
||||
handleDrag(event) {
|
||||
this.handleEdit(event.newIndex);
|
||||
},
|
||||
// 重置颜色
|
||||
handleResetColor(source, key, color) {
|
||||
source[key] = color;
|
||||
},
|
||||
// 选择图片
|
||||
handleSelectImage(source, index, type = "image/") {
|
||||
parent.Fast.api.open(`general/attachment/select?element_id=&multiple=true&mimetype=${type}*`, __('Choose'), {
|
||||
callback: (data) => {
|
||||
if (data.multiple) {
|
||||
var url = Fast.api.cdnurl(data.url);
|
||||
source[index] = url;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除图片
|
||||
handleDeleteImage(source, index) {
|
||||
source[index] = "";
|
||||
},
|
||||
// 选择组件类型
|
||||
handleSelectType(source) {
|
||||
this.selectCallback = (type, row) => {
|
||||
source['link'] = null;
|
||||
switch (type) {
|
||||
case 'Custom':
|
||||
var path = row.path
|
||||
if (row.parameter) {
|
||||
if (path.indexOf("?") > -1) path += "&" + row.parameter
|
||||
else path += "?" + row.parameter
|
||||
}
|
||||
source['link'] = { type: type, title: row.title, path: path, };
|
||||
break;
|
||||
case 'Editor':
|
||||
var content = $("#Editor").val()
|
||||
source['link'] = { type: type, title: row.name, pageTitle: this.selectForm.title, content: content };
|
||||
break;
|
||||
case 'WXMp':
|
||||
source['link'] = { type: type, title: row.name, appid: this.selectForm.appid, path: this.selectForm.path };
|
||||
break;
|
||||
case 'Outside':
|
||||
source['link'] = { type: type, title: row.name, url: this.selectForm.protocol + this.selectForm.url };
|
||||
break;
|
||||
case 'Phone':
|
||||
source['link'] = { type: type, title: row.name, phone: this.selectForm.phone };
|
||||
break;
|
||||
case 'Service':
|
||||
source['link'] = { type: type, title: row.name };
|
||||
break;
|
||||
}
|
||||
this.selectVisible = false;
|
||||
}
|
||||
$.post('wdsxh/person_center_diy_page/select_url_pro', {}, (res) => {
|
||||
this.selectData = res.rows;
|
||||
this.selectForm = {
|
||||
title: "",
|
||||
content: "",
|
||||
appid: '',
|
||||
path: '',
|
||||
protocol: '',
|
||||
url: '',
|
||||
phone: '',
|
||||
}
|
||||
if (source['link']) {
|
||||
this.selectType = source['link'].type
|
||||
|
||||
if (source['link'].type === 'Custom') {
|
||||
let index = this.selectData.Custom.list.findIndex((item) => {
|
||||
if (source['link'].path.indexOf(item.path) > -1) {
|
||||
return true
|
||||
}
|
||||
})
|
||||
if (index > -1) {
|
||||
let selectLink = this.selectData.Custom.list[index]
|
||||
this.$delete(this.selectData.Custom.list, index)
|
||||
let selectPath = source['link'].path.split(selectLink.path)[1]
|
||||
if (selectPath[0] == "?" || selectPath[0] == "&") {
|
||||
this.$set(selectLink, "parameter", selectPath.slice(1))
|
||||
}
|
||||
this.selectData.Custom.list.unshift(selectLink)
|
||||
this.selectData.Custom.list = [...this.selectData.Custom.list]
|
||||
}
|
||||
} else if (source['link'].type === 'WXMp') {
|
||||
this.selectForm.appid = source['link'].appid;
|
||||
this.selectForm.path = source['link'].path;
|
||||
} else if (source['link'].type === 'Outside') {
|
||||
if (source['link'].url && source['link'].url.substring(0, 5) == "http:") {
|
||||
this.selectForm.protocol = 'http://';
|
||||
this.selectForm.url = source['link'].url.split('http://')[1];
|
||||
} else if (source['link'].url && source['link'].url.substring(0, 5) == "https") {
|
||||
this.selectForm.protocol = 'https://';
|
||||
this.selectForm.url = source['link'].url.split('https://')[1];
|
||||
} else {
|
||||
this.selectForm.protocol = '';
|
||||
this.selectForm.url = source['link'].url;
|
||||
}
|
||||
} else if (source['link'].type === 'Phone') {
|
||||
this.selectForm.phone = source['link'].phone
|
||||
}
|
||||
} else {
|
||||
this.selectType = "Custom"
|
||||
$("#Editor").val("")
|
||||
}
|
||||
this.selectVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (source['link'] && source['link'].type === 'Editor') {
|
||||
$("#Editor").val(source['link'].content)
|
||||
this.selectForm.title = source['link'].pageTitle
|
||||
this.selectForm.content = source['link'].content
|
||||
}
|
||||
Controller.api.bindevent();
|
||||
})
|
||||
});
|
||||
},
|
||||
// 改变选择框类型
|
||||
tabChange(e) {
|
||||
if (e.name == "Editor") {
|
||||
this.$nextTick(() => {
|
||||
Form.api.bindevent($("form[role=form]"));
|
||||
$('#Editor').on('change', () => {
|
||||
this.selectForm.content = $('#Editor').val()
|
||||
});
|
||||
})
|
||||
}
|
||||
},
|
||||
// 添加组件内容项目
|
||||
handleAddItem() {
|
||||
this.currentData.data.push({
|
||||
imgUrl: '/assets/addons/wdsxh/img/menu.png',
|
||||
link: null,
|
||||
text: '导航标题',
|
||||
});
|
||||
},
|
||||
// 删除组件内容项目
|
||||
handleDeleteItem(index) {
|
||||
if (this.pageData.items[this.selectedIndex].data.length > 1) {
|
||||
this.pageData.items[this.selectedIndex].data.splice(index, 1);
|
||||
} else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '至少保留一个项目',
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
},
|
||||
// 监听页面滚动
|
||||
handleScroll(e) {
|
||||
const scrollTop = e.target.scrollTop
|
||||
if (scrollTop > 100) {
|
||||
this.titleBarStyle.background = "#fff"
|
||||
this.titleBarStyle.color = "black"
|
||||
} else {
|
||||
let opacity = parseFloat(scrollTop / 100).toFixed(4)
|
||||
this.titleBarStyle.background = "rgba(255, 255, 255, " + opacity + ")"
|
||||
if (scrollTop > 30) {
|
||||
this.titleBarStyle.color = "black"
|
||||
} else {
|
||||
this.titleBarStyle.color = ""
|
||||
}
|
||||
}
|
||||
},
|
||||
// 重置数据
|
||||
handleReset() {
|
||||
this.$confirm('此操作将重置为系统默认样式，将导致已设置样式被覆盖，是否继续?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
const data = JSON.parse(JSON.stringify(this.defaultData))
|
||||
this.pageData.pageTitle = data.pageTitle
|
||||
this.pageData.pageStyle = data.pageStyle
|
||||
this.pageData.items = data.items
|
||||
this.getPageStyle()
|
||||
this.handleEdit(-1)
|
||||
}).catch(() => { })
|
||||
},
|
||||
// 提交数据
|
||||
handleSubmit() {
|
||||
var submitData = JSON.parse(JSON.stringify(this.pageData))
|
||||
var index = submitData.pageStyle.findIndex(item => {
|
||||
if (item.layout == submitData.pageLayout) return true
|
||||
})
|
||||
if (index === -1) index = 0
|
||||
submitData.pageStyle[index] = JSON.parse(JSON.stringify(this.selectPageStyle))
|
||||
for (var i in submitData.items) {
|
||||
submitData.items[i].activeName = undefined
|
||||
}
|
||||
$.post('', { data: JSON.stringify(submitData) }, (res) => {
|
||||
if (res.code == 1) {
|
||||
Toastr.success(res.msg);
|
||||
this.pageData = submitData
|
||||
this.getCurrentDate()
|
||||
this.getPageStyle()
|
||||
return
|
||||
}
|
||||
return Toastr.error(res.msg);
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
Controller.api.bindevent();
|
||||
},
|
||||
api: {
|
||||
bindevent: function () {
|
||||
Form.api.bindevent($("form[role=form]"));
|
||||
}
|
||||
}
|
||||
};
|
||||
return Controller;
|
||||
});
|
||||
Reference in New Issue
Block a user