我的学习页面

src/api/study.js

@@ -9,4 +9,38 @@ export function getMyStudyCourseList(data) {
         method: 'post',
         data
     })
+}
+/**
+ * 获取学习中心详情
+ * @param {JSON参数} data 
+ */
+export function getMyStudyCourseInfo(data) {
+    return request({
+        url: '/AppletIndex/GetMyStudyCourseInfo',
+        method: 'post',
+        data
+    })
+}
+
+/**
+ * 获取视频地址id
+ * @param {JSON参数} data 
+ */
+export function getVideoPlayAuth(data) {
+    return request({
+        url: '/Video/GetVideoPlayAuth',
+        method: 'post',
+        data
+    })
+}
+/**
+ * 获取视频地址
+ * @param {JSON参数} data 
+ */
+export function getPlayInfo(data) {
+    return request({
+        url: '/Video/GetPlayInfo',
+        method: 'post',
+        data
+    })
 }
\ No newline at end of file

src/pages/index/components/indexassembly.vue

@@ -133,7 +133,7 @@
 					})
 					if (res && res.Data.phoneNumber) {
 						data.obj.phoneNum = res.Data.phoneNumber
-						// data.obj.phoneNum = '19138490577'
+						// data.obj.phoneNum = '18328620563'
 						data.obj.openid = res.Data.openid
 						data.obj.unionid = res.Data.unionid
 						that.phoneNumLogin()  

src/pages/study/components/vear-carousel/vear-carousel.vue

+<template>
+	<swiper class="image-container" previous-margin="45rpx" next-margin="45rpx" :indicator-dots="true" indicator-active-color='#4C50E7'  @change="swiperChange">
+		<swiper-item  :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in imgList" :key="item[urlKey]">
+			<!-- <image @click="clickImg(item)" :class="currentIndex == index ? 'item-img' : 'item-img-side'" :src="item[urlKey]" lazy-load :style="dontFirstAnimation ? 'animation: none;' : ''" mode="aspectFill"></image> -->
+			<view class="box" :class="currentIndex == index ? 'item-img' : 'item-img-side'" :style="{background:item.B2BBackground ? getOpacityColor(item.B2BBackground,0.3):'#FFF',}">
+				<view class="box-state">
+					<span v-if="item.ClassStatus==1">未开班</span>
+					<span v-if="item.ClassStatus==2">学习中</span>
+					<span v-if="item.ClassStatus==3">已结课</span>
+				</view>
+				<view class="box-center">
+					<view class="box-center-l" :style="{background:item.B2BBackground ? getOpacityColor(item.B2BBackground,0.7):'#FFF',}">
+						<image mode='widthFix' :src="item.B2BIcon"></image>
+					</view>
+					<view class="box-center-r">
+						<view>
+							<view style="font-size: 15px;font-weight: bold;">{{item.CourseName}}</view>
+							<view style="font-size: 12px;font-weight: 500;margin-top: 5px;">{{item.ClassName}}</view>
+							<view class="row" style="font-size: 12px;margin-top: 5px;">
+								<view class="row">总计<span style="color: #4C50E7;margin:0 3px;font-weight: bold;">{{item.TotalHours}}</span>课时</view>
+								<view style="width: 1px;height: 15px;background-color:#999999;margin: 0 10px;"></view>
+								<view class="row">剩余<span style="color: #4C50E7;margin:0 3px;font-weight: bold;">{{item.SurplusHours}}</span>课时</view>
+							</view>
+						</view>
+						<view>
+							<view class="row" style="justify-content: space-between;font-size: 11px;">
+								<span>已学课程</span>
+								<span>{{item.CompleteHours}}/{{item.TotalHours}}</span>
+							</view>
+							<van-progress :percentage="(item.CompleteHours/item.TotalHours)*100" :showPivot='false'/>
+						</view>
+						
+					</view>
+				</view>
+				
+			</view>
+		</swiper-item>
+	</swiper>
+</template>
+<script>
+	export default {
+		props: {
+			imgList: {
+				type: Array,
+				default() {
+					return []
+				}
+			},
+			urlKey: {
+				type: String,
+				default() {
+					return ''
+				}
+			},
+		},
+		data() {
+			return {
+				currentIndex: 0,
+				dontFirstAnimation: true
+			}
+		},
+		methods: {
+			swiperChange(e) {
+				this.dontFirstAnimation = false
+				this.currentIndex = e.detail.current;
+				this.$emit('selected',  this.currentIndex)
+			},
+			clickImg(item) {
+				this.$emit('selected', item, this.currentIndex)
+			},
+			getOpacityColor(thisColor, thisOpacity){
+				var theColor = thisColor.toLowerCase();
+				//十六进制颜色值的正则表达式
+				var r = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+				// 如果是16进制颜色
+				if (theColor && r.test(theColor)) {
+					if (theColor.length === 4) {
+						var sColorNew = "#";
+						for (var i = 1; i < 4; i += 1) {
+							sColorNew += theColor.slice(i, i + 1).concat(theColor.slice(i, i + 1));
+						}
+						theColor = sColorNew;
+					}
+					//处理六位的颜色值
+					var sColorChange = [];
+					for (var i = 1; i < 7; i += 2) {
+						sColorChange.push(parseInt("0x" + theColor.slice(i, i + 2)));
+					}
+					return "rgba(" + sColorChange.join(",") + "," + thisOpacity + ")";
+					// return "rgba(" + sColorChange.join(",") + ", 0.7)";
+				}
+				return theColor;
+			}
+		}
+	}
+</script>
+<style scoped>
+	.image-container {
+		width: 750rpx;
+		height: 350rpx;
+	}
+
+	.item-img {
+		width: 630rpx;
+		height: 300rpx;
+		border-radius: 14rpx;
+		animation: to-big .3s;
+	}
+
+	.swiper-item {
+		width: 630rpx;
+		height: 300rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.item-img-side {
+		width: 630rpx;
+		height: 260rpx;
+		border-radius: 14rpx;
+		animation: to-mini .3s;
+	}
+
+	.swiper-item-side {
+		width: 630rpx;
+		height: 260rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.box{
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		/* padding: 0 20rpx; */
+	}
+	.box-center{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: calc(100% - 36rpx);
+	}
+	.box-center-l{
+		width: 162rpx;
+		height: 208rpx;
+		border-radius: 6px;
+		position: relative;
+	}
+	.box-center-l image{
+		position: absolute;
+		bottom: 10rpx;
+		right: 10rpx;
+		max-width: 100rpx;
+		height: auto;
+	}
+	.box-center-r{
+		flex:1;
+		margin-left: 12px;
+		min-height: 208rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		
+	}
+	.row{
+		display: flex;align-items: center;
+	}
+	.box-state{
+		width: 36rpx;
+		height: 88rpx;
+		position: absolute;
+		right:17px ;
+		top: 0;
+		background: #5DE3A6;
+		font-size: 20rpx;
+		color: #333333;
+		text-align: center;
+		
+		
+	}
+
+	@keyframes to-mini
+	{
+		from {
+			height: 300rpx;
+		}
+		to {
+			height: 260rpx;
+		}
+	}
+	@keyframes to-big
+	{
+		from {
+			height: 260rpx;
+		}
+		to {
+			height: 300rpx;
+		}
+	}
+</style>