VAVABUY/components/IosUpdateModal.vue

<template>
  <Popup ref="popRef" mode="center" closeOnClickOverlay zIndex="10077">
    <template #content>
      <view class="content">
        <view class="content_success">
          <image src="/static/login.png" class="img"></image>
          <trans _t="新版本"></trans>
        </view>
      </view>
    </template>
    <template #footer>
      <view class="footer">
        <view class="submit_btn submit_shop" @click="close">
          <trans _t="关闭" />
        </view>
        <view class="submit_btn" @click="toUpdate">
          <trans _t="立即升级" />
        </view>
      </view>
    </template>
  </Popup>
</template>

<script setup>
import { ref, watch, computed, nextTick } from "vue";
import Popup from "./popup.vue";
import { t } from "@/locale";
import { useSystemStore } from "@/store";
import { openUrl } from "@/utils";
import { storeToRefs } from "pinia";

const useSystem = useSystemStore();
const { getAppinfo: appinfo } = storeToRefs(useSystem);
const popRef = ref(null);

const open = () => {
  popRef.value && popRef.value.open();
};

const close = () => {
  popRef.value && popRef.value.close();
};
const toUpdate = () => {
  openUrl(appinfo.value?.url);
  close();
};

watch(
  appinfo,
  (newVal) => {
    if (newVal.update) {
      // #ifdef APP-PLUS
      const systemInfo = uni.getSystemInfoSync();
      if (systemInfo.platform === "ios") {
        nextTick(() => {
          open();
        });
      }
      // #endif
    } else {
      close();
    }
  },
  {
    immediate: true, // 初始化时立即执行一次
    deep: true, // 监听深层属性变化（如 appinfo.value.url 变化）
  }
);
defineExpose({ open, close });
</script>

<style lang="less" scoped>
@import url("@/style.less");

:deep(.conts) {
  min-width: 78vw;
}

.content {
  flex: 1;
  .flex_center();

  &_success {
    .flex_center();
    flex-direction: column;
    gap: 20rpx;
  }

  .img {
    width: 120rpx;
    height: 120rpx;
  }
}

.footer {
  .flex_position(space-between);

  .submit_btn {
    height: 76rpx;
    line-height: 76rpx;
    padding: 0 30rpx;
    background-color: var(--black);
    color: var(--light);
    .flex_center();
    border-radius: 16rpx;
    .size(24rpx);

    &.submit_shop {
      background-color: var(--bg);
      border: 1rpx solid var(--black);
      color: var(--black);
    }
  }
}
</style>