zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

服务设置部分页面布局

pull/76/head
pengda 4 days ago
parent
d5df047a5e
commit
195486c748
13 changed files with 777 additions and 385 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/assets/site/settingIcon.svg
  2. 34
      src/components/PromptText.vue
  3. 26
      src/components/site/serviceSetting/domainSet.vue
  4. 58
      src/components/site/serviceSetting/linkSet.vue
  5. 81
      src/components/site/serviceSetting/menuColorSet.vue
  6. 43
      src/components/site/serviceSetting/paymentSet.vue
  7. 26
      src/components/site/serviceSetting/priceSet.vue
  8. 62
      src/components/site/serviceSetting/reportSeoSet.vue
  9. 154
      src/components/site/serviceSetting/showSet.vue
  10. 63
      src/components/site/serviceSetting/submitSeoSet.vue
  11. 69
      src/store/index.js
  12. 531
      src/views/agent/siteServiceEdit.vue
  13. 14
      src/views/elementGroups.vue

1
src/assets/site/settingIcon.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

34
src/components/PromptText.vue
View File

@ -1,7 +1,12 @@
<template>
<div class="prompt-text" :class="typeClass">
<img class="prompt-icon" :src="typeIcon" alt="">
<span class="prompt-desc">{{text}}</span>
<div class="flex-text">
<img class="prompt-icon" :src="typeIcon" alt="">
<span class="prompt-desc">{{text}}</span>
</div>
<div class="prompt-extra">
<slot name="desc" />
</div>
</div>
</template>
<script>
@ -47,33 +52,25 @@ export default {
}
</script>
<style scoped lang="scss">
.info{
.prompt-text{
padding: 8px 13px;
border-radius: 4px;
}
.flex-text{
display: flex;
align-items: center;
padding: 8px 13px;
align-self: stretch;
z-index: 1;
border-radius: 4px;
}
.info{
background: #F2F7FF;
border: 1px solid #BFDAFF;
}
.notice{
display: flex;
align-items: center;
padding: 8px 13px;
align-self: stretch;
z-index: 1;
border-radius: 4px;
background: #FEFCE8;
border: 1px solid rgba(255, 140, 0, 0.3);
}
.warning{
display: flex;
align-items: center;
padding: 8px 13px;
align-self: stretch;
z-index: 1;
border-radius: 4px;
background: #FFF1F0;
border: 1px solid #FFA39E;
}
@ -87,4 +84,7 @@ export default {
color: #1E2226;
letter-spacing: 0.08em;
}
.prompt-extra{
}
</style>

26
src/components/site/serviceSetting/domainSet.vue
View File

@ -0,0 +1,26 @@
<template>
<div>
</div>
</template>
<script>
export default {
name: '',
props:[],
components: {
},
data(){
return {
}
},
methods:{
}
}
</script>
<style lang="scss">
</style>

58
src/components/site/serviceSetting/linkSet.vue
View File

@ -0,0 +1,58 @@
<template>
<div class="main-content12">
<div class="pageheader">
<span class="pagetitle">基本设置</span>
</div>
<div class="flex-common">
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" label="首页链接">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="请输入首页链接" desc="您希望用户能找到服务的首页或您自建站点页面">
</GuipInput>
<el-checkbox slot="formDom">同步到本站的其他检测首页项上</el-checkbox>
</GuipFormItem>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="检测服务链接">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="请输入检测服务链接" desc="方便用户快速找到再次检测入口">
</GuipInput>
<el-checkbox slot="formDom">同步到本站的其他检测首页项上</el-checkbox>
</GuipFormItem>
</div>
</div>
</el-form>
</div>
<div class="save-button">
<GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
</div>
</div>
</template>
<script>
import GuipFormItem from "@/components/GuipFormItem.vue";
import GuipButton from "@/components/GuipButton.vue";
import GuipInput from "@/components/GuipInput.vue";
export default {
name: '',
props:[],
components: {
GuipInput,
GuipButton, GuipFormItem
},
data(){
return {}
},
methods: {}
}
</script>
<style lang="scss">
</style>

81
src/components/site/serviceSetting/menuColorSet.vue
View File

@ -0,0 +1,81 @@
<template>
<div class="main-content12">
<div class="pageheader">
<span class="pagetitle">基本设置</span>
</div>
<div class="flex-common">
<h3>PC端页面品牌</h3>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" label="提交页Logo上传">
<hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
:hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
hover-text-color="#006AFF"/>
</GuipFormItem>
<div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="报告页Logo上传">
<hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
:hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
hover-text-color="#006AFF"/>
</GuipFormItem>
<div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
</div>
</div>
</el-form>
</div>
<div class="flex-common">
<h3 class="mb16">页面色彩</h3>
<PromptText text='操作说明：点击色块可打开调色盘改色，也可直接更改6位色值数据进行改色' :type="1" class="mb32"/>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
aaa
</div>
<div class="flex-line "></div>
<div class="flex-right">
bbb
</div>
</div>
</el-form>
</div>
<div class="save-button">
<GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
</div>
</div>
</template>
<script>
import HoverButton from "@/components/HoverButton.vue";
import GuipFormItem from "@/components/GuipFormItem.vue";
import PromptText from "@/components/PromptText.vue";
import GuipButton from "@/components/GuipButton.vue";
export default {
name: '',
props:[],
components: {
GuipButton, PromptText, GuipFormItem, HoverButton
},
data(){
return {
}
},
methods:{
}
}
</script>
<style lang="scss">
</style>

43
src/components/site/serviceSetting/paymentSet.vue
View File

@ -0,0 +1,43 @@
<template>
<div class="main-content12">
<div class="pageheader">
<span class="pagetitle">收款设置</span>
</div>
<div class="flex-common payment-area">
<PromptText text="按住左侧图标，上下拖动可进行排序，平台卡券只能放到最后。" :type="1" class="mb32"/>
<PaymentMethod :paymentList="payList" @confirm="confirmPayment"/>
</div>
<div class="save-button">
<GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
</div>
</div>
</template>
<script>
import PaymentMethod from "@/components/paymentMethod.vue";
import PromptText from "@/components/PromptText.vue";
import GuipButton from "@/components/GuipButton.vue";
export default {
name: '',
props:[],
components: {
GuipButton,
PromptText, PaymentMethod
},
data(){
return {
}
},
methods:{
}
}
</script>
<style lang="scss">
</style>

26
src/components/site/serviceSetting/priceSet.vue
View File

@ -0,0 +1,26 @@
<template>
<div>
</div>
</template>
<script>
export default {
name: '',
props:[],
components: {
},
data(){
return {
}
},
methods:{
}
}
</script>
<style lang="scss">
</style>

62
src/components/site/serviceSetting/reportSeoSet.vue
View File

@ -0,0 +1,62 @@
<template>
<div class="main-content12">
<div class="pageheader">
<span class="pagetitle">基本设置</span>
</div>
<div class="flex-common">
<PromptText text="温馨提示：报告页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。" :type="2" class="mb16"/>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="mb24" label="报告页标题（T：title）">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="建议80字内">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" label="报告页关键词（K：keyword）">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea">
</GuipInput>
</GuipFormItem>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="报告页描述（D：description）">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea">
</GuipInput>
</GuipFormItem>
</div>
</div>
</el-form>
</div>
<div class="save-button">
<GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
</div>
</div>
</template>
<script>
import GuipFormItem from "@/components/GuipFormItem.vue";
import PromptText from "@/components/PromptText.vue";
import GuipButton from "@/components/GuipButton.vue";
import GuipInput from "@/components/GuipInput.vue";
export default {
name: '',
props:[],
components: {
GuipInput,
GuipButton, PromptText, GuipFormItem
},
data(){
return {}
},
methods: {}
}
</script>
<style lang="scss">
</style>

154
src/components/site/serviceSetting/showSet.vue
View File

@ -0,0 +1,154 @@
<template>
<div class="main-content12">
<div class="pageheader">
<span class="pagetitle">基本设置</span>
</div>
<div class="flex-common">
<h3 class="mb16">基础信息</h3>
<PromptText text='温馨提示：服务别名、首页服务广告词和首页服务描述不允许使用"知网"、"pmlc"、"amlc"和"smlc"等关键词。' :type="2" class="mb32"/>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" label="服务别名">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="建议80字内" desc="展示在用户端的服务名称">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" label="服务广告词">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="建议20字内" desc="用来简短概括的解释服务">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" label="服务描述">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea"
desc="用来详细的解释服务">
</GuipInput>
</GuipFormItem>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="服务Logo">
<hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
:hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
hover-text-color="#006AFF"/>
</GuipFormItem>
<div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
</div>
</div>
</el-form>
</div>
<div class="flex-common">
<h3>展示开关</h3>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<div class="card-item">
<div class="card-info">
<p class="card-name">首页服务显示</p>
<p class="card-desc">控制首页是否显示本服务</p>
</div>
<el-form>
<GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
</GuipSwitch>
</el-form>
</div>
<div class="card-item">
<div class="card-info">
<p class="card-name">检测页价格展示</p>
<p class="card-desc">本服务检测页面是否展示价格</p>
</div>
<el-form>
<GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
</GuipSwitch>
</el-form>
</div>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<div class="card-item">
<div class="card-info">
<p class="card-name">首页推荐位</p>
<p class="card-desc">开启即上推荐位</p>
</div>
<el-form>
<GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
</GuipSwitch>
</el-form>
</div>
</div>
</div>
</el-form>
</div>
<div class="save-button">
<GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
</div>
</div>
</template>
<script>
import HoverButton from "@/components/HoverButton.vue";
import GuipFormItem from "@/components/GuipFormItem.vue";
import GuipSwitch from "@/components/GuipSwitch.vue";
import PromptText from "@/components/PromptText.vue";
import GuipInput from "@/components/GuipInput.vue";
import GuipButton from "@/components/GuipButton.vue";
export default {
name: '',
props:[],
components: {
GuipButton,
GuipInput, PromptText, GuipSwitch, GuipFormItem, HoverButton
},
data(){
return {
}
},
methods:{
}
}
</script>
<style lang="scss">
.flex-right{
text-align: left;
}
.card-item{
padding: 24px;
display: flex;
align-items: center;
justify-content: space-between;
background: #FAFAFA;
border-radius: 4px;
border: none;
margin-bottom: 12px;
.card-info{
text-align: left;
margin-left: 12px;
font-variation-settings: "opsz" auto;
letter-spacing: 0.08em;
.card-name{
font-size: 14px;
line-height: 18px;
color: #1E2226;
}
.card-desc{
font-size: 12px;
line-height: 13px;
margin-top: 12px;
color: #8A9099;
}
}
.el-form-item{
margin: 0;
}
}
</style>

63
src/components/site/serviceSetting/submitSeoSet.vue
View File

@ -0,0 +1,63 @@
<template>
<div class="main-content12">
<div class="pageheader">
<span class="pagetitle">基本设置</span>
</div>
<div class="flex-common">
<PromptText text="温馨提示：提交页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。" :type="2" class="mb16"/>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="mb24" label="提交页标题（T：title）">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="建议80字内">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" label="提交页关键词（K：keyword）">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea">
</GuipInput>
</GuipFormItem>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="提交页描述（D：description）">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea">
</GuipInput>
</GuipFormItem>
</div>
</div>
</el-form>
</div>
<div class="save-button">
<GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
</div>
</div>
</template>
<script>
import GuipFormItem from "@/components/GuipFormItem.vue";
import PromptText from "@/components/PromptText.vue";
import GuipButton from "@/components/GuipButton.vue";
import GuipInput from "@/components/GuipInput.vue";
export default {
name: '',
props:[],
components: {
GuipInput,
GuipButton, PromptText, GuipFormItem
},
data(){
return {}
},
methods: {}
}
</script>
<style lang="scss">
</style>

69
src/store/index.js
View File

@ -316,6 +316,75 @@ export default new Vuex.Store({
]
}
],
siteServiceSettingData:[
{
name: '服务设置',
path: '',//设置为空
img:'site/settingIcon.svg',
noToPath:true,
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [
{
name: '价格设置',
desc: 'priceSet',//和组件名称、componentsName 一致
componentsName:'priceSet'//和页面内引入的组件名称 、及上面desc 一致
},
{
name: '收款设置',
desc: 'paymentSet',
componentsName:'paymentSet'
},
{
name: '展示设置',
desc: 'showSet',
componentsName:'showSet'
},
{
name: '页面品牌与色彩',
desc: 'menuColorSet',
componentsName:'menuColorSet'
}
]
},
{
name: 'SEO优化',
path: '',
img: 'site/sitesem.svg',
noToPath:true,
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [
{
name: '提交页SEO',
desc: 'submitSeoSet',
componentsName:'submitSeoSet'
},
{
name: '报告页SEO',
desc: 'reportSeoSet',
componentsName:'reportSeoSet'
},
]
},
{
name: '域名与链接',
path: '',
img: 'site/form_link.svg',
noToPath:true,
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [
{
name: '独立域名',
desc: 'domainSet',
componentsName:'domainSet'
},
{
name: '自定义导航',
desc: 'linkSet',
componentsName:'linkSet'
},
]
}
],
demoPageData:[
{
name: '支付授权',

531
src/views/agent/siteServiceEdit.vue
View File

@ -1,429 +1,224 @@
<template>
<div class="main-content12">
<div class="pageheader">
<span class="pagetitle">基本设置</span>
</div>
<!-- 收款方式-->
<div class="flex-common payment-area">
<PromptText text="按住左侧图标，上下拖动可进行排序，平台卡券只能放到最后。" :type="1" class="mb32"/>
<PaymentMethod :paymentList="payList" @confirm="confirmPayment"/>
</div>
<!-- 提交页seo-->
<div class="flex-common">
<PromptText text="温馨提示：提交页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。" :type="2" class="mb16"/>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="mb24" label="提交页标题（T：title）">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="建议80字内">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" label="提交页关键词（K：keyword）">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea">
</GuipInput>
</GuipFormItem>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="提交页描述（D：description）">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea">
</GuipInput>
</GuipFormItem>
</div>
</div>
</el-form>
</div>
<!-- 报告页seo-->
<div class="flex-common">
<PromptText text="温馨提示：报告页标题不允许使用“知网”、“pmlc”、“amlc”和“smlc”等关键词。" :type="2" class="mb16"/>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" class="mb24" label="报告页标题（T：title）">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="建议80字内">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" label="报告页关键词（K：keyword）">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea">
</GuipInput>
</GuipFormItem>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="报告页描述（D：description）">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea">
</GuipInput>
</GuipFormItem>
</div>
</div>
</el-form>
</div>
<!-- 展示设置-->
<div class="flex-common">
<h3 class="mb16">基础信息</h3>
<PromptText text='温馨提示：服务别名、首页服务广告词和首页服务描述不允许使用"知网"、"pmlc"、"amlc"和"smlc"等关键词。' :type="2" class="mb32"/>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" label="服务别名">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="建议80字内" desc="展示在用户端的服务名称">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" label="服务广告词">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="建议20字内" desc="用来简短概括的解释服务">
</GuipInput>
</GuipFormItem>
<GuipFormItem column="column" label="服务描述">
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea"
desc="用来详细的解释服务">
</GuipInput>
</GuipFormItem>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="服务Logo">
<hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
:hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
hover-text-color="#006AFF"/>
</GuipFormItem>
</div>
</div>
</el-form>
</div>
<div class="flex-common">
<h3>展示开关</h3>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<div class="card-item">
<div class="card-info">
<p class="card-name">首页服务显示</p>
<p class="card-desc">控制首页是否显示本服务</p>
</div>
<el-form>
<GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
</GuipSwitch>
</el-form>
</div>
<div class="card-item">
<div class="card-info">
<p class="card-name">检测页价格展示</p>
<p class="card-desc">本服务检测页面是否展示价格</p>
</div>
<el-form>
<GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
</GuipSwitch>
</el-form>
</div>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<div class="card-item">
<div class="card-info">
<p class="card-name">首页推荐位</p>
<p class="card-desc">开启即上推荐位</p>
</div>
<el-form>
<GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
</GuipSwitch>
</el-form>
</div>
</div>
</div>
</el-form>
</div>
<!-- 页面品牌和颜色-->
<div class="flex-common">
<h3>PC端页面品牌</h3>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" label="提交页Logo上传">
<hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
:hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
hover-text-color="#006AFF"/>
</GuipFormItem>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="报告页Logo上传">
<hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
:hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
hover-text-color="#006AFF"/>
</GuipFormItem>
</div>
</div>
</el-form>
</div>
<div class="flex-common">
<h3 class="mb16">页面色彩</h3>
<PromptText text='操作说明：点击色块可打开调色盘改色，也可直接更改6位色值数据进行改色' :type="1" class="mb32"/>
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
aaa
</div>
<div class="flex-line "></div>
<div class="flex-right">
bbb
</div>
</div>
</el-form>
</div>
<!-- 自定义导航-->
<div class="flex-common">
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" label="首页链接">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="请输入首页链接" desc="您希望用户能找到服务的首页或您自建站点页面">
</GuipInput>
<el-checkbox slot="formDom">同步到本站的其他检测首页项上</el-checkbox>
</GuipFormItem>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="检测服务链接">
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
placeholder="请输入检测服务链接" desc="方便用户快速找到再次检测入口">
</GuipInput>
<el-checkbox slot="formDom">同步到本站的其他检测首页项上</el-checkbox>
</GuipFormItem>
</div>
</div>
</el-form>
</div>
<div class="save-button">
<GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
</div>
<!-- 参数 在子组件页面一样用 props接收 、ref绑定的组件示例 -->
<!-- 默认页面展示 的初始组件 Franchise-->
<component :is="componentsName ? componentsName : 'showSet'" ref="dynamicComponent"
:someProp="payinfo" @customEvent="handleComponentEvent"/>
</div>
</template>
<script>
import PaymentMethod from "@/components/paymentMethod.vue";
import GuipButton from "@/components/GuipButton.vue";
import GuipFormItem from "@/components/GuipFormItem.vue";
import GuipInput from "@/components/GuipInput.vue";
import HoverButton from "@/components/HoverButton.vue";
import GuipSwitch from "@/components/GuipSwitch.vue";
import PromptText from "@/components/PromptText.vue";
import store from '@/store';
import { mapState } from 'vuex';
import GuipSwitch from '@/components/GuipSwitch.vue';
import GuipButton from '@/components/GuipButton.vue';
import HoverButton from '@/components/HoverButton.vue'
import priceSet from '@/components/site/serviceSetting/priceSet.vue'
import paymentSet from '@/components/site/serviceSetting/paymentSet.vue'
import showSet from '@/components/site/serviceSetting/showSet.vue'
import menuColorSet from '@/components/site/serviceSetting/menuColorSet.vue'
import submitSeoSet from '@/components/site/serviceSetting/submitSeoSet.vue'
import reportSeoSet from '@/components/site/serviceSetting/reportSeoSet.vue'
import domainSet from '@/components/site/serviceSetting/domainSet.vue'
import linkSet from '@/components/site/serviceSetting/linkSet.vue'
export default {
// 站点设置
name: '',
// 服务个性化设置
name: 'siteServiceEdit',
props: [''],
components: {
GuipSwitch,
HoverButton,
GuipInput, GuipFormItem,
GuipButton,
PaymentMethod,
PromptText
HoverButton,
priceSet,
paymentSet,
showSet,
menuColorSet,
submitSeoSet,
reportSeoSet,
domainSet,
linkSet,
},
data() {
return {
// AUTH
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
uid:0,
type:0,
payList: [],
//添加按钮样式
saveBtnStyleObj: {
width: '144px',
height: '46px',
borderRadius: '4px',
background: '#006AFF',
},
payinfo: [
{
type: 'a',
name: '传递的参数'
}
],
payType: -1,
payStatus: -1,
paySvg: '',
confirmText: '保存',
}
},
computed: {
...mapState(['pageTitle', 'componentsName']), // 从Vuex映射showSidebar状态到组件的计算属性中
},
created() {
if(!this.$route.query.uid && !this.$route.query.type) {
this.$message.error('非法请求');
this.$router.push('/agent/siteList')
}
this.uid = this.$route.query.uid;
this.type = this.$route.query.type;
store.commit('SET_CUSTOMIZE', true);
store.commit('SET_SLIDER_MENU', 'siteServiceSettingData');
},
mounted() {
this.getPayList()
store.commit('SET_PAGETITLE', '支付授权');
},
methods: {
// 获取支付列表
getPayList() {
const that = this
that.payList = []
this.$http('POST', '/agentnew/ajax_get_service_pay_list', {
uid: that.uid,
type: that.type,
},{
headers:{
'Auth': this.token
}
}).then(response => {
this.$nextTick(() => {
that.payList = response.data.paylist
})
}).catch(error => {
console.error(error, 'error')
})
handleComponentEvent(payload) {
console.log('收到子组件事件:', payload);
},
confirmPayment(payList){
this.payList = payList
submitSave() {
// 逻辑示例
// 获取动态组件实例
const componentInstance = this.$refs.dynamicComponent;
console.log('当前组件实例:', componentInstance);
// 调用组件方法（如果存在）
if (componentInstance) {
console.log('获取到啦');
// 调用方法或者获取参数
componentInstance.showDomainModal && componentInstance.showDomainModal()
}
},
}
}
</script>
<style lang="scss" scoped>
.mb16{
margin-bottom: 16px;
a {
text-decoration: none;
color: #006AFF;
}
.mb32{
margin-bottom: 32px;
.gray {
color: #626573 !important;
}
.pageheader {
display: flex;
justify-content: space-between;
/* 关键属性 */
align-items: center;
margin: 16px 0 16px 0;
.mt-18 {
margin-top: 18px;
}
.pagetitle {
font-size: 18px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.08em;
color: #1E2226;
margin-top: 8px;
.ml-23 {
margin-left: 23px;
}
.flex-common{
margin-bottom: 12px;
.justify-content-space-between {
justify-content: space-between;
}
.notice-text{
display: flex;
align-items: center;
padding: 8px 13px;
align-self: stretch;
z-index: 1;
.beforeNotice {
h4 {
margin: 0;
gap: 8px;
justify-content: space-between;
}
margin-bottom: 18px;
text-align: left;
box-sizing: border-box;
padding: 20px 14px;
border-radius: 4px;
background: #F2F7FF;
border: 1px solid #BFDAFF;
margin-bottom: 32px;
.notice-icon{
width: 16px;
height: 16px;;
margin-right: 8px;
/* middle/middle_grey_0 */
background: #FAFAFA;
div {
margin-top: 2px;
padding-left: 23px;
p {
color: #8A9099;
}
}
span{
p {
color: #1E2226;
letter-spacing: 0.08em;
i {
font-style: normal;
}
&:last-child {
display: flex;
align-items: stretch;
b {
font-weight: normal;
color: #8A9099;
display: inline-flex;
img {
margin-left: 4px;
}
}
}
}
a {
text-decoration: none;
color: #006AFF;
margin-right: 10px;
img {
margin-left: 5px;
margin-right: 5px;
}
}
}
::v-deep .payment-item{
width: 540px;
height: 95px;
padding: 0 24px;
background: #FAFAFA;
.siteMessage {
border-radius: 4px;
border: none;
margin-bottom: 12px;
transition: all .5s;
border: 1px solid transparent;
}
.save-button{
position: fixed;
left: 0;
bottom: 0;
.siteMessage h3 {
font-size: 14px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.08em;
color: #1E2226;
}
.site-setting-wrap {
width: 100%;
background: #fff;
box-shadow: 0 4px 16px 0 rgba(17, 55, 143, 0.12);
display: flex;
align-items: center;
justify-content: center;
padding: 16px 0;
}
::v-deep .mb16{
margin-bottom: 16px;
}
.warning-text{
::v-deep .pageheader {
display: flex;
justify-content: space-between;
/* 关键属性 */
align-items: center;
padding: 8px 13px;
align-self: stretch;
z-index: 1;
border-radius: 4px;
background: #FFF1F0;
border: 1px solid #FFA39E;
margin-bottom: 32px;
.warning-icon{
width: 16px;
height: 16px;;
margin-right: 8px;
}
span{
color: #1E2226;
letter-spacing: 0.08em;
}
margin-bottom: 24px;
}
::v-deep .form-item-bottom{
text-align: left;
::v-deep .pagetitle {
font-size: 18px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.08em;
color: #1E2226;
margin-top: 8px;
}
.card-item{
padding: 24px;
::v-deep .save-button{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background: #fff;
box-shadow: 0 4px 16px 0 rgba(17, 55, 143, 0.12);
display: flex;
align-items: center;
justify-content: space-between;
background: #FAFAFA;
border-radius: 4px;
border: none;
margin-bottom: 12px;
.card-info{
text-align: left;
margin-left: 12px;
font-variation-settings: "opsz" auto;
letter-spacing: 0.08em;
.card-name{
font-size: 14px;
line-height: 18px;
color: #1E2226;
}
.card-desc{
font-size: 12px;
line-height: 13px;
margin-top: 12px;
color: #8A9099;
}
}
.el-form-item{
margin: 0;
}
justify-content: center;
padding: 16px 0;
}
</style>

14
src/views/elementGroups.vue
View File

@ -4,6 +4,20 @@
<PromptText text='这是一个提示框' :type="1"/>
<PromptText text='这是一个提示框' :type="2"/>
<PromptText text='这是一个提示框' :type="3"/>
<PromptText text="前期准备事项" :type="1" class="beforeNotice">
<template #desc>
<p class="mt12 flex">
1. <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F"
class="flex" target="_blank">
<img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
</p>
<p class="mt10 flex">
2. <a href="https://dianjing.e.360.cn/ocpc/list" class="flex" target="_blank">
<img src="@/assets/site/form_linkActive.svg"
alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。
</p>
</template>
</PromptText>
<!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
<el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">

Write Preview
Loading…
Cancel
Save