132 lines
2.3 KiB
Vue
132 lines
2.3 KiB
Vue
<template>
|
|
<view class="update-modal" v-if="show" @tap.stop="handleMaskClick">
|
|
<view class="modal-content" @tap.stop>
|
|
<!-- 版本号标题 -->
|
|
<view class="version-title">发现新版本 {{ version }}</view>
|
|
|
|
<!-- 更新内容 -->
|
|
<view class="update-content">
|
|
<text class="content-text">{{ updateContent }}</text>
|
|
</view>
|
|
|
|
<!-- 按钮区域 -->
|
|
<view class="button-area">
|
|
<view class="cancel-btn" v-if="!forceUpdate" @tap="handleCancel">稍后再说</view>
|
|
<view class="confirm-btn" @tap="handleConfirm">立即更新</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'UpdateModal',
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
version: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
updateContent: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
downloadUrl: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
forceUpdate: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
methods: {
|
|
handleMaskClick() {
|
|
// 强制更新时，点击遮罩不关闭
|
|
if (!this.forceUpdate) {
|
|
this.handleCancel();
|
|
}
|
|
},
|
|
handleCancel() {
|
|
this.$emit('cancel');
|
|
},
|
|
handleConfirm() {
|
|
this.$emit('confirm', this.downloadUrl);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.update-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
|
|
.modal-content {
|
|
width: 600rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 24rpx;
|
|
overflow: hidden;
|
|
|
|
.version-title {
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
padding: 60rpx 40rpx 40rpx;
|
|
}
|
|
|
|
.update-content {
|
|
max-height: 600rpx;
|
|
padding: 0 40rpx 40rpx;
|
|
overflow-y: auto;
|
|
|
|
.content-text {
|
|
font-size: 28rpx;
|
|
line-height: 44rpx;
|
|
color: #666666;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
|
|
.button-area {
|
|
display: flex;
|
|
border-top: 1px solid #eeeeee;
|
|
|
|
.cancel-btn,
|
|
.confirm-btn {
|
|
flex: 1;
|
|
height: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.cancel-btn {
|
|
color: #999999;
|
|
border-right: 1px solid #eeeeee;
|
|
}
|
|
|
|
.confirm-btn {
|
|
color: #007aff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|