index.vue

<template>
  <view class="h-page">
    <view class="p-t">
      <image src="../../static/common/version_bg.png" style="width: 750rpx;height: 334rpx;" mode=""></image>
      <view class="p-t-inner">
        <image src="../../static/common/version_logo.png" style="width: 116rpx;height: 116rpx" mode=""></image>
        <text class="p-text">{{ t('app.title.appTips') }}</text>
      </view>
    </view>

    <view class="p-c">
      <!-- <view class="p-c-item" @tap="handleUpdateApp"> -->
      <view class="p-c-item" @tap="handleUpdateApp">
        <view class="p-c-item-title">{{ t('app.common.versionUpdate') }}</view>
        <!-- #ifdef APP-PLUS -->
        <view class="needs-update" v-if="needsUpdate"></view>
        <!-- #endif -->

        <view class="p-c-item-desc">v{{currentVersion}}</view>
        <uv-icon name="arrow-right" v-if="needsUpdate" size="22rpx" color="#90949D"></uv-icon>
      </view>
    </view>

    <view class="copyright">{{ copyRightText }}</view>
  </view>
</template>

<script setup>
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    compareVersions
  } from '@/utils'
  import {
    computed,
    ref
  } from 'vue'
  import {
    t,initI18n
  } from '@/plugins/index.js'

  import appUpdate from '@/uni_modules/wczd-app-update/js_sdk/app-update.js'

  const copyRightText = computed(()=>{
    // #ifdef APP-PLUS
    return t('app.common.rightsReserved').replace('{company}',t('login.companyName'))
    // #endif
    return t('app.common.rightsReserved',{ company:t('login.companyName') })
  })

const updatePopupParam =(()=>{
  const findNewVersion = 'TaskNotice.haveNewVersion'
  const immediatelyUpgrade = 'TaskNotice.updateNow'
  const temporarilyUpgrade = 'TaskNotice.noUpdate'
  const versionUpdate = 'app.common.versionUpdate'
  return {
    findNewVersion,
    immediatelyUpgrade,
    temporarilyUpgrade,
    versionUpdate,
  }
})
const handleUpdateApp = () => {
    const param = updatePopupParam()
    if (needsUpdate.value) {
      // #ifdef APP-PLUS
      // 需要传入 发现新版本 立即升级 暂不升级 版本更新 的国际化字段
      appUpdate({
        ...updateInfo.value,
        ...param,
      })
      // #endif
    }
  }

  const updateInfo = ref({})
  const currentVersion = ref('0.0.0')
  const needsUpdate = ref(false)
  onLoad(() => {
    initI18n();
    uni.setNavigationBarTitle({
      title: t('app.common.versionDescription')
    })
    const systemInfo = uni.getSystemInfoSync()
    currentVersion.value = systemInfo.appWgtVersion || systemInfo.appVersion || '0.0.0'
    uni.request({
      url: 'https://retail.europe.vion-cloud.com/report/app/lastest/version',
      method: 'GET',
      header: {
        'Authorization': uni.getStorageSync('Authorization')
      },
      success(response) {
        const res = response.data
        if (res.code === 200) {
          const systemInfo = uni.getSystemInfoSync()
          const data = res.data || {}

          // 接口版本大于当前版本 显示小红点
          needsUpdate.value = compareVersions(data.version, currentVersion.value) > 0
          const downUrlMap = {
            // 'android': 'https://store.keliuyun.com/download/app/vStore.apk',
            'android': 'https://retail.europe.vion-cloud.com/download/app/CVA_YAP.apk',
            'ios': 'https://apps.apple.com/cn/app/id6752882316', // vstore
          }

          updateInfo.value = {
            platform: systemInfo.platform, // 'android' || 'ios'
            updateContent: data.remark,
            downUrl: downUrlMap[systemInfo.platform] || '',
            version: data.version,
            force: !!data.isForce,
            mainColor: '387CF5',
          }
        }
      }
    })
  })
</script>

<style lang="scss" scoped>
  @import '@/styles/col.scss';

  .h-page {
    /* #ifndef H5 */
    min-height: 100vh;
    /* #endif */
    /* #ifdef H5 */
    min-height: calc(100vh - 44px);
    /* #endif */
    background-color: #F2F3F6;

    .p-t {
      margin-bottom: 94rpx;
      position: relative;

      .p-t-inner {
        position: absolute;
        left: 0;
        top: 0;
        width: 750rpx;
        height: 334rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .p-text {
          padding-top: 30rpx;
          font-size: 32rpx;
          color: #fff;
          font-family: DingTalk_JinBuTi!important;
        }
      }
    }

    .p-c {
      border-top: 2rpx solid rgba(225, 228, 234, 0.7);
    }

    .copyright {
      width: 750rpx;
      text-align: center;
      font-size: 22rpx;
      color: #656A72;
      position: fixed;
      left: 0;
      bottom: 22rpx;

    }
  }
</style>