tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
田岩
2025-07-21 10:50:33 +08:00
parent efed1cccf0
commit 4b30984798
3 changed files with 89 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/request.js
+1 -1
View File
@@ -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
src/pages/mascot/mascot_select_list.vue
+87 -24
View File
@@ -13,12 +13,13 @@
</view>
<view class="fl1"></view>
<view class="mascot_div">
<view class="doct_icon left" @click="doct_click(1)">
<view class="doct_icon left" @click="doct_click(-1)">
<view class="doct_icon_div">
<image src="/src/static/images/mascot/btn_left.png" class="img" mode="widthFix"></image>
</view>
</view>
<swiper class="swiper" circular :current="swiperIndex" @animationfinish='animationfinish'>
<swiper class="swiper" circular :current="swiperIndex" @animationfinish='animationfinish'
@transition="transition">
<swiper-item class="" v-for="(item, index) in mascotList" :key="index">
<view class="swiper-item-div">
<!-- <image src="@/static/images/mascot/ma_1.png" class="img" mode="widthFix"></image> -->
@@ -41,15 +42,17 @@
</view>
</swiper-item> -->
</swiper>
<view class="doct_icon right" @click="doct_click(-1)">
<view class="doct_icon right" @click="doct_click(1)">
<view class="doct_icon_div">
<image src="/src/static/images/mascot/btn_right.png" class="img" mode="widthFix"></image>
</view>
</view>
</view>
<view class="button_div">
<image src="@/static/images/mascot/btn_2.png" class="img" mode="aspectFit" @click="select_it()"></image>
<image src="@/static/images/mascot/btn_1.png" class="img" mode="aspectFit"
@click="select_it()"></image>
<!-- <image :style="{ opacity: btn2Opacity }" src="@/static/images/mascot/btn_2.png" class="img" mode="aspectFit"
@click="select_it()"></image> -->
</view>
<view class="fl1"></view>
</view>
@@ -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%;
}
src/pages/me/index.vue
+1 -1
View File
@@ -25,7 +25,7 @@
</image>
</view>
</view>
<view class="work_number_div">工号：{{ user_info.userId }}</view>
<view class="work_number_div">工号：{{ user_info.loginName }}</view>
<view class="fl1"></view>
</view>
</view>