|
|
@@ -0,0 +1,103 @@
|
|
|
+<template>
|
|
|
+ <view class="popup-mask" v-if="visible" @click="handleClose">
|
|
|
+ <view class="popup-content" @click.stop>
|
|
|
+ <view class="close-btn" @click="handleClose">×</view>
|
|
|
+ <image
|
|
|
+ class="popup-image"
|
|
|
+ :src="imageUrl"
|
|
|
+ mode="widthFix"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'ImagePopup',
|
|
|
+ props: {
|
|
|
+ imageUrl: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ storageKey: {
|
|
|
+ type: String,
|
|
|
+ default: 'version_shown'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.checkAndShowPopup()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ checkAndShowPopup() {
|
|
|
+ const hasShown = uni.getStorageSync(this.storageKey)
|
|
|
+ if (!hasShown) {
|
|
|
+ this.visible = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ this.visible = false
|
|
|
+ uni.setStorage({
|
|
|
+ key: this.storageKey,
|
|
|
+ data: true
|
|
|
+ })
|
|
|
+ this.$emit('close')
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.popup-mask {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.7);
|
|
|
+ z-index: 9999;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .popup-content {
|
|
|
+ position: relative;
|
|
|
+ width: 85%;
|
|
|
+ max-width: 600rpx;
|
|
|
+ background-color: transparent;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .close-btn {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -60rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #999;
|
|
|
+ background-color: rgba(255, 255, 255, 0.9);
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2rpx solid #ddd;
|
|
|
+ z-index: 10;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-image {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
