104 lines
2.0 KiB
Vue
104 lines
2.0 KiB
Vue
<template>
|
|
<view class="update-mask" v-if="visible" @click.stop>
|
|
<view class="update-dialog" @click.stop>
|
|
<!-- 非强更时显示关闭按钮 -->
|
|
<text v-if="!forceUpdate" class="close-btn" @click="handleClose">✕</text>
|
|
<image class="update-icon" src="/static/images/ic_update.png" mode="aspectFit" />
|
|
<text class="update-title">有新版本请更新</text>
|
|
<view class="update-btn" @click="handleUpdate">
|
|
<text class="update-btn-text">去更新</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
visible: { type: Boolean, default: false },
|
|
downloadUrl: { type: String, default: '' },
|
|
forceUpdate: { type: Boolean, default: false }
|
|
})
|
|
|
|
const emit = defineEmits(['close'])
|
|
|
|
function handleClose() {
|
|
if (!props.forceUpdate) {
|
|
emit('close')
|
|
}
|
|
}
|
|
|
|
function handleUpdate() {
|
|
if (!props.downloadUrl) return
|
|
// #ifdef APP-PLUS
|
|
plus.runtime.openURL(props.downloadUrl)
|
|
// #endif
|
|
// #ifdef H5
|
|
window.open(props.downloadUrl)
|
|
// #endif
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.update-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.update-dialog {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 560rpx;
|
|
padding: 60rpx 40rpx;
|
|
background-color: #fff;
|
|
border-radius: 24rpx;
|
|
}
|
|
|
|
.close-btn {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 28rpx;
|
|
font-size: 36rpx;
|
|
color: #999;
|
|
padding: 10rpx;
|
|
}
|
|
|
|
.update-icon {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.update-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 48rpx;
|
|
}
|
|
|
|
.update-btn {
|
|
width: 400rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #1A73EC;
|
|
border-radius: 40rpx;
|
|
}
|
|
|
|
.update-btn-text {
|
|
font-size: 30rpx;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|