aslan-h5/src/views/BDCenter/policy.vue

100 lines
2.4 KiB
Vue

<template>
<div class="policy-container gradient-background-circles">
<!-- 顶部导航 -->
<GeneralHeader
:title="title"
color="black"
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
/>
<div v-if="userRegion">
<div v-if="userRegion.regionCode == 'SA'">
<img v-smart-img :src="imageUrl('SA_Policy')" alt="Policy Image" class="policy-image" />
</div>
<div v-else>
<img
v-smart-img
v-if="from === 'BDLead'"
:src="imageUrl('BDLeaderPolicy')"
alt="bdleader Policy Image"
class="policy-image"
/>
<img v-smart-img :src="imageUrl('BDPolicy')" alt="bd Policy Image" class="policy-image" />
</div>
</div>
</div>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useLangStore } from '@/stores/lang'
import { getPngUrl } from '@/config/imagePaths.js'
import { getUserId } from '@/utils/userStore.js'
import { getRegionByUserId } from '@/api/wallet.js'
import GeneralHeader from '@/components/GeneralHeader.vue'
const route = useRoute()
const { t, locale } = useI18n()
const langStore = useLangStore()
// 当前语言类型
const currentLangType = computed(() => {
return langStore.selectedLang?.type || 'en'
})
// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('BDCenter/Policy/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
}
const from = ref('') // 上一个页面
const title = ref('') // 页面标题
const userRegion = ref(null) // 区域代码
const updateImages = () => {
from.value = route.query.from || 'BDLead'
if (from.value === 'BD') {
title.value = t('bd_policy')
} else if (from.value === 'BDLead') {
title.value = t('bd_leader_policy')
}
}
// 获取用户所在的区域信息
const apiGetRegionByUserId = async () => {
const response = await getRegionByUserId(getUserId())
if (response.status) {
userRegion.value = response.body
}
}
onMounted(() => {
apiGetRegionByUserId()
updateImages()
})
</script>
<style lang="scss" scoped>
.policy-container {
height: 100vh;
overflow-y: auto;
}
.policy-container::-webkit-scrollbar {
display: none;
}
.policy-image {
display: block;
width: 100vw;
object-fit: cover;
}
</style>