You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
1.9 KiB
106 lines
1.9 KiB
1 month ago
|
<template>
|
||
|
|
<view class="page-bottom-btn-container flex">
|
||
|
|
<button
|
||
|
|
class="bottom-btn cancel"
|
||
|
|
:class="{ disabled: disabled }"
|
||
|
|
@click="cancelClick"
|
||
|
|
v-if="showCancel"
|
||
|
|
>
|
||
|
|
{{ cancelTxt }}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button
|
||
|
|
class="bottom-btn PfScMedium primary"
|
||
|
|
:class="{ disabled: disabled }"
|
||
|
|
@click="handleClick"
|
||
|
|
>
|
||
|
|
{{ text }}
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'PageBottomBtn',
|
||
|
|
props: {
|
||
|
|
text: {
|
||
|
|
type: String,
|
||
|
|
default: '确认选择'
|
||
|
|
},
|
||
|
|
cancelTxt: {
|
||
|
|
type: String,
|
||
|
|
default: '取消'
|
||
|
|
},
|
||
|
|
disabled: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
showCancel: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClick() {
|
||
|
|
if (!this.disabled) this.$emit('click')
|
||
|
|
},
|
||
|
|
cancelClick() {
|
||
|
|
if (!this.disabled) this.$emit('cancelClick')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.page-bottom-btn-container {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
padding: 0rpx 54rpx;
|
||
|
|
box-shadow: 0px -2rpx 6rpx 0rpx rgba(181, 181, 181, 0.1319);
|
||
|
|
z-index: 9;
|
||
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
||
|
|
column-gap: 50rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottom-btn {
|
||
|
|
height: 92rpx;
|
||
|
|
width: 100%;
|
||
|
|
margin: 16rpx 0;
|
||
|
|
line-height: 92rpx;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
font-size: 32rpx;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
border: none;
|
||
|
|
padding: 0;
|
||
|
|
&.primary{
|
||
|
|
background-color: #39D067;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
&.cancel{
|
||
|
|
background-color: #F1F2F3;
|
||
|
|
color: #616266;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.disabled {
|
||
|
|
background-color: #CCCCCC;
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|