From 4b3098479866b1923309f8368a08a65a1a300d74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=94=B0=E5=B2=A9?= Date: Mon, 21 Jul 2025 10:50:33 +0800 Subject: [PATCH] 1 --- src/api/request.js | 2 +- src/pages/mascot/mascot_select_list.vue | 111 +++++++++++++++++++----- src/pages/me/index.vue | 2 +- 3 files changed, 89 insertions(+), 26 deletions(-) diff --git a/src/api/request.js b/src/api/request.js index b0c4ae38..97a9fb43 100644 --- a/src/api/request.js +++ b/src/api/request.js @@ -8,7 +8,7 @@ const ENV = import.meta.env export const get_base_url = url => { if (ENV.MODE === 'development') { // 开发环境 - return ENV.VITE_APP_BASE_API_Url + return ENV.VITE_APP_BASE_API_Url // H5必须用非https，手机端必须用https // #ifdef H5 const baseUrl = ENV.VITE_APP_BASE_API_Url diff --git a/src/pages/mascot/mascot_select_list.vue b/src/pages/mascot/mascot_select_list.vue index 54038adb..09e0bdc3 100644 --- a/src/pages/mascot/mascot_select_list.vue +++ b/src/pages/mascot/mascot_select_list.vue @@ -13,12 +13,13 @@ - + - + @@ -41,15 +42,17 @@ --> - + - - + + @@ -60,7 +63,8 @@ onMounted, onUnmounted, ref, - reactive + reactive, + computed } from 'vue'; import { queryValidTraMascotInfo, @@ -74,28 +78,68 @@ import { onLoad } from '@dcloudio/uni-app'; + const mascotList = reactive([]) - onLoad(() => { - common.loading() - queryValidTraMascotInfo().then(({ - body - }) => { - Object.assign(mascotList, { - ...body - }) - console.log(mascotList); - common.hideLoading() - }) - }) - const swiperCount = 4; // 总共有4个轮播项 + const windowsInfo = uni.getWindowInfo() + const nowWidth = ref(0); + const swiperCount = 4; // 总轮播项数量 + const TRANSITION_RATIO = 0.3; + // 计算过渡起点（像素值，取整）：屏幕宽度的20%位置 + const TRANSITION_SUM = computed(() => Math.floor(windowsInfo.screenWidth * TRANSITION_RATIO)); + const TRANSITION_START = computed(() => Math.floor(windowsInfo.screenWidth * (1 - TRANSITION_RATIO))); + // 计算过渡终点（像素值，取整）：屏幕宽度的80%位置 + const TRANSITION_END = computed(() => Math.floor(windowsInfo.screenWidth * TRANSITION_RATIO)); + // 第一张图透明度（0、2索引显示） + const btn1Opacity = computed(() => { + + if (initialIndex % 2 === 1) { // 淡入 + console.log('111我淡入淡入'); + if (nowWidth.value <= TRANSITION_START.value) { + return 0; + } else { + return Math.min(1, (nowWidth.value - TRANSITION_START.value) / TRANSITION_SUM.value); + } + } else { // 淡出 + console.log('111我淡出'); + if (nowWidth.value >= TRANSITION_END.value) { + return 1; + } else { + return Math.max(0, 1 - (TRANSITION_END.value - nowWidth.value) / TRANSITION_SUM.value); + } + } + }); + + const btn2Opacity = computed(() => { + return 0; + const initialIndex = swiperIndex.value; + if (initialIndex % 2 === 0) { // 淡入 + console.log('222我淡入'); + if (nowWidth.value <= TRANSITION_START.value) { + return 1; + } else { + return Math.max(0, 1 - (TRANSITION_END.value - nowWidth.value) / TRANSITION_SUM.value); + + } + } else { // 淡出 + console.log('222我淡出'); + if (nowWidth.value >= TRANSITION_END.value) { + return 0; + } else { + return Math.min(1, (nowWidth.value - TRANSITION_START.value) / TRANSITION_SUM.value); + } + } + }); + let swiperIndex = ref(0); // 当前显示第1个（索引0） const isAnimating = ref(false); // 标记动画是否进行中 - const animationfinish = () => { - console.log("动画结束，允许下次点击"); + const animationfinish = ({ + detail + }) => { + swiperIndex.value = detail.current isAnimating.value = false; // 动画结束后重置状态 }; - + // 点击左右切换按钮 const doct_click = (num) => { if (isAnimating.value) return; // 1. 如果动画正在进行，直接忽略点击 isAnimating.value = true; @@ -103,7 +147,13 @@ swiperIndex.value = newIndex; // 更新当前索引 }; - // 选择他 + // 当前宽度 + const transition = ({ + detail + }) => { + nowWidth.value = Math.abs(detail.dx) + } + const select_it = () => { const item = mascotList[swiperIndex.value] common.loading() @@ -130,7 +180,18 @@ common.hideLoading() }) } - + onLoad(() => { + common.loading() + queryValidTraMascotInfo().then(({ + body + }) => { + Object.assign(mascotList, { + ...body + }) + console.log(mascotList); + common.hideLoading() + }) + }) onMounted(() => { }) @@ -234,8 +295,10 @@ margin-top: 20rpx; width: 80%; height: 120rpx; + position: relative; .img { + position: absolute; width: 100%; height: 100%; } diff --git a/src/pages/me/index.vue b/src/pages/me/index.vue index b1a5feb4..49b0eeae 100644 --- a/src/pages/me/index.vue +++ b/src/pages/me/index.vue @@ -25,7 +25,7 @@ - 工号：{{ user_info.userId }} + 工号：{{ user_info.loginName }}