1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<template>
<a-layout>
<editor
api-key="no-api-key"
:init="{
height: 500,
menubar: false,
plugins: [
'a11ychecker','advlist','advcode','advtable','autolink','checklist','export',
'lists','link','image','charmap','preview','anchor','searchreplace','visualblocks',
'powerpaste','fullscreen','formatpainter','insertdatetime','media','table','help','wordcount'
],
toolbar:
'undo redo | casechange blocks | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlst checklist outdent indent | removeformat | a11ycheck code table help'
}"
initial-value="Welcome to TinyMCE Vue"
/>
<div class="header-content">
<div>
<div class="header-title">
<span>支付配置</span
><DownOutlined
v-if="ShowIcon.HeaderIcon"
@click="onHearder"
></DownOutlined>
<UpOutlined v-else @click="onHearder" ></UpOutlined>
</div>
<ContentHeaders v-if="ShowIcon.HeaderIcon" :list="list" ></ContentHeaders>
</div>
</div>
<div class="body-content">
<div>
<div class="header-title">
<span>域名配置</span
><DownOutlined
v-if="ShowIcon.BodyIcon"
@click="onBody"
></DownOutlined>
<UpOutlined v-else @click="onBody"></UpOutlined>
</div>
<ContentBodys v-if="ShowIcon.BodyIcon"></ContentBodys>
</div>
</div>
<!-- <div class="footer-content">
<div>
<div class="header-title">
<span>公众号配置</span
><DownOutlined
v-if="ShowIcon.FooterIcon"
@click="onFooter"
></DownOutlined>
<UpOutlined v-else @click="onFooter"></UpOutlined>
</div>
<ContentFooters v-if="ShowIcon.FooterIcon"></ContentFooters>
</div>
</div> -->
</a-layout>
</template>
<script lang="ts" setup>
import { defineExpose, reactive,ref,onMounted} from "vue";
import ContentHeaders from "./compoents/header/index.vue";
import ContentBodys from "./compoents/body/index.vue";
// import ContentFooters from "./compoents/footer/index.vue";
import { getPaySelect,onSearchSelectrealmName } from "@/api/index";
import { getUid } from "@/utils/userInfo";
import Editor from '@tinymce/tinymce-vue'
import { DownOutlined, UpOutlined } from "@ant-design/icons-vue";
interface ShowIcon {
HeaderIcon: Boolean;
BodyIcon: Boolean;
FooterIcon: Boolean;
}
let list = ref<Object>([])
const ShowIcon = reactive<ShowIcon>({
HeaderIcon: true,
BodyIcon: true,
FooterIcon: true,
});
const onHearder = () => {
ShowIcon.HeaderIcon = !ShowIcon.HeaderIcon;
};
const onBody = () => {
ShowIcon.BodyIcon = !ShowIcon.BodyIcon;
};
const onFooter = () => {
ShowIcon.FooterIcon = !ShowIcon.FooterIcon;
};
onMounted(async()=>{
const uid:any = getUid()
const data:any =await getPaySelect(uid)
list.value = data.data
const name= await onSearchSelectrealmName(uid)
return list
})
defineExpose({
ShowIcon,
list,
onHearder,
onBody,
onFooter,
});
</script>
<style lang="less" scoped>
.header-content {
background-color: white;
padding: 0px;
}
.body-content {
background-color: white;
}
.footer-content {
background-color: white;
padding: 0px;
}
.header-title {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 50px;
}
</style>
<style lang="less">
.ant-layout{
overflow-y: hidden;
}
</style>