2

src/components/word/Pronunciation.vue

 <template>
 	<view class="wordPronItem">
 		<view class="num">
-			1/26
+			{{cur}}/{{total}}<text style="margin-left: 6rpx;">{{type==0?'':"复习"}}</text>
+		</view>
+		<view class="meaning">
+			{{item.ChineseMean}}
+		</view>
+		<view class="Japanese">
+			{{item.WordWrite}}
+		</view>
+		<view class="desc">
+			<view class="attr">
+				{{item.WordType}}
+			</view>
+			<view class="hiragana">
+				{{item.WordContent}}
+			</view>
+		</view>
+		<view class="listen" @click="play">
+			<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/laba2x.png"
+				mode="aspectFit" class="listenIcon"></image>
+		</view>
+		<view class="listenText">
+			播放读音
 		</view>
 	</view>
 </template>
@@ -18,27 +39,40 @@
 		onMounted,
 		provide,
 	} from "vue";
+	const innerAudioContext = uni.createInnerAudioContext();
+	innerAudioContext.autoplay = false;
 	export default {
-		components: {
-			
-		},
-		props:{
-			item:{
-				type:Object,
-				default:()=>{return {}}
+		props: {
+			type:{
+				type: Number,
+				default: 0
+			},
+			cur: {
+				type: Number,
+				default: 0
+			},
+			total: {
+				type: Number,
+				default: 0
+			},
+			item: {
+				type: Object,
+				default: () => {
+					return {}
+				}
 			}
 		},
-		setup(){
-			let data = reactive({
-				
-			
-			})
-			let methods = {
-			
+		setup(props) {
+			const url=ref('./cesi.mp3')
+			const methods={
+				play(){
+					// innerAudioContext.src=props.item.FileUrl
+					innerAudioContext.src=url
+					innerAudioContext.play()
+				}
 			}
 			return {
-				...toRefs(data),
-				...methods,
+				...methods
 			};
 		}
 	}
@@ -48,12 +82,84 @@
 	.wordPronItem {
 		width: 640rpx;
 		height: 990rpx;
+		box-shadow: 0rpx 15rpx 80rpx 0rpx #E9E9E9;
+		border-radius: 24rpx;
+		margin: 100rpx auto 0;
 	}
 
 	.wordPronItem .num {
 		font-size: 26rpx;
 		font-family: PingFang SC;
+		font-weight: 700;
+		color: #999999;
+		padding: 50rpx 0 110rpx 0;
+		text-align: center;
+	}
+
+	.meaning {
+		font-size: 28rpx;
+		font-weight: 500;
+		color: #111111;
+		margin-bottom: 80rpx;
+		text-align: center;
+	}
+
+	.Japanese {
+		font-size: 60rpx;
 		font-weight: bold;
+		color: #111111;
+		text-align: center;
+		margin-bottom: 60rpx;
+	}
+
+	.wordPronItem .desc {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 200rpx;
+	}
+
+	.wordPronItem .attr {
+		background-color: #E8E9EA;
+		border-radius: 6rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		box-sizing: border-box;
+		padding: 5rpx 10rpx;
+		line-height: 30rpx;
+		margin-right: 15rpx;
+		font-size: 24rpx;
+		font-weight: 500;
+		color: #666666;
+	}
+
+	.wordPronItem .hiragana {
+		font-size: 28rpx;
+		font-weight: 500;
 		color: #999999;
 	}
+
+	.listen {
+		width: 170rpx;
+		height: 170rpx;
+		background-color: #E4E5FB;
+		border-radius: 50%;
+		margin: 0 auto 30rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.listenIcon {
+		width: 55rpx;
+		height: 55rpx;
+	}
+
+	.listenText {
+		font-size: 22rpx;
+		font-weight: 500;
+		color: #B8B8B8;
+		text-align: center;
+	}
 </style>

src/pages.json

@@ -102,7 +102,11 @@
 		{
 			"root": "pages/word", //单词分包
 			"pages": [{
-				"path": "word" //
+				"path": "word", //
+				"style":{
+					"backgroundColor":"#f5f5f5",
+					"navigationBarBackgroundColor":"#f5f5f5"
+				}
 			}]
 		}
 	],

src/pages/index/index.vue

 <template>
 	<view class="indexpage">
-		<van-sticky >
+		<van-sticky>
 			<navbar class="navbarSticky">
 				<view class="navbarCon">
 					<view class="pagetitle" @click="jumpPage('/pages/login/login')">
@@ -14,10 +14,10 @@
 									mode="aspectFit" class="loginIcon" id="loadImg"></image>
 								登录
 							</view>
-						</indexassembly> 
+						</indexassembly>
 					</view>
 
-					<view class="scanBox"  @click="jumpPage('/pages/word/word')">
+					<view class="scanBox">
 						<image
 							src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/scan2x.png"
 							mode="aspectFit" class="scanIcon"></image>
@@ -51,18 +51,19 @@
 			<view class="flex_around_center ">
 				<view class="wordItem">
 					<text class="wordItemTitle">今日新词</text>
-					<text class="wordItemText">{{pageData.Words.NextWord}}<text class="wordItemTextUnit">词</text></text>
+					<text class="wordItemText">{{pageData.Words.NextWord||0}}<text class="wordItemTextUnit">词</text></text>
 				</view>
 				<view class="wordItem">
 					<text class="wordItemTitle">复习词语</text>
-					<text class="wordItemText">{{pageData.Words.ReviewWord}} <text
+					<text class="wordItemText">{{pageData.Words.ReviewWord||0}} <text
 							class="wordItemTextUnit">词</text></text>
 				</view>
 			</view>
 			<view class="wordDuration">
 				预计用时10分钟
 			</view>
-			<view class="wordBtn">
+			<view class="wordBtn"
+				@click="jumpPage(`/pages/word/word?CourseId=${pageData.Words.CourseId}&&ChapterId=${pageData.Words.NextCourseNo}&&PrevChapterId=${pageData.Words.ReviewCourseNo}`)">
 				开始学习
 			</view>
 		</view>
@@ -82,10 +83,10 @@
 				</view>
 				<view class="flex">
 					<view class="courseNameBox">
-						<view class="className">
+						<view class="className one_line">
 							{{pageData.ClassNext.ClassName||'暂无'}}
 						</view>
-						<view class="courseName">
+						<view class="courseName one_line">
 							{{pageData.ClassNext.CourseName||'暂无'}}
 						</view>
 					</view>
@@ -193,10 +194,10 @@
 					console.log(168, formatres)
 					return formatres
 				},
-				againdata(){
-						  data.pageData = uni.getStorageSync("userInfo");
-						  methods.getIndexData();
-						  methods.getActivityData();
+				againdata() {
+					data.pageData = uni.getStorageSync("userInfo");
+					methods.getIndexData();
+					methods.getActivityData();
 				}
 			};
 
@@ -240,11 +241,13 @@
 		box-sizing: border-box;
 		padding-bottom: 40rpx;
 	}
-	.navbarSticky{
+
+	.navbarSticky {
 		display: sticky;
 		top: 0;
 		z-index: 9;
 	}
+
 	.navbarCon {
 		height: 100%;
 		box-sizing: border-box;
@@ -404,6 +407,8 @@
 	.wordBtn {
 		width: 130rpx;
 		height: 50rpx;
+		text-align: center;
+		line-height: 50rpx;
 		background-color: #4C50E7;
 		border-radius: 25rpx;
 		margin: 10rpx auto;
@@ -411,9 +416,6 @@
 		font-family: PingFang SC;
 		font-weight: bold;
 		color: #FEFEFF;
-		display: flex;
-		justify-content: center;
-		align-items: center;
 	}
 
 	.courseBox {
@@ -489,14 +491,14 @@
 	.courseName {
 		width: 355rrpx;
 		height: 75rpx;
+		line-height: 73rpx;
 		background-color: #F5F5F5;
 		border-radius: 35rpx;
-		display: flex;
-		justify-content: center;
-		align-items: center;
 		font-size: 42rpx;
 		font-weight: bold;
 		color: #111111;
+		padding: 0 10rpx;
+		box-sizing: border-box;
 	}
 
 	.learningGarden {

src/pages/word/word.vue

 <template>
 	<view class="word">
-		<swiper class="swiper">
-			<swiper-item v-for="(item,index) in test" :key="index">
-				<view class="swiper-item uni-bg-green">index</view>
-				<Pronunciation></Pronunciation>
+		<swiper class="swiper" next-margin="60rpx">
+			<swiper-item v-for="(item,index) in StudyList" :key="index" class="swiper-item" >
+				<Pronunciation :item="item" :cur="index+1" :total="StudyList.length"></Pronunciation>
+			</swiper-item>
+			<swiper-item v-for="(item,index) in ReviewList" :key="index" class="swiper-item" >
+				<Pronunciation :item="item" :cur="index+1" :total="ReviewList.length" :type="1"></Pronunciation>
 			</swiper-item>
 		</swiper>
 	</view>
@@ -27,12 +29,24 @@
 			Pronunciation
 		},
 		setup(props) {
+			let {proxy} = getCurrentInstance();
 			let data = reactive({
-				test: [1,2,3]
-
+				test: [1,2,3],
+				msg:{
+					ChapterId:0,
+					CourseId:0,
+					PrevChapterId:0,
+				},
+				StudyList:[],
+				ReviewList:[],
 			})
 			let methods = {
-
+				getData(){
+					 proxy.$request('/AppletWords/GetStudyWords',data.msg).then(res=>{
+						 data.StudyList=res.Data.StudyList
+						 data.ReviewList=res.Data.ReviewList
+					 })
+				}
 			}
 			onMounted(() => {
 
@@ -43,10 +57,14 @@
 				...methods,
 			};
 		},
-		onLoad(option) {
+		onLoad(options) {
 			uni.setNavigationBarTitle({
 				title: '新的标题'
 			});
+			this.msg.ChapterId=options.ChapterId
+			this.msg.CourseId=options.CourseId
+			this.msg.PrevChapterId=options.PrevChapterId
+			this.getData()
 		},
 	}
 </script>
@@ -56,4 +74,13 @@
 		min-height: 100vh;
 		background-color: #F5F5F5;
 	}
-</style>
+	.word .swiper{
+		min-height: 100vh;
+		background-color: #F5F5F5;
+	}
+	.word .swiper-item{
+		min-height: 100vh;
+		background-color: #F5F5F5;
+		/* padding-left: 55rpx; */
+	}
+</style>
\ No newline at end of file