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

中断开发打版本

Browse Source
This commit is contained in:
田岩
2025-11-14 17:51:58 +08:00
parent f9c716f33c
commit 34c6dc63fc
11 changed files with 301 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/points-and-badge/badge.vue
+168 -89
View File
@@ -1,82 +1,104 @@
<template>
<view class="" style="background-color: aqua;">
<uni-popup ref="popup" background-color="rgba(10,10,10, 0.8)" >
<view class="popup-content" @touchmove.stop>
<view class="fl1"></view>
<view class="">
<uni-popup ref="popup" background-color="#222222" :animation="true">
<view class="popup-content" @touchmove.stop :style="{ opacity }">
<view class="max-div">
<view class="popup_back_div" @click="close">
<image :src="optionErrorIcon('#C8BBB7')" class="img"></image>
</view>
<view class="title_div">
<image class="img" src="@/static/images/pointsAndRank/badge-wheat-left.png"></image>
<view class="title">恭喜你获得新徽章</view>
<image class="img" src="@/static/images/pointsAndRank/badge-wheat-right.png"></image>
</view>
<view class="points-div">
<view class="doct_icon" @click="doct_click(-1)">
<view class="doct_icon_div left">
<image :src="arrowRightIcon('#D88F50')" class="img" mode="widthFix"></image>
<view class="doct_icon left" @click="doct_click(-1)">
<view class="doct_icon_div">
<view class="fl1"></view>
<uv-icon size="28" color="#999999" name="arrow-left"></uv-icon>
</view>
</view>
<swiper class="swiper">
<swiper-item class="swiper-item-div">
<image src="@/static/images/test/xz.png" class="img"></image>
</swiper-item>
<swiper-item class="swiper-item-div">
<image src="@/static/images/test/xz.png" class="img"></image>
<!-- // <image-preview :src="item.imgAddr" class="img" mode="widthFix"></image-preview> -->
<swiper class="swiper" :current="current">
<swiper-item class="swiper-item-div" v-for="item in badgesList">
<view class="img-div">
<image-preview :src="item.pointsBadgeImg" class="img" mode="aspectFit"></image-preview>
</view>
<view class="points-msg-div">{{ item.pointsBadgeName }}</view>
</swiper-item>
</swiper>
<view class="doct_icon" @click="doct_click(1)">
<view class="doct_icon_div right">
<image :src="arrowRightIcon('#D88F50')" class="img" mode="widthFix"></image>
<view class="doct_icon right" @click="doct_click(1)">
<view class="doct_icon_div">
<uv-icon size="28" color="#999999" name="arrow-right"></uv-icon>
<view class="fl1"></view>
</view>
</view>
<!-- <view class="points-img-div">
<image-preview :src="nowImgSrc"></image-preview>
</view> -->
</view>
<view class="button-div">
<uv-button
class="button"
text="领取"
loadingText="签到中"
:text="multiple ? '一起收下' : '开心收下'"
:custom-style="customStyle"
:color="buttonColor"
@click="checkIn"
@click="clickFun(true)"
></uv-button>
</view>
</view>
<view class="fl1"></view>
</view>
</uni-popup>
</view>
</template>
<script setup>
import { ref, computed } from 'vue';
import { ref, computed, onUnmounted } from 'vue';
import { optionErrorIcon, optionSuccessIcon } from '@/common/imgSvg';
import { addPointsByCheckIn, queryCheckIn } from '@/api/pointsAndRank.js';
import common from '@/common/common';
import { arrowRightIcon } from '@/common/imgSvg';
import { nextTick } from 'process';
const popup = ref(null);
const nowImgSrc = ref('');
const current = ref(0);
const opacity = ref(1);
const badgesList = ref([]);
const pointsList = ref([]);
const multiple = computed(() => badgesList.value.length > 1);
const buttonColor = 'linear-gradient( 270deg, #E0914A 0%, #EDBE7F 100%)';
const buttonColor = 'linear-gradient( 270deg, #F81758 0%, #FFA062 100%)';
const customStyle = {
borderRadius: '40rpx' //圆角
borderRadius: '40rpx'
};
const emits = defineEmits(['checkInFun']);
const doct_click = (step) => {
// 计算新索引
let newIndex = current.value + step;
// 获取最大索引（注意：如果有 n 个滑块，最大索引是 n-1）
const maxIndex = badgesList.value.length - 1;
// 限制索引在 0 到 maxIndex 之间
if (newIndex < 0) {
newIndex = 0;
} else if (newIndex > maxIndex) {
newIndex = maxIndex;
}
console.log('current.value', current.value);
// 更新当前索引
current.value = newIndex;
};
const emits = defineEmits(['confirm']);
// 退出签到
const close = () => {
popup.value.close();
uni.showTabBar({
success() {
opacity.value = 0;
nextTick(() => {
popup.value.close();
});
}
});
};
// 点击
const clickFun = (status = true) => {
emits('confirm', status, pointsList.value, badgesList.value, () => {});
};
const open = (points = [], badges = []) => {
@@ -84,70 +106,138 @@
console.error('badges 不是有效的数组或为空');
return;
}
console.log('badges', badges);
badgesList.value = badges;
pointsList.value = points;
popup.value.open();
// popup.value.open();
uni.hideTabBar({
success() {
opacity.value = 1;
console.log('成功');
popup.value.open('center');
}
});
};
onUnmounted(() => {
uni.showTabBar({
success() {}
});
});
defineExpose({ open, close });
</script>
<style scoped lang="scss">
.points-div {
// width: 100%;
width: 100%;
display: flex;
position: relative;
align-items: center;
justify-content: center;
justify-content: space-between;
.swiper {
height: 400rpx;
width: 520rpx;
height: 660rpx;
flex: 1;
margin: 0 50rpx;
.swiper-item-div {
/* 父容器只需居中对齐，无需设置背景图 */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-image: url('@/static/images/pointsAndRank/fs.png');
background-size: 110% 110%; /* 背景图比img大10% */
background-position: center; /* 背景图居中 */
background-repeat: no-repeat; /* 禁止背景图重复 */
flex-direction: column;
.img {
/* 1. 缩放img（根据需要调整宽高，这里缩到原来的80%左右示例） */
width: 300rpx;
height: 270rpx;
transform: scale(0.8);
.points-msg-div {
position: absolute;
bottom: -30rpx;
}
.img-div {
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 2rpx solid #2d2d2d; /* 中间圆环颜色 */
border-radius: 50%;
width: 400rpx;
height: 400rpx;
&::before {
z-index: 1;
content: '';
position: absolute;
width: 100%;
height: 100%;
border: 2rpx solid #2d2d2d; /* 圆环颜色和粗细 */
border-radius: 50%; /* 圆形 */
transform: scale(0.85);
}
&::after {
z-index: 1;
content: '';
position: absolute;
width: 100%;
height: 100%;
border: 4rpx solid #2d2d2d; /* 中间圆环颜色 */
border-radius: 50%;
transform: scale(0.75);
}
.img {
position: relative;
z-index: 999;
width: 408rpx;
height: 408rpx;
}
}
}
}
.doct_icon {
width: 220rpx;
height: 220rpx;
padding: 0%;
display: flex;
background-color: #2d2d2d;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 999;
.doct_icon_div {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
justify-content: space-around;
width: 60%;
// background-color: red;
}
.left {
transform: rotate(180deg);
&.left {
left: 0;
transform: translateX(-50%);
}
width: 8vw;
&.right {
right: 0;
transform: translateX(50%);
}
// width: 8vw;
display: flex;
align-items: center;
flex-direction: column;
}
}
.points-msg-div {
height: 120rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 36rpx;
color: #dec38c;
line-height: 120rpx;
text-align: center;
font-style: normal;
}
.button-div {
height: 92rpx;
height: 80rpx;
width: 442rpx;
margin: 34rpx auto 0 auto;
.button {
width: 100%;
height: 100%;
margin: 74rpx auto 0 auto;
::v-deep .uv-button__text {
font-size: 34rpx !important;
}
::v-deep .uv-button {
height: 90rpx;
width: 442rpx;
}
}
.continuous-check-in-div {
@@ -180,7 +270,6 @@
align-items: center;
justify-content: center;
margin-top: 54rpx;
margin-bottom: 24rpx;
height: 68rpx;
.img {
width: 26rpx;
@@ -189,22 +278,18 @@
.title {
font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
font-weight: bold;
font-size: 36rpx;
color: #d88f50;
margin: 0rpx 30rpx;
text-align: center;
}
}
.popup_back_div {
width: 60rpx;
height: 60rpx;
position: absolute;
top: 20rpx;
right: 20rpx;
.img {
margin: 10rpx;
width: 40rpx;
height: 40rpx;
font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
font-weight: bold;
font-size: 46rpx;
background: linear-gradient(0deg, #ffe5b7 0%, #cc716d 100%);
/* 将背景裁剪为文字形状 */
-webkit-background-clip: text;
background-clip: text;
/* 将文字本身颜色设为透明（显示背景渐变） */
color: transparent;
}
}
@@ -216,17 +301,11 @@
flex-direction: column;
align-items: center;
// padding: 40rpx 0;
}
.max-div {
// max-width: 400rpx;
// width: 80vw;
background-color: #fefbfa;
border-radius: 38rpx;
width: 100%;
position: relative;
// padding: 26rpx;
overflow: hidden;
margin-top: var(--status-bar-height);
margin-top: calc(var(--status-bar-height) + 13vw);
margin-bottom: 120rpx;
}
</style>
src/components/points-and-badge/points.vue
+7 -4
View File
@@ -18,7 +18,7 @@
<image class="img_100" src="@/static/images/pointsAndRank/like.png" mode=""></image>
</view>
<view class="points-num-div">+{{showData.num}}</view>
<view class="points-msg-div" v-show="showData.tip"> {{showData.tip}}</view>
<view class="points-msg-div" v-show="showData.message"> {{showData.message}}</view>
</view>
<view class="button-div">
<uv-button
@@ -44,7 +44,7 @@
const showData = ref({
num: 1,
tip:''
message:''
});
const badgesList =ref([]);
const pointsList = ref([]);
@@ -70,8 +70,8 @@
badgesList.value = badges
// 解构出第一项和剩余元素（原数组不变）
const [firstItem, ...remainingPoints] = points;
console.log('firstItem', firstItem);
showData.value['num'] = firstItem['changePoints'];
showData.value['message'] = firstItem['message'];
pointsList.value = remainingPoints;
popup.value.open();
};
@@ -85,7 +85,10 @@
'confirm',
status,
pointsList.value,
badgesList.value
badgesList.value,
() => {
}
);
};
defineExpose({ open, close });