中断开发打版本

src/components/points-and-badge/badge.vue

@@ -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

@@ -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 });

src/manifest.json

@@ -1,89 +1,101 @@
 {
-    "name" : "tra-app",
-    "appid" : "__UNI__EDE0E52",
-    "description" : "",
-    "versionName" : "0.0.3",
-    "versionCode" : 3,
-    "transformPx" : false,
-    /* 5+App特有相关 */
-    "app-plus" : {
-        "usingComponents" : true,
-        "nvueStyleCompiler" : "uni-app",
-        "compilerVersion" : 3,
-        "renderer" : "auto",
-        "orientation" : [ "portrait-primary" ],
-        "splashscreen" : {
-            "alwaysShowBeforeRender" : true,
-            "waiting" : false,
-            "autoclose" : true,
-            "delay" : 0
-        },
-        /* 模块配置 */
-        "modules" : {
-            "Camera" : {},
-            "Barcode" : {},
-            "Record" : {},
-            "VideoPlayer" : {}
-        },
-        /* 应用发布信息 */
-        "distribute" : {
-            /* android打包配置 */
-            "android" : {
-                "permissions" : [
-                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
-                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
-                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
-                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
-                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
-                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
-                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
-                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
-                    "<uses-feature android:name=\"android.hardware.camera\"/>",
-                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
-                ]
-            },
-            /* ios打包配置 */
-            "ios" : {
-                "dSYMs" : false
-            },
-            /* SDK配置 */
-            "sdkConfigs" : {},
-            "splashscreen" : {
-                "androidStyle" : "common",
-                "android" : {
-                    "hdpi" : "src/static/images/login/open.9.png",
-                    "xhdpi" : "src/static/images/login/open.9.png",
-                    "xxhdpi" : "src/static/images/login/open.9.png"
-                }
-            }
-        }
-    },
-    /* 快应用特有相关 */
-    "quickapp" : {},
-    /* 小程序特有相关 */
-    "mp-weixin" : {
-        "appid" : "",
-        "setting" : {
-            "urlCheck" : false
-        },
-        "usingComponents" : true
-    },
-    "mp-alipay" : {
-        "usingComponents" : true
-    },
-    "mp-baidu" : {
-        "usingComponents" : true
-    },
-    "mp-toutiao" : {
-        "usingComponents" : true
-    },
-    "uniStatistics" : {
-        "enable" : false
-    },
-    "vueVersion" : "3"
-}
+	"name": "tra-app",
+	"appid": "__UNI__EDE0E52",
+	"description": "",
+	"versionName": "0.0.3",
+	"versionCode": 3,
+	"transformPx": false,
+	/* 5+App特有相关 */
+	"app-plus": {
+		"usingComponents": true,
+		"nvueStyleCompiler": "uni-app",
+		"compilerVersion": 3,
+		"renderer": "auto",
+		"orientation": ["portrait-primary"],
+		"splashscreen": {
+			"alwaysShowBeforeRender": true,
+			"waiting": false,
+			"autoclose": true,
+			"delay": 0
+		},
+		"safearea": {
+			"background": "#CCCCCC",
+			"bottom": {
+				"offset": "none|auto"
+			},
+			"left": {
+				"offset": "none|auto"
+			},
+			"right": {
+				"offset": "none|auto"
+			}
+		},
+		/* 模块配置 */
+		"modules": {
+			"Camera": {},
+			"Barcode": {},
+			"Record": {},
+			"VideoPlayer": {}
+		},
+		/* 应用发布信息 */
+		"distribute": {
+			/* android打包配置 */
+			"android": {
+				"permissions": [
+					"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+					"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+					"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+					"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+					"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+					"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.CAMERA\"/>",
+					"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+					"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+					"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+					"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+					"<uses-feature android:name=\"android.hardware.camera\"/>",
+					"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+				]
+			},
+			/* ios打包配置 */
+			"ios": {
+				"dSYMs": false
+			},
+			/* SDK配置 */
+			"sdkConfigs": {},
+			"splashscreen": {
+				"androidStyle": "common",
+				"android": {
+					"hdpi": "src/static/images/login/open.9.png",
+					"xhdpi": "src/static/images/login/open.9.png",
+					"xxhdpi": "src/static/images/login/open.9.png"
+				}
+			}
+		}
+	},
+	/* 快应用特有相关 */
+	"quickapp": {},
+	/* 小程序特有相关 */
+	"mp-weixin": {
+		"appid": "",
+		"setting": {
+			"urlCheck": false
+		},
+		"usingComponents": true
+	},
+	"mp-alipay": {
+		"usingComponents": true
+	},
+	"mp-baidu": {
+		"usingComponents": true
+	},
+	"mp-toutiao": {
+		"usingComponents": true
+	},
+	"uniStatistics": {
+		"enable": false
+	},
+	"vueVersion": "3"
+}

src/pages/me/index.vue

@@ -48,7 +48,8 @@
 						<view class="work_number_div">工号：{{ user_info.loginName }}</view>
 						<view class="fl1"></view>
 					</view>
-					<view class="sign-in-div" v-if="user_info.checkInToday === 'N'" @click="checkInClick">签到</view>
+					<!-- v-if="user_info.checkInToday === 'N'" -->
+					<view class="sign-in-div" @click="checkInClick">签到</view>
 					<view class="already-sign-in-div" v-if="user_info.checkInToday === 'Y'" @click="checkInClick">已签</view>
 				</view>
 				<!-- 用户学习时间信息 -->
@@ -159,7 +160,7 @@
 			@confirm="avatarOnConfirm"
 		></avatar-cropper>
 		<checkIn ref="checkInRef" @checkInFun="checkInFun"></checkIn>
-		<badge ref="badgeRef"></badge>
+		<badge ref="badgeRef" @confirm="badgeConfirm"></badge>
 		<points ref="pointsRef" @confirm="pointsConfirm"></points>
 	</view>
 </template>
@@ -183,7 +184,7 @@
 	import checkIn from '@/components/points-and-badge/check-in';
 	import badge from '@/components/points-and-badge/badge';
 	import points from '@/components/points-and-badge/points';
-	import {pop_up_time} from '@/enum';
+	import { pop_up_time } from '@/enum';
 	const { avatarCropperUrl, click_update_avatar, avatarCropperStatus, avatarOnCancel, avatarOnConfirm } = useUpdateAvatar({
 		success: (userData) => {
 			user_info.imageAddr = userData.imageAddr;
@@ -246,6 +247,20 @@
 	// 签到打开
 	const checkInClick = () => {
 		checkInRef.value.open(user_info.checkInToday, user_info.checkInDays);
+	
+				// badgeRef.value.open(
+				// 	[],
+				// 	[
+				// 		{
+				// 			pointsBadgeImg: '/traoss/tras3/show/S3F0250181220722025110713501700000661177',
+				// 			pointsBadgeName: '黄金徽章'
+				// 		},
+				// 		{
+				// 			pointsBadgeImg: '/traoss/tras3/show/S3F0250181220722025110713501700000661177',
+				// 			pointsBadgeName: '黄金徽章2'
+				// 		}
+				// 	]
+				// );
 	};
 	// 签到成功回调
 	const checkInFun = (status, pointsList = [], badgesList = []) => {
@@ -254,7 +269,13 @@
 		}
 		pointsRef.value.open(pointsList, badgesList);
 	};
-
+	const badgeConfirm = (status, pointsList = [], badgesList = []) => {
+		// nextTick(() => {
+		// 	badgeRef.value.close();
+		// })
+		
+		badgeRef.value.close();
+	};
 	// 积分确认
 	const pointsConfirm = (status, pointsList = [], badgesList = []) => {
 		console.log('xxx', status, pointsList, badgesList);

src/pages/pointsAndRank/rank.vue

@@ -24,7 +24,7 @@
 							<view class="note">当前段位：{{dataInfo.currentRankName}}</view>
 							<view class="note">
 								我的累计积分：
-								<text class="score">{{dataInfo.currentPoints}}/{{dataInfo.countPoints}}</text>
+								<text class="score">{{dataInfo.countPoints}}</text>
 							</view>
 						</view>
 						<view class="fl1"></view>