优化逻辑

vedio/pages/home.vue

@@ -2,10 +2,11 @@
 	<view class="body">
 		<view style="height: 100%;">
 			<indexPage v-show="currentPage==0" ref="index" />
-			<recommendPage v-on:showEditBarH="showEditBarH" v-show="currentPage==1" ref="recommend" />
+			<recommendPage v-on:showEditBarH="showEditBarH" v-on:changeBottomBarColor="changeBottomBarColor"
+				v-show="currentPage==1" ref="recommend" />
 			<userPage v-show="currentPage==2" ref="user" />
 		</view>
-		<view class="tabs-bar">
+		<view v-if="!isShowBlackBar" class="tabs-bar">
 			<view :class="currentPage==0?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
 				@click="tabChange(0)">
 				<view style="margin: 16rpx 0 11rpx;">
@@ -14,7 +15,7 @@
 					</image>
 					<image v-else class="tabs-image" src="/static/tab/index_unselected.png" mode="heightFix"></image>
 				</view>
-				剧场 
+				剧场
 			</view>
 			<view :class="currentPage == 1?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
 				@click="tabChange(1)">
@@ -35,12 +36,43 @@
 				我的
 			</view>
 		</view>
-		<view v-if="showEditBar" class="editBar">
-			<view class="editItem" @click="!isFullChoice?fullChoice():noChoice()"
-				:style="'padding-bottom:' + bottomSafePadding + 'px;'">
+
+		<view v-if="isShowBlackBar" class="tabs-bar2">
+			<view :class="currentPage==0?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
+				@click="tabChange(0)">
+				<view style="margin: 16rpx 0 11rpx;">
+					<image v-if="currentPage==0" class="tabs-image" src="/static/tab/index_selected.png"
+						mode="heightFix">
+					</image>
+					<image v-else class="tabs-image" src="/static/tab/index_unselected.png" mode="heightFix"></image>
+				</view>
+				剧场
+			</view>
+			<view :class="currentPage == 1?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
+				@click="tabChange(1)">
+				<view style="margin: 16rpx 0 11rpx;">
+					<image v-if="currentPage==1" class="tabs-image" src="/static/tab/promote_selected.png"
+						mode="heightFix"></image>
+					<image v-else class="tabs-image" src="/static/tab/promote_unselected.png" mode="heightFix"></image>
+				</view>
+				推荐
+			</view>
+			<view :class="currentPage == 2?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
+				@click="tabChange(2)">
+				<view style="margin: 16rpx 0 11rpx;">
+					<image v-if="currentPage==2" class="tabs-image" src="/static/tab/my_selected.png" mode="heightFix">
+					</image>
+					<image v-else class="tabs-image" src="/static/tab/my_unselected.png" mode="heightFix"></image>
+				</view>
+				我的
+			</view>
+		</view>
+
+		<view v-if="showEditBar" class="editBar" :style="'padding-bottom:' + bottomSafePadding + 'px;'">
+			<view class="editItem" @click="!isFullChoice?fullChoice():noChoice()">
 				{{!isFullChoice?'全选':'全不选'}}
 			</view>
-			<view class="editItem" @click="deleteCollect" :style="'padding-bottom:' + bottomSafePadding + 'px;'">
+			<view class="editItem" @click="deleteCollect">
 				删除
 			</view>
 		</view>
@@ -73,7 +105,8 @@
 				isFirstLoad: true,
 				currentPage: 0,
 				showEditBar: false,
-				isFullChoice: false
+				isFullChoice: false,
+				isShowBlackBar: false
 			}
 		},
 		onLoad(options) {
@@ -108,14 +141,25 @@
 				this.loadComponentData();
 			},
 			loadComponentData() {
-				if (this.currentPage == 0) {
-					this.$refs.index.show();
-				} else if (this.currentPage == 1) {
-					this.$refs.recommend.show();
-				} else if (this.currentPage == 2) {
-					this.$refs.user.show();
+				if (this.currentPage == 0) {
+					this.changeBottomBarColor(false)
+					this.$refs.index.show();
+					this.$refs.recommend.hide();
+					this.$refs.user.hide();
+				} else if (this.currentPage == 1) {
+					this.$refs.recommend.show();
+					this.$refs.index.hide();
+					this.$refs.user.hide();
+				} else if (this.currentPage == 2) {
+					this.changeBottomBarColor(false)
+					this.$refs.user.show();
+					this.$refs.index.hide();
+					this.$refs.recommend.hide();
 				}
 			},
+			changeBottomBarColor(b) {
+				this.isShowBlackBar = b
+			},
 			showEditBarH(b) {
 				this.showEditBar = b
 				this.isFullChoice = false
@@ -155,4 +199,21 @@
 			width: 50%;
 		}
 	}
+
+	.tabs-bar2 {
+		display: flex;
+		background-color: black;
+
+		.tab {
+			flex: 1;
+			text-align: center;
+			font-size: 26rpx;
+			font-weight: bold;
+			color: white;
+
+			&.active {
+				color: #F8425A;
+			}
+		}
+	}
 </style>
\ No newline at end of file

vedio/pages/index/index.vue

@@ -2,8 +2,8 @@
 	<view class="body">
 		<z-paging class="flex-1" ref="paging" v-model="dataList" @query="queryList">
 			<view class="content">
-				<swiper class="banner" style="margin-top: 20rpx;" :indicator-dots="true" :autoplay="true"
-					:interval="2000" :duration="500">
+				<swiper class="banner" :style="'margin-top:'+statusBarHeight+'px;'" :indicator-dots="true"
+					:autoplay="true" :interval="2000" :duration="500">
 					<swiper-item v-for="banner in bannerList" :key="banner.vedioId" @click="handleBanner(banner)">
 						<image class="banner-img" :src="banner.tabImage" mode="aspectFill"></image>
 					</swiper-item>
@@ -110,14 +110,15 @@
 						src="http://sh.mints-id.com/vedioApp/vedio/ZhiZunLongZhu/zzlzshu.jpg" mode="aspectFill"></image>
 					<view style="margin: 20rpx;">
 						<view style="font-size: 30rpx; color: white;">{{newRecordBean.title}}</view>
-						<view style="font-size: 24rpx;margin-top: 6rpx;color: white;">上次观看至第{{newRecordBean.seeIndex}}集</view>
-						<view style="font-size: 22rpx;"
-							v-if="newRecordBean.orderTags!=null&&newRecordBean.orderTags.length>0">
-							<scroll-view scroll-x="true">
-								<block v-for="t in newRecordBean.orderTags" :key="newRecordBean.orderTags">
-									<view style="display:inline-block;margin-right: 4rpx;">{{t}} </view>
-								</block>
-							</scroll-view>
+						<view style="font-size: 24rpx;margin-top: 6rpx;color: white;">上次观看至第{{newRecordBean.seeIndex}}集
+						</view>
+						<view style="font-size: 22rpx;"
+							v-if="newRecordBean.orderTags!=null&&newRecordBean.orderTags.length>0">
+							<scroll-view scroll-x="true">
+								<block v-for="t in newRecordBean.orderTags" :key="newRecordBean.orderTags">
+									<view style="display:inline-block;margin-right: 4rpx;">{{t}} </view>
+								</block>
+							</scroll-view>
 						</view>
 					</view>
 				</view>
@@ -164,7 +165,8 @@
 				dataList: [],
 				bannerList: [],
 				newRecordBean: null,
-				topList: []
+				topList: [],
+				statusBarHeight: app.globalData.statusBarHeight,
 			};
 		},
 		methods: {
@@ -191,17 +193,20 @@
 				});
 				// 最近观看剧
 				this.post({
-					url: '/vedio/newest',
+					url: '/vedio/newest',
 					data: {},
 					showLoading: false,
 					success: ({
 						data
 					}) => {
-						if (data.vedio != null ) {
+						if (data.vedio != null) {
 							this.newRecordBean = data.vedio;
 						}
 					}
 				});
+			},
+			hide() {
+
 			},
 			queryList(page, size) {
 				// 推荐列表
@@ -234,7 +239,7 @@
 			handleBottomClose() {
 				this.newRecordBean = null;
 				this.post({
-					url: '/vedio/colseNewest',
+					url: '/vedio/colseNewest',
 					data: {},
 					showLoading: false,
 					success: ({

vedio/pages/my/my.vue

 <template>
 	<view class="body">
 		<view
-			style="display: flex;flex-direction: row;align-items: center;margin: 20rpx;padding-left: 10rpx;padding-top: 40rpx;">
+			:style="'display: flex;flex-direction: row;align-items: center;margin: 20rpx;padding-left: 10rpx;margin-top:'+statusBarHeight+'px;'">
 			<image class="avatar" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/bg_my_vip.png"></image>
 			<view>
 				<view style="font-size: 26rpx;color: black;margin-left: 20rpx;">用户ID：{{userBean.idcode}}</view>
@@ -13,7 +13,8 @@
 			style="display: flex;flex-direction: row;background: #f5ca86;margin: 20rpx;padding: 40rpx;border-radius:20rpx;align-items: center;justify-content:space-between;">
 			<view style="display: flex;flex-direction: column;justify-content: center;">
 				<view style="font-size: 34rpx;color: #5b1500;font-weight: 777;">
-					{{userBean.expireTime<=0 ? '开通VIP会员' : 'VIP会员'}}</view>
+					{{userBean.expireTime<=0 ? '开通VIP会员' : 'VIP会员'}}
+				</view>
 
 				<view v-if="userBean.expireTime<=0" style="font-size: 24rpx;color: #5b1500;margin-top: 12rpx;">
 					解锁全部短剧
@@ -50,7 +51,8 @@
 		</view>
 
 		<view style="display: flex;justify-content: center;margin-top: 20rpx;font-size: 26rpx;color: gray;">
-			{{ versionName }}</view>
+			{{ versionName }}
+		</view>
 	</view>
 
 </template>
@@ -78,13 +80,14 @@
 		mixins: [common],
 		data() {
 			return {
+				statusBarHeight: app.globalData.statusBarHeight,
 				userBean: null,
 				versionName: app.globalData.versionName
 			};
 		},
 		methods: {
 			show() {
-			// loadData() {
+				// loadData() {
 				this.post({
 					url: '/user/baseMsg',
 					showLoading: false,
@@ -94,6 +97,9 @@
 						this.userBean = data;
 					}
 				});
+			},
+			hide() {
+
 			},
 			handleWatchRecord() {
 				navigateTo(`/pagesD/watchRecord/watchRecord`)

vedio/pages/recommend/follow.vue

 <template>
 	<view style="background: white;">
-
-		<view style="position: absolute;left: 20rpx;top: 26rpx;" @click="isEditStyle = !isEditStyle">
-			<image style="width: 60rpx;height: 60rpx;" mode="widthFix"
-				:src="isEditStyle?'/static/video/scRed.png':'/static/video/aixinRed.png'" />
-		</view>
-
-		<scroll-view scroll-y="true" :style="'height: '+(windowHeight -120)+'px;margin-top:50px;'">
+		<scroll-view scroll-y="true"
+			:style="'height: '+(windowHeight -120)+'px;margin-top:'+(titleBarHeight +statusBarHeight)+'px;'">
 			<view class="flex space" style="display:flex; flex-wrap:wrap;">
 				<block v-for="(value,key) in dataList" :key="key">
 					<view class="mt-10"
 						style="width:31%; position: relative; border-radius:20rpx;margin-bottom: 10rpx;margin-left: 14rpx;"
-						@click="click(value.id,key)" @longpress="longClick(key)">
-						<image class="integral-mall-goods" mode="aspectFill" :src="value.img"></image>
-						<view class="text" style="font-size: 26rpx;color: black;">{{value.name}}</view>
-						<view class="text" style="font-size: 22rpx;color: gray;">{{value.name}}</view>
-						<view v-if="isEditStyle" @click.stop="cbClick(key)"
-							style="position: absolute;background: #000000; opacity: 0.6;;width: 100%;height: 100%;top: 0;border-radius:20rpx;
+						@click.stop="click(value.id,key)" @longpress.stop="longClick(key)">
+						<image class="integral-mall-goods" mode="aspectFill" :src="value.coverImage"></image>
+						<view class="text" style="font-size: 26rpx;color: black;">{{value.title}}</view>
+						<view class="text" style="font-size: 22rpx;color: gray;">{{value.vedioDesc}}</view>
+						<view v-if="isEditStyle" @click.stop="cbClick(key)" style="position: absolute;background: #000000; opacity: 0.6;width: 92%;height: 100%;top: 0;border-radius:20rpx;
 							padding-left: 20rpx;padding-top: 20rpx;">
 							<u-checkbox-group @change="onChange(key)">
 								<u-checkbox active-color="red" shape="circle" :checked="value.isChecked" />
@@ -35,11 +29,16 @@
 	import {
 		navigateTo,
 	} from '@/utils/fun.js';
+
+	const app = getApp();
+
 	export default {
 		name: "follow",
 		mixins: [common],
 		data() {
 			return {
+				titleBarHeight: app.globalData.titleBarHeight,
+				statusBarHeight: app.globalData.statusBarHeight,
 				windowHeight: 0,
 				dataList: [],
 				isEditStyle: false
@@ -56,7 +55,7 @@
 		methods: {
 			show() {
 				this.windowHeight = uni.getSystemInfoSync().windowHeight
-				this.queryList()
+				this.loadData()
 			},
 			loadData() {
 				// 收藏记录
@@ -70,9 +69,12 @@
 					}
 				});
 			},
+			changeEditStyle(b) {
+				this.isEditStyle = b
+			},
 			click(id, key) {
-				// this.isEditStyle = true
-				// this.dataList[key].isChecked = true
+				this.isEditStyle = true
+				this.dataList[key].isChecked = true
 			},
 			longClick(key) {
 				this.isEditStyle = true
@@ -97,7 +99,7 @@
 			deleteCollect() {
 				let list = []
 				for (let i = 0; i < this.dataList.length; i++) {
-					list.add(this.dataList[i])
+					list.push(this.dataList[i])
 				}
 
 				// 取消收藏

vedio/pages/recommend/recommend.vue

 <template>
 	<view class="body">
 
-		<view class="tabContainer">
-			<tabs-center class="center" :tabs="tabs" v-model="current" @change="handleChange" />
-		</view>
+		<view class="tabContainer" :style="
+		'height:' +
+        titleBarHeight +
+        'px;line-height:' +
+        titleBarHeight +
+        'px;padding-top:' +
+        statusBarHeight +
+        'px;background-color:transparent'
+		">
+			<view v-if="current==0" :style="'position: absolute;left: 20rpx;top:'+ (statusBarHeight + 10) + 'px'"
+				@click.stop="showEditBar = !showEditBar">
+				<image style="width: 50rpx;height: 50rpx;" mode="widthFix"
+					:src="showEditBar?'/static/video/close.png':'/static/video/edit.png'" />
+			</view>
+			<view v-show="showEditBar" style="width: 300rpx;background: white;z-index: 999;">
+				<view
+					style="font-size: 36rpx;text-align: center;align-items: center;height:100rpx;line-height: 100rpx;">
+					追剧
+				</view>
+			</view>
+			<view v-if="(!showEditBar && showTap)">
+				<u-tabs :list="tabs" :current="current" @change="handleChange" lineWidth="30" :scrollable="false"
+					:lineColor="current==0?'#f56c6c':'#ffffff'" :activeStyle="{
+				            color: current==0?'#000000':'#ffffff',
+				            fontWeight: 'bold',
+				            transform: 'scale(1.05)'
+				        }" :inactiveStyle="{
+				            color: '#606266',
+				            transform: 'scale(1)'
+				        }" />
 
-		<view v-if="showEditBar"
-			style="position: absolute;top:0;left:50%;width: 300rpx;margin-left:-150rpx;background: white;z-index: 999;">
-			<view style="font-size: 36rpx;text-align: center;align-items: center;height:100rpx;line-height: 100rpx;">追剧
 			</view>
+
 		</view>
 
 		<swiper class="swiper" @change="swiperChange" :current="current" :disable-touch="showEditBar">
@@ -35,6 +60,8 @@
 		navigateTo,
 	} from '@/utils/fun.js';
 
+	const app = getApp();
+
 	export default {
 		name: "recommend",
 		mixins: [common],
@@ -47,32 +74,46 @@
 				current: 1,
 				tabIndex: 1,
 				tabs: [{
-					title: '追剧',
-					value: 0
+					name: '追剧'
 				}, {
-					title: '推荐',
-					value: 1
+					name: '推荐'
 				}],
 				showEditBar: false,
+				showTap: false,
+				titleBarHeight: app.globalData.titleBarHeight,
+				titleButtonWidth: app.globalData.titleButtonWidth,
+				statusBarHeight: app.globalData.statusBarHeight,
 			}
 		},
 		onLoad(e) {
-
+		},
+		watch: {
+			showEditBar: {
+				handler(newValue, oldValue) {
+					this.$refs.follow.changeEditStyle(newValue);
+				}
+			},
 		},
 		methods: {
 			hide() {
 				this.$refs.recommendVideo.stop();
 			},
 			show() {
+				this.$nextTick(() => {
+					// 延迟渲染，否则位置错乱
+					this.showTap = true
+				})
 				if (this.current == 0) {
 					this.$refs.follow.show();
 					this.$refs.recommendVideo.stop();
+					this.$emit("changeBottomBarColor", false);
 				} else if (this.current == 1) {
 					this.$refs.recommendVideo.show();
+					this.$emit("changeBottomBarColor", true);
 				}
 			},
 			handleChange(event) {
-				this.current = event.value;
+				this.current = event.index;
 				this.show()
 			},
 			swiperChange(event) {
@@ -104,18 +145,18 @@
 	}
 
 	.tabContainer {
+		width: 100%;
 		position: absolute;
-		margin-top: 30rpx;
-		width: 400rpx;
-		left: 50%;
-		margin-left: -200rpx;
-
-		.v-tabs {
-			height: 70rpx;
-		}
+		z-index: 100;
+		display: flex;
+		align-items: center;
+		overflow: hidden;
+		justify-content: center;
 	}
 
 	.swiper {
 		height: 100%;
 	}
+
+	.recommendTitle {}
 </style>
\ No newline at end of file

vedio/pages/recommend/recommendVideo.vue

 <template>
 	<view class="body">
-		<!-- <status-title :showBack="false">推荐</status-title> -->
 		<swiper class="swiper" circular @change="swiperChange" :current="current" :vertical="true" duration="300">
 
 			<swiper-item v-for="(list, index) in displaySwiperList" :key="index">
 				<view v-if="Math.abs(displayIndex-index)!=0" style="z-index: 999;height: 100%;">
-					<video muted="muted" v-if="Math.abs(displayIndex-index)!=0" :id="''+list.vedioId"
-						:controls="controls" :autoplay="false" :loop="false" @ended="ended"
-						@controlstoggle="controlstoggle" :show-fullscreen-btn="false" @click="tapVideoHover()"
-						:style="'width:100%; height:100%;'" :src="list.recommendUrl">
-					</video>
+					<video v-if="Math.abs(displayIndex-index)!=0" :id="''+list.vedioId" :controls="controls"
+						:loop="false" @ended="ended" @controlstoggle="controlstoggle" :show-fullscreen-btn="false"
+						@click="tapVideoHover()" :style="'width:100%; height:100%;'" :src="list.recommendUrl"
+						play-btn-position="center" object-fit="fill" />
 				</view>
 				<view v-if="Math.abs(displayIndex-index)==0" style="height: 100%;">
-					<video muted="muted" v-if="Math.abs(displayIndex-index)==0" :id="''+list.vedioId"
-						:controls="controls" :isplay="true" :loop="!isplay" @ended="ended"
-						@controlstoggle="controlstoggle" :show-fullscreen-btn="false" @click="tapVideoHover()"
-						:enable-progress-gesture="false" :style="'width:100%; height:100%;'" :src="list.recommendUrl">
-					</video>
+					<video v-if="Math.abs(displayIndex-index)==0" :id="''+list.vedioId" :controls="controls"
+						:isplay="true" :loop="!isplay" @ended="ended" @controlstoggle="controlstoggle"
+						:show-fullscreen-btn="false" @click="tapVideoHover()" :enable-progress-gesture="false"
+						:style="'width:100%; height:100%;'" :src="list.recommendUrl" play-btn-position="center"
+						object-fit="fill" />
 				</view>
 				<view v-if="isqp" class="userInfo flex">
 					<!-- 点赞 -->
@@ -85,7 +83,7 @@
 				playCount: 2, // 剩余多少视频加载视频列表
 				nodate: true, // true 有数据 
 				issp: '',
-				isqp: true, // 是否全屏
+				isqp: false, // 是否全屏
 				page: 1,
 				urls: "https://xjc.demo.hongcd.com/api/video/videoRecommend?page=1&uid=0",
 				dataList: [],
@@ -382,27 +380,28 @@
 		z-index: 99;
 		width: 100%;
 		position: absolute;
-		bottom: 32px;
+		// bottom: 32px;
+		bottom: 0;
 		color: #ffffff;
 		flex-direction: column;
 		align-items: flex-start;
 	}
 
 	.userName {
-		font-size: 30rpx;
+		font-size: 36rpx;
 		color: #ffffff;
 		margin-left: 10rpx;
 	}
 
 	.wordss {
-		font-size: 26rpx;
+		font-size: 30rpx;
 		color: #ffffff;
 		margin-left: 10rpx;
 	}
 
 	.wordss2 {
 		width: 100%;
-		height: 60rpx;
+		height: 80rpx;
 		opacity: 0.6;
 		background: black;
 		display: flex;
@@ -419,18 +418,18 @@
 		.wordsss {
 			margin-right: 10rpx;
 			margin-left: auto;
-			font-size: 22rpx;
+			font-size: 26rpx;
 			color: #ffffff;
-			padding: 3rpx 10rpx;
+			padding: 4rpx 12rpx;
 			border-radius: 30rpx;
-			background: red;
+			background: darkgrey;
 		}
 	}
 
 	.words {
 		margin-top: 20rpx;
 		margin-left: 10rpx;
-		font-size: 26rpx;
+		font-size: 30rpx;
 		color: #ffffff;
 	}
 </style>
\ No newline at end of file

vedio/utils/utils.js

@@ -271,44 +271,67 @@ export function imageCompress(file) {
 		})
 
 	})
-}
-
-//压缩base64图片
-export function base64Compress(base64String, w, quality) {
-	
-    var getMimeType = (urlData) => {
-        var arr = urlData.split(",");
-        var mime = arr[0].match(/:(.*?);/)[1];
-        // return mime.replace("image/", "");
-        return mime;
-    };
-    var newImage = new Image();
-    var imgWidth, imgHeight;
- 
-    var promise = new Promise((resolve) => (newImage.onload = resolve));
-    newImage.src = base64String;
-    return promise.then(() => {
-        imgWidth = newImage.width;
-        imgHeight = newImage.height;
-        var canvas = document.createElement("canvas");
-        var ctx = canvas.getContext("2d");
-        if (Math.max(imgWidth, imgHeight) > w) {
-            if (imgWidth > imgHeight) {
-                canvas.width = w;
-                canvas.height = (w * imgHeight) / imgWidth;
-            } else {
-                canvas.height = w;
-                canvas.width = (w * imgWidth) / imgHeight;
-            }
-        } else {
-            canvas.width = imgWidth;
-            canvas.height = imgHeight;
-        }
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
-        var base64 = canvas.toDataURL(getMimeType(base64String), quality);
-        console.log(base64);
-        return base64;
-    });
-}
-
+}
+
+//压缩base64图片
+export function base64Compress(base64String, w, quality) {
+
+	var getMimeType = (urlData) => {
+		var arr = urlData.split(",");
+		var mime = arr[0].match(/:(.*?);/)[1];
+		// return mime.replace("image/", "");
+		return mime;
+	};
+	var newImage = new Image();
+	var imgWidth, imgHeight;
+
+	var promise = new Promise((resolve) => (newImage.onload = resolve));
+	newImage.src = base64String;
+	return promise.then(() => {
+		imgWidth = newImage.width;
+		imgHeight = newImage.height;
+		var canvas = document.createElement("canvas");
+		var ctx = canvas.getContext("2d");
+		if (Math.max(imgWidth, imgHeight) > w) {
+			if (imgWidth > imgHeight) {
+				canvas.width = w;
+				canvas.height = (w * imgHeight) / imgWidth;
+			} else {
+				canvas.height = w;
+				canvas.width = (w * imgWidth) / imgHeight;
+			}
+		} else {
+			canvas.width = imgWidth;
+			canvas.height = imgHeight;
+		}
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
+		var base64 = canvas.toDataURL(getMimeType(base64String), quality);
+		console.log(base64);
+		return base64;
+	});
+}
+
+export function getSubList(length, list) {
+	var size = list.length
+	var temp = size / length + 1
+	var result = (size % length) == 0
+	var subList = []
+	for (let i = 0; i < temp; i++) {
+		if (i == temp - 1) {
+			if (result) {
+				break
+			}
+			let tempList = list.slice(length * i, size)
+			if (tempList.length > 0) {
+				subList.push(tempList)
+			}
+		} else {
+			let tempList = list.slice(length * i, length * (i + 1))
+			if (tempList.length > 0) {
+				subList.push(tempList)
+			}
+		}
+	}
+	return subList
+}
\ No newline at end of file