|
|
|
@ -2,17 +2,14 @@ |
|
|
|
<div class="main-content12"> |
|
|
|
<!-- 参数 在子组件页面一样用 props接收 、ref绑定的组件示例 --> |
|
|
|
<!-- 默认页面展示 的初始组件 Franchise--> |
|
|
|
<component :is="componentsName ? componentsName : 'showSet'" ref="dynamicComponent" |
|
|
|
:someProp="payinfo" @customEvent="handleComponentEvent"/> |
|
|
|
<component :is="componentsName ? componentsName : 'priceSet'" ref="dynamicComponent" :key="tableKey" |
|
|
|
:serviceInfo="siteServiceInfo" @saveEvent="handleSaveEvent"/> |
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
<script> |
|
|
|
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' |
|
|
|
@ -27,9 +24,6 @@ export default { |
|
|
|
name: 'siteServiceEdit', |
|
|
|
props: [''], |
|
|
|
components: { |
|
|
|
GuipSwitch, |
|
|
|
GuipButton, |
|
|
|
HoverButton, |
|
|
|
priceSet, |
|
|
|
paymentSet, |
|
|
|
showSet, |
|
|
|
@ -43,6 +37,8 @@ export default { |
|
|
|
return { |
|
|
|
// AUTH |
|
|
|
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU', |
|
|
|
siteServiceInfo:{}, |
|
|
|
tableKey:Date.now(), |
|
|
|
payinfo: [ |
|
|
|
{ |
|
|
|
type: 'a', |
|
|
|
@ -59,132 +55,176 @@ export default { |
|
|
|
...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'); |
|
|
|
|
|
|
|
this.getSiteServiceInfo() |
|
|
|
this.getPayList() |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
store.commit('SET_PAGETITLE', '支付授权'); |
|
|
|
store.commit('SET_PAGETITLE', '服务设置'); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleComponentEvent(payload) { |
|
|
|
handleSaveEvent(payload) { |
|
|
|
console.log('收到子组件事件:', payload); |
|
|
|
}, |
|
|
|
submitSave() { |
|
|
|
// 逻辑示例 |
|
|
|
// 获取动态组件实例 |
|
|
|
const componentInstance = this.$refs.dynamicComponent; |
|
|
|
console.log('当前组件实例:', componentInstance); |
|
|
|
|
|
|
|
// 调用组件方法（如果存在） |
|
|
|
if (componentInstance) { |
|
|
|
console.log('获取到啦'); |
|
|
|
// 调用方法或者获取参数 |
|
|
|
componentInstance.showDomainModal && componentInstance.showDomainModal() |
|
|
|
} |
|
|
|
getSiteServiceInfo() { |
|
|
|
const that = this |
|
|
|
that.payList = [] |
|
|
|
this.$http('POST', '/agentnew/ajax_get_service_info', { |
|
|
|
uid: that.uid, |
|
|
|
type: that.type, |
|
|
|
},{ |
|
|
|
headers:{ |
|
|
|
'Auth': this.token |
|
|
|
} |
|
|
|
}).then(response => { |
|
|
|
that.$nextTick(() => { |
|
|
|
that.siteServiceInfo = response.data.service_info |
|
|
|
that.siteServiceInfo.paylist = [] |
|
|
|
this.tableKey = Date.now(); |
|
|
|
}) |
|
|
|
}).catch(error => { |
|
|
|
console.error(error, 'error') |
|
|
|
}) |
|
|
|
}, |
|
|
|
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.siteServiceInfo.paylist = response.data.paylist |
|
|
|
that.tableKey = Date.now(); |
|
|
|
}) |
|
|
|
}).catch(error => { |
|
|
|
console.error(error, 'error') |
|
|
|
}) |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
a { |
|
|
|
text-decoration: none; |
|
|
|
color: #006AFF; |
|
|
|
} |
|
|
|
|
|
|
|
.gray { |
|
|
|
color: #626573 !important; |
|
|
|
} |
|
|
|
//a { |
|
|
|
// text-decoration: none; |
|
|
|
// color: #006AFF; |
|
|
|
//} |
|
|
|
// |
|
|
|
//.gray { |
|
|
|
// color: #626573 !important; |
|
|
|
//} |
|
|
|
// |
|
|
|
//.mt-18 { |
|
|
|
// margin-top: 18px; |
|
|
|
//} |
|
|
|
// |
|
|
|
//.ml-23 { |
|
|
|
// margin-left: 23px; |
|
|
|
//} |
|
|
|
// |
|
|
|
//.justify-content-space-between { |
|
|
|
// justify-content: space-between; |
|
|
|
//} |
|
|
|
// |
|
|
|
//.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; |
|
|
|
// /* middle/middle_grey_0 */ |
|
|
|
// background: #FAFAFA; |
|
|
|
// |
|
|
|
// div { |
|
|
|
// margin-top: 2px; |
|
|
|
// padding-left: 23px; |
|
|
|
// |
|
|
|
// p { |
|
|
|
// color: #8A9099; |
|
|
|
// } |
|
|
|
// |
|
|
|
// } |
|
|
|
// |
|
|
|
// p { |
|
|
|
// color: #1E2226; |
|
|
|
// |
|
|
|
// 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; |
|
|
|
// } |
|
|
|
// } |
|
|
|
//} |
|
|
|
|
|
|
|
.mt-18 { |
|
|
|
margin-top: 18px; |
|
|
|
} |
|
|
|
|
|
|
|
.ml-23 { |
|
|
|
margin-left: 23px; |
|
|
|
} |
|
|
|
//.siteMessage { |
|
|
|
// border-radius: 4px; |
|
|
|
// transition: all .5s; |
|
|
|
// border: 1px solid transparent; |
|
|
|
//} |
|
|
|
// |
|
|
|
//.siteMessage h3 { |
|
|
|
// font-size: 14px; |
|
|
|
// font-weight: bold; |
|
|
|
// line-height: normal; |
|
|
|
// letter-spacing: 0.08em; |
|
|
|
// color: #1E2226; |
|
|
|
//} |
|
|
|
// |
|
|
|
//.site-setting-wrap { |
|
|
|
// width: 100%; |
|
|
|
//} |
|
|
|
|
|
|
|
.justify-content-space-between { |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
.beforeNotice { |
|
|
|
|
|
|
|
h4 { |
|
|
|
margin: 0; |
|
|
|
gap: 8px; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
margin-bottom: 18px; |
|
|
|
::v-deep .flex-left{ |
|
|
|
text-align: left; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 20px 14px; |
|
|
|
border-radius: 4px; |
|
|
|
/* middle/middle_grey_0 */ |
|
|
|
background: #FAFAFA; |
|
|
|
|
|
|
|
div { |
|
|
|
margin-top: 2px; |
|
|
|
padding-left: 23px; |
|
|
|
|
|
|
|
p { |
|
|
|
color: #8A9099; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
p { |
|
|
|
color: #1E2226; |
|
|
|
|
|
|
|
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; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.siteMessage { |
|
|
|
border-radius: 4px; |
|
|
|
transition: all .5s; |
|
|
|
border: 1px solid transparent; |
|
|
|
} |
|
|
|
|
|
|
|
.siteMessage h3 { |
|
|
|
font-size: 14px; |
|
|
|
font-weight: bold; |
|
|
|
line-height: normal; |
|
|
|
letter-spacing: 0.08em; |
|
|
|
color: #1E2226; |
|
|
|
} |
|
|
|
|
|
|
|
.site-setting-wrap { |
|
|
|
width: 100%; |
|
|
|
::v-deep .flex-right{ |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .mb16{ |
|
|
|
@ -221,4 +261,14 @@ a { |
|
|
|
padding: 16px 0; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .payment-item{ |
|
|
|
width: 540px; |
|
|
|
height: 95px; |
|
|
|
padding: 0 24px; |
|
|
|
background: #FAFAFA; |
|
|
|
border-radius: 4px; |
|
|
|
border: none; |
|
|
|
margin-bottom: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
