zq
3 days ago
14 changed files with 968 additions and 480 deletions
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<div> |
|||
|
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
export default { |
|||
name: '', |
|||
props:[], |
|||
components: { |
|||
|
|||
}, |
|||
data(){ |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods:{ |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
|
|||
</style> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -0,0 +1,26 @@ |
|||
<template> |
|||
<div> |
|||
|
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
export default { |
|||
name: '', |
|||
props:[], |
|||
components: { |
|||
|
|||
}, |
|||
data(){ |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods:{ |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
|
|||
</style> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
@ -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> |
|||
Loading…
Reference in new issue