JLBA202505130001_关于吉林银行新建AI智能培训系统的需求_开发任务详情样式完成

.env.development

@@ -7,7 +7,7 @@ ENV = 'development'
 #VITE_APP_BASE_API_Url = 'https://aits.jlbank.com.cn:7001'
 
 
-VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
+#VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
 
 # VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7002'
 # VITE_APP_BASE_API_Url = 'http://192.168.247.200'
@@ -16,7 +16,7 @@ VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
 # dev
 
 # DEV
-#VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
+VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
 
 # sit
 #VITE_APP_BASE_API_Url = 'http://25.18.122.91:9786'

src/pages/learningTasks/components/details-item.vue

@@ -3,29 +3,30 @@
 		<!-- 箭头指示 -->
 		<view class="arrow-div">
 			<view class="big-arrow">
-				<image class="img" :src="statusOpen?bigArrow2:bigArrow1" mode=""></image>
+				<image class="img" :src="statusOpen ? bigArrow2 : bigArrow1" mode=""></image>
 			</view>
 			<view class="small-arrow">
 				<image class="img" src="@/static/images/learningTasks/small-arrow.png" mode=""></image>
 			</view>
 		</view>
 		<view class="idea-div">
-			<image class="img" src="@/static/images/learningTasks/idea-1.png" mode="aspectFit"></image>
+			<image class="img" :src="statusOpen ? idea2 : idea1" mode="aspectFit"></image>
 		</view>
 		<view class="mid-div">
-			<view class="title-div">{{ props.item.crsName }}xx{{props.item.status}}</view>
+			<view class="title-div">{{ props.item.crsName }}</view>
 			<view class="button-div">
-				<view class="button button-status-1">
+				<view class="button" :class="isFinishStudy.className" @click="item_click(item)">
 					<view class="button-icon">
-						<image class="img" src="@/static/images/learningTasks/button-1.png" mode="aspectFit"></image>
+						<image class="img" :src="isFinishStudy.icon" mode="aspectFit"></image>
 					</view>
-					<view class="button-text">完成学习</view>
+					<view class="button-text">{{ isFinishStudy.text }}</view>
 				</view>
-				<view class="button button-status-2">
+
+				<view class="button" :class="isFinishExam.className" @click="item_click(item)">
 					<view class="button-icon">
-						<image class="img" src="@/static/images/learningTasks/button-2.png" mode="aspectFit"></image>
+						<image class="img" :src="isFinishExam.icon" mode="aspectFit"></image>
 					</view>
-					<view class="button-text">完成学习</view>
+					<view class="button-text">{{ isFinishExam.text }}</view>
 				</view>
 			</view>
 		</view>
@@ -38,8 +39,14 @@
 </template>
 
 <script setup>
-	import bigArrow1 from '@/static/images/learningTasks/big-arrow-1.png'
+	import bigArrow1 from '@/static/images/learningTasks/big-arrow-1.png';
-	import bigArrow2 from '@/static/images/learningTasks/big-arrow-2.png'
+	import bigArrow2 from '@/static/images/learningTasks/big-arrow-2.png';
+	import idea1 from '@/static/images/learningTasks/idea-1.png';
+	import idea2 from '@/static/images/learningTasks/idea-2.png';
+	import button1 from '@/static/images/learningTasks/button-1.png';
+	import button2 from '@/static/images/learningTasks/button-2.png';
+	import button3 from '@/static/images/learningTasks/button-3.png';
+	import button4 from '@/static/images/learningTasks/button-4.png';
 	import { ref, computed } from 'vue';
 	const props = defineProps({
 		item: {
@@ -51,6 +58,24 @@
 			requset: true
 		}
 	});
+	const emits = defineEmits(['item_click'])
+	const item_click = (item) => emits('item_click', item)
+	const buttonStatusDict = {
+		'01': 'button-status-0',
+		'02': 'button-status-1',
+		'03': 'button-status-2'
+	};
+	const isFinishStudy = computed(() => ({
+		className: buttonStatusDict[props.item.isFinishStudy],
+		text: props.item.isFinishStudy === '02' ? '完成学习' : '去学习',
+		icon: props.item.isFinishStudy === '02' ? button2 : button1
+	}));
+	const isFinishExam = computed(() => ({
+		className: buttonStatusDict[props.item.isFinishExam],
+		text: props.item.isFinishStudy === '02' ? '通过考试' : '去考试',
+		icon: props.item.isFinishStudy === '02' ? button4 : button3
+	}));
+
 	const statusOpen = computed(() => ['01', '02'].includes(props.item.status));
 	const direction = computed(() => {
 		const styleArray = [];
@@ -63,14 +88,15 @@
 			styleArray.push('right');
 		}
 		// 00进行中、01已完成、02已超时
-		const isFinish = props.item.isFinish;
+		const status = props.item.status;
-		if (isFinish === '01') {
+		if (status === '01') {
 			styleArray.push('unfinished');
-		} else if (isFinish === '02') {
+		} else if (status === '02') {
 			styleArray.push('completed');
 		} else {
 			styleArray.push('not_unlocked');
 		}
+		console.log('styleArray', styleArray);
 		return styleArray;
 	});
 
@@ -268,9 +294,13 @@
 		}
 	}
 	.button-status-1 {
-		background-color: #63a1ff;
-	}
-	.button-status-2 {
 		background-color: #6baa1b;
 	}
+	.button-status-2 {
+		background-color: #63a1ff;
+	}
+	.button-status-0 {
+		// background-color: #8aa2c6;
+		display: none !important;
+	}
 </style>

src/pages/learningTasks/details.vue

@@ -31,8 +31,22 @@
 								<view class="time-div">
 									起止时间：{{ detailData.startTm?.substr(0, 10) }}至{{ detailData.endTm?.substr(0, 10) }}
 								</view>
+								<view class="fl1"></view>
 								<!-- 收藏盒子 -->
-								<view class="collection-div"></view>
+								<view class="num-item" @click="collect_click(detailData.collectionId)">
+									<image
+										v-if="detailData.collectionId"
+										class="collect-icon"
+										src="@/static/images/courseDetail/out_collect.png"
+										mode="widthFix"
+									></image>
+									<image
+										v-else
+										class="collect-icon"
+										src="@/static/images/courseDetail/in_collect.png"
+										mode="widthFix"
+									></image>
+								</view>
 							</view>
 							<view class="other-div-2">
 								<!-- 完成人数盒子 -->
@@ -58,7 +72,7 @@
 				</view>
 				<!-- 步骤 -->
 				<view class="step-list-div">
-					<detailsItem v-for="(item, index) in data_list" :item="item" :index="index"></detailsItem>
+					<detailsItem v-for="(item, index) in data_list" :item="item" :index="index" @item_click="item_click"></detailsItem>
 				</view>
 			</z-paging>
 		</view>
@@ -274,6 +288,8 @@
 			}
 			.other-div-1 {
 				margin-top: 6rpx;
+				display: flex;
+				align-items: center;
 				.time-div {
 					font-weight: 400;
 					font-size: 22rpx;
@@ -281,6 +297,17 @@
 					line-height: 33rpx;
 					font-family: Arial, Helvetica, sans-serif;
 				}
+				.num-item {
+					display: flex;
+					align-items: center;
+					font-size: 30rpx;
+					color: #666666;
+
+					.collect-icon {
+						width: 36rpx;
+						height: 36rpx;
+					}
+				}
 			}
 			.other-div-2 {
 				width: 100%;