|
|
|
@ -1,91 +1,134 @@ |
|
|
|
<template> |
|
|
|
<div class="main-content12"> |
|
|
|
<div class="pageheader"> |
|
|
|
<span class="pagetitle">基本设置</span> |
|
|
|
<span class="pagetitle">{{info.type_desc}}-展示设置</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="展示在用户端的服务名称" v-model="info.title"> |
|
|
|
</GuipInput> |
|
|
|
</GuipFormItem> |
|
|
|
<GuipFormItem column="column" label="服务广告词"> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%" |
|
|
|
placeholder="建议20字内" desc="用来简短概括的解释服务" v-model="info.subtitle"> |
|
|
|
</GuipInput> |
|
|
|
</GuipFormItem> |
|
|
|
<GuipFormItem column="column" label="服务描述"> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea" |
|
|
|
desc="用来详细的解释服务" v-model="info.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> |
|
|
|
<template v-if="!saveSuccess"> |
|
|
|
<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="展示在用户端的服务名称" v-model="info.title"> |
|
|
|
</GuipInput> |
|
|
|
</GuipFormItem> |
|
|
|
<GuipFormItem column="column" label="服务广告词"> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%" |
|
|
|
placeholder="建议20字内" desc="用来简短概括的解释服务" v-model="info.subtitle"> |
|
|
|
</GuipInput> |
|
|
|
</GuipFormItem> |
|
|
|
<GuipFormItem column="column" label="服务描述"> |
|
|
|
<GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea" |
|
|
|
desc="用来详细的解释服务" v-model="info.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> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
</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 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 :modelValue="info.is_index_display" :active-value="1" :inactive-value="0" |
|
|
|
activeText="开启" inactiveText="关闭" @change="onSwitchChange('is_index_display')"> |
|
|
|
</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 :modelValue="info.is_display_price" :active-value="1" :inactive-value="0" |
|
|
|
activeText="开启" inactiveText="关闭" @change="onSwitchChange('is_display_price')"> |
|
|
|
</GuipSwitch> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
<el-form> |
|
|
|
<GuipSwitch :modelValue="info.is_index_display" :active-value="1" :inactive-value="0" |
|
|
|
activeText="开启" inactiveText="关闭" @change="onSwitchChange('is_index_display')"> |
|
|
|
</GuipSwitch> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
<div class="card-item"> |
|
|
|
<div class="card-info"> |
|
|
|
<p class="card-name">检测页价格展示</p> |
|
|
|
<p class="card-desc">本服务检测页面是否展示价格</p> |
|
|
|
<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 :modelValue="info.is_recommend" :active-value="1" :inactive-value="0" |
|
|
|
activeText="开启" inactiveText="关闭" @change="onSwitchChange('is_recommend')"> |
|
|
|
</GuipSwitch> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
<el-form> |
|
|
|
<GuipSwitch :modelValue="info.is_display_price" :active-value="1" :inactive-value="0" |
|
|
|
activeText="开启" inactiveText="关闭" @change="onSwitchChange('is_display_price')"> |
|
|
|
</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 :modelValue="info.is_recommend" :active-value="1" :inactive-value="0" |
|
|
|
activeText="开启" inactiveText="关闭" @change="onSwitchChange('is_recommend')"> |
|
|
|
</GuipSwitch> |
|
|
|
</el-form> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<div class="flex-common"> |
|
|
|
<div class="back-area" @click="saveBack"> |
|
|
|
<img src="@/assets/site/back_icon.png" alt=""> |
|
|
|
返回 |
|
|
|
</div> |
|
|
|
<div class="success-area"> |
|
|
|
<img src="@/assets/message_Success.png" alt=""> |
|
|
|
<div>设置保存成功</div> |
|
|
|
</div> |
|
|
|
<div class="pro-list"> |
|
|
|
<div class="pro-item"> |
|
|
|
<img src="@/assets/site/site-web.svg" alt=""> |
|
|
|
<div class="pro-name">PC端预览</div> |
|
|
|
<div class="pro-link"> |
|
|
|
<a :href="info.domain" class="flex" target="_blank"> |
|
|
|
<img src="@/assets/site/form_linkActive.svg" alt=""> |
|
|
|
<span>{{info.domain}}</span> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<div class="pro-desc">点击上方网址访问</div> |
|
|
|
</div> |
|
|
|
<div class="pro-item"> |
|
|
|
<img src="@/assets/site/site-h5.svg" alt=""> |
|
|
|
<div class="pro-name">手机H5预览</div> |
|
|
|
<div class="pro-link"><img src="@/assets/site/kefuTem.png" alt="" class="link-code"></div> |
|
|
|
<div class="pro-desc">微信扫码预览</div> |
|
|
|
</div> |
|
|
|
<div class="pro-item"> |
|
|
|
<img src="@/assets/site/site-mp.svg" alt=""> |
|
|
|
<div class="pro-name">小程序预览</div> |
|
|
|
<div class="pro-link"><img src="@/assets/site/kefuTem.png" alt="" class="link-code"></div> |
|
|
|
<div class="pro-desc">微信扫码预览</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="back-btn" @click="saveBack"> |
|
|
|
返回展示设置 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<div class="save-button"> |
|
|
|
<GuipButton type="primary" :btnstyle="saveBtnStyleObj" @click="saveConfirm">保存</GuipButton> |
|
|
|
@ -112,12 +155,12 @@ export default { |
|
|
|
components: { |
|
|
|
GuipButton, |
|
|
|
GuipInput, PromptText, GuipSwitch, GuipFormItem, HoverButton |
|
|
|
|
|
|
|
}, |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU', |
|
|
|
info:{}, |
|
|
|
saveSuccess: false, |
|
|
|
//添加按钮样式 |
|
|
|
saveBtnStyleObj: { |
|
|
|
width: '144px', |
|
|
|
@ -131,6 +174,9 @@ export default { |
|
|
|
this.info = this.serviceInfo |
|
|
|
}, |
|
|
|
methods:{ |
|
|
|
saveBack(){ |
|
|
|
this.saveSuccess = false |
|
|
|
}, |
|
|
|
onSwitchChange(attr){ |
|
|
|
this.info[attr] = this.info[attr] === 1 ? 0 : 1 |
|
|
|
}, |
|
|
|
@ -141,6 +187,7 @@ export default { |
|
|
|
obj.title = this.info.title |
|
|
|
obj.subtitle = this.info.subtitle |
|
|
|
obj.desc = this.info.desc |
|
|
|
obj.sort_id = this.info.sort_id |
|
|
|
obj.is_display_price = this.info.is_display_price |
|
|
|
obj.is_index_display = this.info.is_index_display |
|
|
|
obj.is_recommend = this.info.is_recommend |
|
|
|
@ -154,6 +201,7 @@ export default { |
|
|
|
if(response.status){ |
|
|
|
that.$message.success('保存成功'); |
|
|
|
that.$emit('saveEvent', that.info) |
|
|
|
// that.saveSuccess = true |
|
|
|
return true; |
|
|
|
} |
|
|
|
that.$message.success(response.info); |
|
|
|
@ -196,4 +244,101 @@ export default { |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.back-area{ |
|
|
|
display: flex; |
|
|
|
font-size: 14px; |
|
|
|
letter-spacing: 0.08em; |
|
|
|
color: #626573; |
|
|
|
line-height: 16px; |
|
|
|
img{ |
|
|
|
width: 16px; |
|
|
|
height: 16px; |
|
|
|
margin-right: 6px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.success-area{ |
|
|
|
font-size: 18px; |
|
|
|
font-weight: bold; |
|
|
|
line-height: 24px; |
|
|
|
letter-spacing: 0.06em; |
|
|
|
color: #1E2226; |
|
|
|
margin-bottom: 52px; |
|
|
|
img{ |
|
|
|
width: 50px; |
|
|
|
height: 50px; |
|
|
|
margin-bottom: 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.pro-list{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
gap: 32px; |
|
|
|
letter-spacing: 0.08em; |
|
|
|
.pro-item{ |
|
|
|
width: 300px; |
|
|
|
height: 293px; |
|
|
|
border-radius: 20px; |
|
|
|
border: 1px solid #DFE2E6; |
|
|
|
padding: 42px 0; |
|
|
|
box-sizing: border-box; |
|
|
|
.pro-name{ |
|
|
|
font-size: 16px; |
|
|
|
font-weight: bold; |
|
|
|
color: #1E2226; |
|
|
|
margin-top: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.pro-link{ |
|
|
|
margin-top: 32px; |
|
|
|
.link-code{ |
|
|
|
width: 80px; |
|
|
|
height: 80px; |
|
|
|
} |
|
|
|
|
|
|
|
a{ |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
font-size: 14px; |
|
|
|
color: #006AFF; |
|
|
|
text-decoration: none; |
|
|
|
img{ |
|
|
|
width: 16px; |
|
|
|
height: 16px; |
|
|
|
vertical-align: middle; |
|
|
|
margin-right: 12px; |
|
|
|
} |
|
|
|
span{ |
|
|
|
width: 200px; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.pro-desc{ |
|
|
|
font-size: 12px; |
|
|
|
color: #8A9099; |
|
|
|
margin-top: 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.back-btn{ |
|
|
|
width: 144px; |
|
|
|
height: 46px; |
|
|
|
border-radius: 4px; |
|
|
|
border: 1px solid #006AFF; |
|
|
|
padding: 14px 2px; |
|
|
|
gap: 6px; |
|
|
|
font-size: 14px; |
|
|
|
text-align: center; |
|
|
|
letter-spacing: 0.08em; |
|
|
|
color: #006AFF; |
|
|
|
box-sizing: border-box; |
|
|
|
margin: 52px auto 0; |
|
|
|
} |
|
|
|
</style> |
