wangyifang
/
sz-kjsxy-wx-new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

用户报名更新

Browse Source
master
lion 3 months ago
parent 20955e9099
commit 478b171074
3 changed files with 156 additions and 29 deletions
Show Stats Download Patch File Download Diff File

33
components/applyForm/index.vue
Unescape View File

@ -126,7 +126,11 @@
<text class="checkbox-modal__title">{{ currentCheckboxItem.name || '请选择' }}</text> <text class="checkbox-modal__title">{{ currentCheckboxItem.name || '请选择' }}</text>
<text class="checkbox-modal__close" @click="showCheckboxModal = false">完成</text> <text class="checkbox-modal__close" @click="showCheckboxModal = false">完成</text>
</view> </view>
<view class="checkbox-modal__content"> <scroll-view
class="checkbox-modal__content"
scroll-y="true"
:style="{ height: checkboxContentHeight + 'px' }"
>
<checkbox-group @change="(e)=>{checkboxGroupChange(e, currentCheckboxItem)}"> <checkbox-group @change="(e)=>{checkboxGroupChange(e, currentCheckboxItem)}">
<label <label
class="checkbox-modal__item" class="checkbox-modal__item"
@ -141,7 +145,7 @@
<text class="checkbox-modal__label">{{checkboxitem.value}}</text> <text class="checkbox-modal__label">{{checkboxitem.value}}</text>
</label> </label>
</checkbox-group> </checkbox-group>
</view> </scroll-view>
</view> </view>
</u-popup> </u-popup>
</view> </view>
@ -179,6 +183,7 @@
showCheckboxModal: false, showCheckboxModal: false,
currentCheckboxItem: {}, currentCheckboxItem: {},
currentCheckboxIndex: 0, currentCheckboxIndex: 0,
checkboxContentHeight: 400, // 多选弹窗内容区域高度，单位px
// 日期 // 日期
dateShow: false, dateShow: false,
dateParams: { dateParams: {
@ -222,6 +227,7 @@
this.formData = { this.formData = {
token: token token: token
} }
this.calculateCheckboxHeight()
}, },
onLoad() { onLoad() {
@ -327,6 +333,22 @@
this.currentCheckboxItem = item this.currentCheckboxItem = item
this.currentCheckboxIndex = index this.currentCheckboxIndex = index
this.showCheckboxModal = true this.showCheckboxModal = true
this.$nextTick(() => {
this.calculateCheckboxHeight()
})
},
// 计算多选弹窗内容区域高度
calculateCheckboxHeight() {
uni.getSystemInfo({
success: (res) => {
// 屏幕高度的 60%，减去 header 的高度
const maxHeight = res.windowHeight * 0.6
// header 大约 100rpx，转换为 px
const headerHeight = 100 * (res.windowWidth / 750)
// content 高度 = 最大高度 - header - 底部 padding
this.checkboxContentHeight = maxHeight - headerHeight - 80
}
})
}, },
// 多选 // 多选
checkboxGroupChange(e, item) { checkboxGroupChange(e, item) {
@ -850,16 +872,17 @@
} }
&__content { &__content {
max-height: 60vh;
overflow-y: auto;
padding: 20rpx 30rpx 40rpx; padding: 20rpx 30rpx 40rpx;
box-sizing: border-box;
} }
&__item { &__item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 24rpx 0; padding: 24rpx 0;
padding-left: 10rpx; // 增加左侧 padding，确保 checkbox 不被遮挡
border-bottom: 1rpx solid #f5f5f5; border-bottom: 1rpx solid #f5f5f5;
box-sizing: border-box;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
@ -868,12 +891,14 @@
&__control { &__control {
transform: scale(1.1); transform: scale(1.1);
flex-shrink: 0; // 防止 checkbox 被压缩
} }
&__label { &__label {
margin-left: 20rpx; margin-left: 20rpx;
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
flex: 1;
} }
} }

144
components/difference-modal/index.vue
Unescape View File

@ -4,7 +4,11 @@
<view class="difference-modal__header"> <view class="difference-modal__header">
<text class="difference-modal__title">信息差异提示</text> <text class="difference-modal__title">信息差异提示</text>
</view> </view>
<view class="difference-modal__content"> <scroll-view
class="difference-modal__content"
scroll-y="true"
:style="{ height: contentHeight + 'px' }"
>
<text class="difference-modal__tip">您本次提交的信息与过往信息不同，是否更新本次信息？</text> <text class="difference-modal__tip">您本次提交的信息与过往信息不同，是否更新本次信息？</text>
<view class="difference-modal__list"> <view class="difference-modal__list">
<view <view
@ -17,32 +21,42 @@
</view> </view>
<view class="difference-modal__item-content"> <view class="difference-modal__item-content">
<view class="difference-modal__value-row"> <view class="difference-modal__value-row">
<text class="difference-modal__label">原值：</text> <text class="difference-modal__label">原信息：</text>
<text class="difference-modal__value difference-modal__value--old">{{ item.oldValue }}</text> <view class="difference-modal__value difference-modal__value--old">{{ item.oldValue }}</view>
</view> </view>
<view class="difference-modal__value-row"> <view class="difference-modal__value-row">
<text class="difference-modal__label">新值：</text> <text class="difference-modal__label">新信息：</text>
<text class="difference-modal__value difference-modal__value--new">{{ item.newValue }}</text> <view class="difference-modal__value difference-modal__value--new">{{ item.newValue }}</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </scroll-view>
<view class="difference-modal__footer"> <view class="difference-modal__footer">
<u-button <view class="difference-modal__footer-row">
type="default" <u-button
@click="handleChoice(false)" type="default"
:custom-style="{ marginRight: '20rpx', flex: 1 }" @click="handleChoice(false)"
> :custom-style="{ flex: 1 }"
维持原信息 >
</u-button> 维持原信息
<u-button </u-button>
type="primary" <u-button
@click="handleChoice(true)" type="primary"
:custom-style="{ flex: 1 }" @click="handleChoice(true)"
> :custom-style="{ flex: 1 }"
按本次信息更新 >
</u-button> 按本次信息更新
</u-button>
</view>
<view class="difference-modal__footer-row difference-modal__footer-row--center">
<u-button
type="default"
@click="handleChoice('cancel')"
>
返回修改
</u-button>
</view>
</view> </view>
</view> </view>
</u-popup> </u-popup>
@ -61,9 +75,41 @@
default: () => [] default: () => []
} }
}, },
data() {
return {
contentHeight: 400 // 默认高度，单位px
}
},
mounted() {
this.calculateHeight()
},
watch: {
show(newVal) {
if (newVal) {
this.$nextTick(() => {
this.calculateHeight()
})
}
}
},
methods: { methods: {
handleChoice(update) { handleChoice(update) {
this.$emit('choice', update) this.$emit('choice', update)
},
calculateHeight() {
// 使用系统信息计算合适的高度
// 弹框最大高度 80vh，减去 header 和 footer 的高度
uni.getSystemInfo({
success: (res) => {
// 屏幕高度的 70%（减小了 10%）
const maxHeight = res.windowHeight * 0.7
// header 大约 120rpx，footer 大约 200rpx，转换为 px
const headerHeight = 120 * (res.windowWidth / 750)
const footerHeight = 200 * (res.windowWidth / 750)
// content 高度 = 总高度 - header - footer - 额外减少 50px
this.contentHeight = maxHeight - headerHeight - footerHeight - 50
}
})
} }
} }
} }
@ -72,12 +118,19 @@
<style scoped lang="scss"> <style scoped lang="scss">
.difference-modal { .difference-modal {
width: 640rpx; width: 640rpx;
max-height: 80vh; max-width: 640rpx;
max-height: 70vh;
background-color: #fff; background-color: #fff;
border-radius: 14rpx; border-radius: 14rpx;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box;
// 确保所有子元素都使用 border-box
* {
box-sizing: border-box;
}
&__header { &__header {
padding: 40rpx 30rpx 20rpx; padding: 40rpx 30rpx 20rpx;
@ -92,9 +145,9 @@
} }
&__content { &__content {
flex: 1;
padding: 30rpx; padding: 30rpx;
overflow-y: auto; box-sizing: border-box;
width: 100%;
} }
&__tip { &__tip {
@ -102,14 +155,24 @@
color: #666; color: #666;
line-height: 1.6; line-height: 1.6;
margin-bottom: 30rpx; margin-bottom: 30rpx;
word-wrap: break-word;
word-break: break-all;
box-sizing: border-box;
} }
&__list { &__list {
width: 100%;
box-sizing: border-box;
.difference-modal__item { .difference-modal__item {
margin-bottom: 30rpx; margin-bottom: 30rpx;
padding: 20rpx; padding: 20rpx;
background-color: #f8f8f8; background-color: #f8f8f8;
border-radius: 8rpx; border-radius: 8rpx;
box-sizing: border-box;
width: 100%;
max-width: 100%;
overflow: hidden;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -119,19 +182,30 @@
&__item-header { &__item-header {
margin-bottom: 15rpx; margin-bottom: 15rpx;
width: 100%;
box-sizing: border-box;
} }
&__item-name { &__item-name {
font-size: 30rpx; font-size: 30rpx;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
word-wrap: break-word;
word-break: break-all;
} }
&__item-content { &__item-content {
width: 100%;
max-width: 100%;
box-sizing: border-box;
.difference-modal__value-row { .difference-modal__value-row {
display: flex; display: flex;
align-items: center; align-items: flex-start;
margin-bottom: 10rpx; margin-bottom: 10rpx;
width: 100%;
max-width: 100%;
box-sizing: border-box;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -143,11 +217,21 @@
font-size: 26rpx; font-size: 26rpx;
color: #666; color: #666;
width: 100rpx; width: 100rpx;
flex-shrink: 0;
box-sizing: border-box;
} }
&__value { &__value {
font-size: 26rpx; font-size: 26rpx;
flex: 1; flex: 1;
min-width: 0; // 允许 flex 子元素缩小
max-width: 100%;
word-wrap: break-word;
word-break: break-all;
white-space: normal;
line-height: 1.5;
overflow-wrap: break-word;
box-sizing: border-box;
&--old { &--old {
color: #999; color: #999;
@ -161,9 +245,21 @@
&__footer { &__footer {
padding: 30rpx; padding: 30rpx;
padding-bottom:50rpx;
border-top: 1rpx solid #f0f0f0; border-top: 1rpx solid #f0f0f0;
display: flex;
flex-direction: column;
gap: 20rpx;
}
&__footer-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 20rpx;
&--center {
justify-content: center;
}
} }
} }
</style> </style>

8
packages/apply/index.vue
Unescape View File

@ -239,10 +239,16 @@
return false return false
} }
}, },
// 处理用户选择（按本次信息更新/维持原信息） // 处理用户选择（按本次信息更新/维持原信息/返回修改）
async handleDifferenceChoice(update) { async handleDifferenceChoice(update) {
this.showDifferenceModal = false this.showDifferenceModal = false
if (update === 'cancel') {
// 选择"返回修改"，关闭弹窗，解锁，让用户重新修改表单
this.isLocked = false
return
}
if (update) { if (update) {
// 选择"按本次信息更新" // 选择"按本次信息更新"
const success = await this.updateUserInfo() const success = await this.updateUserInfo()

Write Preview
Loading…
Cancel
Save