hookehuyr

feat(ActivitiesCover): 根据设备类型动态调整图片显示模式

添加设备类型检测功能,针对 iPad 类设备使用 widthFix 模式显示图片,普通设备使用 aspectFill 模式
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-19 20:20:21 4 + * @LastEditTime: 2025-09-19 22:53:44
5 * @FilePath: /lls_program/src/pages/ActivitiesCover/index.vue 5 * @FilePath: /lls_program/src/pages/ActivitiesCover/index.vue
6 * @Description: 活动海报页面 - 展示活动信息并处理定位授权 6 * @Description: 活动海报页面 - 展示活动信息并处理定位授权
7 --> 7 -->
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
11 <image 11 <image
12 :src="defaultPoster" 12 :src="defaultPoster"
13 class="background-image" 13 class="background-image"
14 - mode="scaleToFill" 14 + :mode="imageDisplayMode"
15 /> 15 />
16 16
17 <!-- 分享按钮组件 --> 17 <!-- 分享按钮组件 -->
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
132 </template> 132 </template>
133 133
134 <script setup> 134 <script setup>
135 -import { ref, onMounted } from "vue" 135 +import { ref, onMounted, computed } from "vue"
136 import Taro, { useLoad } from '@tarojs/taro' 136 import Taro, { useLoad } from '@tarojs/taro'
137 import "./index.less" 137 import "./index.less"
138 import BottomNav from '../../components/BottomNav.vue' 138 import BottomNav from '../../components/BottomNav.vue'
...@@ -147,6 +147,46 @@ import { THEME_COLORS } from '@/utils/config'; ...@@ -147,6 +147,46 @@ import { THEME_COLORS } from '@/utils/config';
147 147
148 // 默认海报图 148 // 默认海报图
149 const defaultPoster = 'https://cdn.ipadbiz.cn/lls_prog/images/welcome_8.jpg'; 149 const defaultPoster = 'https://cdn.ipadbiz.cn/lls_prog/images/welcome_8.jpg';
150 +
151 +// 系统信息
152 +const systemInfo = ref({});
153 +
154 +/**
155 + * 获取系统信息
156 + */
157 +const getSystemInfo = () => {
158 + try {
159 + const info = Taro.getSystemInfoSync();
160 + systemInfo.value = info;
161 + } catch (error) {
162 + console.error('获取系统信息失败:', error);
163 + }
164 +};
165 +
166 +/**
167 + * 检测是否为 iPad 类型设备
168 + */
169 +const isTabletDevice = computed(() => {
170 + if (!systemInfo.value.screenWidth) {
171 + return false;
172 + }
173 +
174 + const { screenWidth, screenHeight } = systemInfo.value;
175 + const screenRatio = screenWidth / screenHeight;
176 +
177 + // iPad 类型设备通常屏幕比例在 0.7-0.8 之间(4:3 约为 0.75)
178 + // 普通手机设备比例通常在 0.4-0.6 之间
179 + return screenRatio > 0.65;
180 +});
181 +
182 +/**
183 + * 计算图片显示模式
184 + */
185 +const imageDisplayMode = computed(() => {
186 + // iPad 类型设备使用 widthFix 模式,普通设备使用 aspectFill
187 + return isTabletDevice.value ? 'widthFix' : 'aspectFill';
188 +});
189 +
150 /** 190 /**
151 * 活动海报页面组件 191 * 活动海报页面组件
152 * 功能:展示活动信息、处理定位授权、跳转到活动页面 192 * 功能:展示活动信息、处理定位授权、跳转到活动页面
...@@ -908,6 +948,9 @@ useLoad((options) => { ...@@ -908,6 +948,9 @@ useLoad((options) => {
908 948
909 // 页面挂载时检查定位授权状态 949 // 页面挂载时检查定位授权状态
910 onMounted(async () => { 950 onMounted(async () => {
951 + // 获取系统信息
952 + getSystemInfo();
953 +
911 initPageData() 954 initPageData()
912 }) 955 })
913 </script> 956 </script>
......