优化-增加选集弹窗将当前滚动到弹窗中间位置

components/my-video-list/list-item.vue

@@ -281,7 +281,6 @@
 	})
 	onMounted(() => {
 		init()
-		console.log('itemMounted',props.index);
 		emits('itemMounted', props.index)
 	})
 

components/my-video-list/my-video-list.vue

@@ -47,12 +47,16 @@
 				</view>
 				<up-icon name="close" :size="16" color="#333" bold @click="popupClose('show')"></up-icon>
 			</view>
-			<scroll-view scroll-y="true" class="u-m-t-30" style="height: 400px;box-sizing: border-box;"
+			<scroll-view scroll-y="true" class="u-m-t-30 xuanji-scroll" 
-				:show-scrollbar="false">
+			ref="refXuanjiList"
+			:style="{height:xuanjiData.height+'px'}"
+			@scroll="xuanjiScroll"
+				:scroll-top="xuanjiData.scrollTop" scroll-with-animation :show-scrollbar="false">
 				<view class="ji-list u-flex u-flex-row u-flex-wrap">
 					<view class="ji-item u-flex-xy-center u-text-center" @click="jiClick(item,index)"
-						:class="{active:nowIndex==index,'mr-0':(index+1)%3==0}" v-for="(item,index) in list"
+						
-						:key="index">
+						:class="[nowIndex==index?'active':'',(index+1)%3==0?'mr-0':'','ji-item'+index]"
+						v-for="(item,index) in list" :key="index">
 						<text class="u-font-28" :class="{'color-fff':nowIndex==index}">第{{index+1}}集</text>
 						<view class="lock u-flex-xy-center" v-if="!item.videoUrl">
 							<up-icon name="lock" :size="14" color="#fff"></up-icon>
@@ -157,8 +161,11 @@
 	import {
 		useCommonStore
 	} from '@/store/common.js'
+	import {
+		getElRect
+	} from '@/utils/util.js'
 	const $common = useCommonStore()
-	
+
 	// #ifdef APP
 	const domModule = uni.requireNativePlugin('dom')
 	// #endif
@@ -185,6 +192,7 @@
 	let initing = true
 	const refPoster = ref(null)
 
+
 	const props = defineProps({
 		list: {
 			type: Array,
@@ -192,11 +200,11 @@
 				[]
 			}
 		},
-		options:{
+		options: {
 			tpye: Object,
 			default: () => {
 				return {
-					courseDetailsId:''
+					courseDetailsId: ''
 				}
 			}
 		},
@@ -228,7 +236,7 @@
 	// #ifdef APP
 	control.showControls = false
 	// #endif
-	
+
 	const customStyle = computed(() => {
 		// #ifdef H5
 		return {
@@ -266,7 +274,7 @@
 	const $mountedComponents = {}
 
 	function itemMounted(index) {
-		$mountedComponents[index]=true
+		$mountedComponents[index] = true
 	}
 
 	function back() {
@@ -308,6 +316,49 @@
 		payType: null
 	})
 
+	//选集数据
+	const xuanjiData = reactive({
+		scrollTop: 0,
+		items: [],
+		scrollHeight: 0,
+		height:400
+	})
+	const refXuanjiList=ref(null)
+	function xuanjiScroll(e){
+		console.log(e);
+	}
+	async function xuanjiInit() {
+		// #ifdef APP
+		const height=44
+		const marginBottom=10
+		const oneItemHeight=height+marginBottom
+		xuanjiData.scrollTop=Math.ceil((nowIndex.value+1)/3) * oneItemHeight - (xuanjiData.height)/2+oneItemHeight/2
+		return
+		// #endif
+	
+		if (!xuanjiData.items[props.list.length - 1]) {
+			const res = await getElRect('ji-list', instance, {
+				rect: true
+			})
+			xuanjiData.scrollHeight = res.height
+			let firstItemTop=0
+			for (let i in props.list) {
+				const res1 = await getElRect('ji-item' + i, instance, {
+					rect: true
+				})
+				if(i==0){
+					firstItemTop=res1.top
+				}
+				xuanjiData.items[i] = {
+					height: res1.height,
+					top: i==0?0: res1.top-firstItemTop
+				}
+			}
+		}
+		xuanjiData.scrollTop =xuanjiData.items[nowIndex.value].top-(xuanjiData.height)/2+(xuanjiData.items[nowIndex.value].height)/2 
+			console.log(xuanjiData);
+	}
+
 
 	function openBs() {
 
@@ -316,7 +367,7 @@
 	let cacheIndex = null
 
 	function appear(isFirst, item, index) {
-		if(isFirst){
+		if (isFirst) {
 			$mountedComponents[index] = true
 		}
 		if (!initing) {
@@ -340,7 +391,6 @@
 	}
 
 
-
 	//非金币支付
 	async function payOrder(data) {
 		const res = await Api.payOrder(data)
@@ -376,12 +426,12 @@
 	//确认支付
 	async function payConfirm() {
 		const [type, num] = popup.payType.split('-');
-		if(type!='gold'){
+		if (type != 'gold') {
 			if (!isAgree.value) {
 				return infoBox.showToast('请阅读并同意 《付费须知说明》')
 			}
 		}
-		
+
 		console.log(type, num);
 		let data = {
 			courseId: popup.data.courseId
@@ -392,10 +442,10 @@
 
 		const res = num == '10' ? await Api.buyTenVideo(data) : await Api.buyVideo(data)
 		console.log(res);
-		if(!res.orders){
+		if (!res.orders) {
 			return uni.showToast({
-				title:'创建订单失败',
+				title: '创建订单失败',
-				icon:'none'
+				icon: 'none'
 			})
 		}
 		if (res) {
@@ -419,7 +469,7 @@
 	function payBtnClick(type, num) {
 		console.log(type, num);
 		popup.payType = `${type}-${num}`
-		if(type=='gold'){
+		if (type == 'gold') {
 			return payConfirm()
 		}
 		popupClose('show')
@@ -490,6 +540,17 @@
 
 	function popupShow(key = 'show', item, index) {
 		console.log(item);
+		if (key == 'show') {
+			// #ifdef H5
+			nextTick(() => {
+				xuanjiInit()
+			})
+			// #endif
+			// #ifdef APP
+			xuanjiInit()
+			// #endif
+			
+		}
 		popup[key] = true
 		if (item) {
 			popup.data = item
@@ -513,6 +574,7 @@
 		isCollect.value = newval
 	})
 
+
 	function toDetail(item, index) {
 		uni.navigateTo({
 			url: '/pages/video/detail?courseId=' + item.courseId
@@ -533,15 +595,15 @@
 
 
 	function init() {
-		let item=props.list.find(v=>props.options.courseDetailsId==v.courseDetailsId)
+		let item = props.list.find(v => props.options.courseDetailsId == v.courseDetailsId)
-		item=item?item:props.info.current;
+		item = item ? item : props.info.current;
 		if (JSON.stringify(item) !== '{}') {
 			// #ifdef H5
 			setVideoList(item)
 			// #endif
 			// #ifdef APP
 			nextTick(() => {
-				const index = props.list.findIndex(v => v.courseDetailsId ==item.courseDetailsId)
+				const index = props.list.findIndex(v => v.courseDetailsId == item.courseDetailsId)
 				goListPosition(index)
 			})
 			// #endif
@@ -583,11 +645,11 @@
 			courseId: item.courseId,
 			courseDetailsId: item.courseDetailsId,
 			type: item.isGood ? 1 : 0
-		}).then(res=>{
+		}).then(res => {
-			if(res){
+			if (res) {
 				uni.showToast({
-					title:'操作成功！',
+					title: '操作成功！',
-					icon:'none'
+					icon: 'none'
 				})
 			}
 		})
@@ -718,14 +780,17 @@
 	configInit()
 	onMounted(() => {
 		init()
+
 		// setTimeout(()=>{
 		// },500)
 	})
 	watch(() => props.list.length, (newval) => {
+		console.log('props.list.length change' + newval);
 		// #ifdef H5
 		init()
 		// #endif
 	})
+	watch(() => nowIndex.value, (newval) => {})
 	const nowDanjiPrice = computed(() => {
 		return videoList.value[current.value].price
 	})