<template>
<view class="page-container">
<!-- 打开弹框的按钮 -->
<!-- 遮罩层 -->
<view class="mask" v-if="localShow" @click="hideDialog"></view>
<!-- 弹框 -->
<view class="dialog" :class="{ 'dialog-show': localShow }">
<view class="dialog-content">
<view class="dialog-header">
<text class="dialog-title">提示</text>
<text class="close-icon" @click="hideDialog">×</text>
</view>
<!-- 内容区 -->
<view >
<text>申请提前结束考核,您的入职考核结束时间=申请审批通过的时间。考核结束后的已缴费订单将都不再计入考核结果,是否确认提前结束考核?</text>
</view>
<view class="sec">
<view class="inComeList" v-if="filteredActions">
<inComeItem
v-for="(item, index) in filteredActions"
:key="item.settleMonth"
:lastDom="index == filteredActions.length - 1"
:data="item"
/>
</view>
<view class="button-group">
<button class="dialog-button" >取消</button>
<button class="dialog-button">确认</button>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import inComeItem from "../inComeItem/index.vue";
export default {
components: {
inComeItem,
},
props: {
showDialog: {
type: Boolean,
default: false,
},
showModel: {
type: Boolean,
default: false,
},
},
watch: {
showModel(newVal) {
// 监听父组件数据变化
this.localShow = newVal;
},
},
data() {
return {
localShow: this.showDialog, // 本地副本
// 返回假数据
filteredActions: []
};
},
created() {
console.log("============onload===========", this.showDialog)
},
onload() {
console.log("============onload===========", this.showDialog)
this.getConfirmApply();
},
methods: {
async getConfirmApply(){
const { data } = await uni.$u.http.get("/app/staffAssess/getConfirmApply");
console.log("APP-查询提前结束审批信息",data)
},
// 隐藏弹框
hideDialog() {
this.localShow = false;
this.$emit("update:show-model", false); // 通知父组件更新
},
},
};
</script>
<style lang="scss" scoped>
.page-container {
padding: 20rpx;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
color: #0d0d0d;
background: #f3f5f8;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
}
.dialog {
position: fixed;
bottom: -100%;
left: 0;
width: 100%;
height: calc(100% * 2 / 3);
transition: bottom 0.3s ease;
z-index: 999;
display: flex;
justify-content: center;
align-items: flex-end;
// bottom: 0;
}
.dialog-show {
bottom: 0;
}
.dialog-content {
background-color: #fff;
width: 100%;
height: 100%;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
padding: 30rpx;
box-sizing: border-box;
}
.dialog-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #ccc;
}
.dialog-title {
font-size: 32rpx;
font-weight: normal;
text-align: center;
flex: 1;
}
.close-icon {
font-size: 36rpx;
cursor: pointer;
}
.radio-group {
margin-top: 60rpx;
}
.radio-item {
display: flex;
align-items: center;
margin-bottom: 10rpx;
font-size: 28rpx;
}
.radio-item radio {
transform: scale(0.6);
}
.audit-status {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25rpx;
padding: 15rpx;
padding-top: 30rpx;
background-color: rgba(245, 246, 249, 1);
border-radius: 15rpx;
}
.status-label {
font-size: 28rpx;
}
.status-value {
display: flex;
font-size: 28rpx;
}
.audit-text {
color: #d01212;
}
.audit-date {
color: #666;
margin-top: 10rpx;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
color: #0d0d0d;
}
.dialog-footer {
padding-top: 20rpx;
text-align: center;
margin-top: 25rpx !important;
}
/deep/.next-button {
width: 80%;
padding: 10rpx;
background-color: rgba(12, 195, 199, 1) !important;
border: none !important;
color: #fff !important;
border-radius: 15rpx;
font-size: 30rpx;
}
.titleName {
margin-top: 40rpx;
}
.radioName {
margin-top: 40rpx;
}
/* 添加按钮组样式 */
.button-group {
display: flex; /* 使用 Flex 布局 */
justify-content: space-between; /* 按钮之间平均分配空间 */
margin-top: 40rpx; /* 顶部间距 */
gap: 20rpx; /* 按钮之间的间隙 */
}
/* 按钮样式 */
.dialog-button {
flex: 1; /* 每个按钮平分可用空间 */
height: 80rpx;
line-height: 80rpx;
background-color: rgba(12, 195, 199, 1);
color: white;
border-radius: 15rpx;
font-size: 30rpx;
border: none;
}
</style>
<template>
<view class="page-container">
<!-- 打开弹框的按钮 -->
<!-- 遮罩层 -->
<view class="mask" v-if="localShow" @click="hideDialog"></view>
<!-- 弹框 -->
<view class="dialog" :class="{ 'dialog-show': localShow }">
<view class="dialog-content">
<view class="dialog-header">
<text class="dialog-title">提示</text>
<text class="close-icon" @click="hideDialog">×</text>
</view>
<!-- 内容区 -->
<view >
<text>申请提前结束考核,您的入职考核结束时间=申请审批通过的时间。考核结束后的已缴费订单将都不再计入考核结果,是否确认提前结束考核?</text>
</view>
<view class="sec">
<view class="inComeList" v-if="filteredActions">
<inComeItem
v-for="(item, index) in filteredActions"
:key="item.settleMonth"
:lastDom="index == filteredActions.length - 1"
:data="item"
/>
</view>
<view class="button-group">
<button class="dialog-button" >取消</button>
<button class="dialog-button">确认</button>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import inComeItem from "../inComeItem/index.vue";
export default {
components: {
inComeItem,
},
props: {
showDialog: {
type: Boolean,
default: false,
},
showModel: {
type: Boolean,
default: false,
},
},
watch: {
showModel(newVal) {
// 监听父组件数据变化
this.localShow = newVal;
},
},
data() {
return {
localShow: this.showDialog, // 本地副本
// 返回假数据
filteredActions: []
};
},
created() {
console.log("============onload===========", this.showDialog)
},
onload() {
console.log("============onload===========", this.showDialog)
this.getConfirmApply();
},
methods: {
async getConfirmApply(){
const { data } = await uni.$u.http.get("/app/staffAssess/getConfirmApply");
console.log("APP-查询提前结束审批信息",data)
},
// 隐藏弹框
hideDialog() {
this.localShow = false;
this.$emit("update:show-model", false); // 通知父组件更新
},
},
};
</script>
<style lang="scss" scoped>
.page-container {
padding: 20rpx;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
color: #0d0d0d;
background: #f3f5f8;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
}
.dialog {
position: fixed;
bottom: -100%;
left: 0;
width: 100%;
height: calc(100% * 2 / 3);
transition: bottom 0.3s ease;
z-index: 999;
display: flex;
justify-content: center;
align-items: flex-end;
// bottom: 0;
}
.dialog-show {
bottom: 0;
}
.dialog-content {
background-color: #fff;
width: 100%;
height: 100%;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
padding: 30rpx;
box-sizing: border-box;
}
.dialog-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #ccc;
}
.dialog-title {
font-size: 32rpx;
font-weight: normal;
text-align: center;
flex: 1;
}
.close-icon {
font-size: 36rpx;
cursor: pointer;
}
.radio-group {
margin-top: 60rpx;
}
.radio-item {
display: flex;
align-items: center;
margin-bottom: 10rpx;
font-size: 28rpx;
}
.radio-item radio {
transform: scale(0.6);
}
.audit-status {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25rpx;
padding: 15rpx;
padding-top: 30rpx;
background-color: rgba(245, 246, 249, 1);
border-radius: 15rpx;
}
.status-label {
font-size: 28rpx;
}
.status-value {
display: flex;
font-size: 28rpx;
}
.audit-text {
color: #d01212;
}
.audit-date {
color: #666;
margin-top: 10rpx;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
color: #0d0d0d;
}
.dialog-footer {
padding-top: 20rpx;
text-align: center;
margin-top: 25rpx !important;
}
/deep/.next-button {
width: 80%;
padding: 10rpx;
background-color: rgba(12, 195, 199, 1) !important;
border: none !important;
color: #fff !important;
border-radius: 15rpx;
font-size: 30rpx;
}
.titleName {
margin-top: 40rpx;
}
.radioName {
margin-top: 40rpx;
}
/* 添加按钮组样式 */
.button-group {
display: flex; /* 使用 Flex 布局 */
justify-content: space-between; /* 按钮之间平均分配空间 */
margin-top: 40rpx; /* 顶部间距 */
gap: 20rpx; /* 按钮之间的间隙 */
}
/* 按钮样式 */
.dialog-button {
flex: 1; /* 每个按钮平分可用空间 */
height: 80rpx;
line-height: 80rpx;
background-color: rgba(12, 195, 199, 1);
color: white;
border-radius: 15rpx;
font-size: 30rpx;
border: none;
}
</style>
onload为啥不执行