13 changed files with 385 additions and 84 deletions
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
@ -0,0 +1,90 @@ |
|||
<template> |
|||
<div class="prompt-text" :class="typeClass"> |
|||
<img class="prompt-icon" :src="typeIcon" alt=""> |
|||
<span class="prompt-desc">{{text}}</span> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
|
|||
export default { |
|||
name: 'PromptText', |
|||
props: { |
|||
text: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
type: { |
|||
type: [Number, String], |
|||
default: 2 |
|||
}, |
|||
}, |
|||
components: { |
|||
}, |
|||
data(){ |
|||
return{} |
|||
}, |
|||
computed: { |
|||
typeClass() { |
|||
switch (parseInt(this.type)) { |
|||
case 1: return 'info'; |
|||
case 2: return 'notice'; |
|||
case 3: return 'warning'; |
|||
default: return 'notice'; |
|||
} |
|||
}, |
|||
typeIcon() { |
|||
switch (parseInt(this.type)) { |
|||
case 1: return require('@/assets/site/prompt-icon-1.svg'); |
|||
case 2: return require('@/assets/site/prompt-icon-2.svg'); |
|||
case 3: return require('@/assets/site/prompt-icon-3.svg'); |
|||
default: return require('@/assets/site/prompt-icon-2.svg'); |
|||
} |
|||
} |
|||
}, |
|||
methods:{ |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.info{ |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 8px 13px; |
|||
align-self: stretch; |
|||
z-index: 1; |
|||
border-radius: 4px; |
|||
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; |
|||
} |
|||
.prompt-icon{ |
|||
width: 16px; |
|||
height: 16px;; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.prompt-desc{ |
|||
color: #1E2226; |
|||
letter-spacing: 0.08em; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,180 @@ |
|||
<template> |
|||
<div class="main-content12"> |
|||
<!-- 参数 在子组件页面一样用 props接收 、ref绑定的组件示例 --> |
|||
<!-- 默认页面展示 的初始组件 Franchise--> |
|||
<component :is="componentsName ? componentsName : 'Franchise'" ref="dynamicComponent" |
|||
:someProp="payinfo" @customEvent="handleComponentEvent"/> |
|||
<GuipButton @click="submitSave" size="superBig">->点这里测试、获取参数、调用方法</GuipButton> |
|||
</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 Franchise from '@/views/Franchise.vue' |
|||
import Franchise1 from '@/views/Franchise.vue' |
|||
import Register from '@/views/Register.vue' |
|||
export default { |
|||
// 收款方式设置 |
|||
name: '', |
|||
props: [''], |
|||
components: { |
|||
GuipSwitch, |
|||
GuipButton, |
|||
HoverButton, |
|||
Franchise, |
|||
Franchise1, |
|||
Register, |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
// AUTH |
|||
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU', |
|||
payinfo: [ |
|||
{ |
|||
type: 'a', |
|||
name: '传递的参数' |
|||
} |
|||
], |
|||
payType: -1, |
|||
payStatus: -1, |
|||
paySvg: '', |
|||
confirmText: '保存', |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['pageTitle', 'componentsName']), // 从Vuex映射showSidebar状态到组件的计算属性中 |
|||
}, |
|||
created() { |
|||
store.commit('SET_CUSTOMIZE', true); |
|||
store.commit('SET_SLIDER_MENU', 'demoPageData'); |
|||
}, |
|||
mounted() { |
|||
store.commit('SET_PAGETITLE', '支付授权'); |
|||
}, |
|||
methods: { |
|||
handleComponentEvent(payload) { |
|||
console.log('收到子组件事件:', payload); |
|||
}, |
|||
submitSave() { |
|||
// 逻辑示例 |
|||
// 获取动态组件实例 |
|||
const componentInstance = this.$refs.dynamicComponent; |
|||
console.log('当前组件实例:', componentInstance); |
|||
|
|||
// 调用组件方法（如果存在） |
|||
if (componentInstance) { |
|||
console.log('获取到啦'); |
|||
// 调用方法或者获取参数 |
|||
componentInstance.showDomainModal && componentInstance.showDomainModal() |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
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; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.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%; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue