添加删除功能

vedio/components/icons2/iconfont2.scss

+@font-face {
+  font-family: "iconfont"; /* Project id 3284269 */
+		src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-fenxiang:before {
+  content: "\e600";
+}
+
+.icon-31guanbi:before {
+  content: "\e601";
+}
+
+.icon-bianji1:before {
+  content: "\e602";
+}
+
+

vedio/components/icons2/icons2.vue

+<template>
+  <text :class="'iconfont icon-' + icon" :style="'color:' + color + ';font-size:' + size + 'rpx;' + customStyle" @click="handleClick"></text>
+</template>
+
+<script>
+export default {
+  name: 'icons',
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    customStyle: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: [Number, String],
+      default: 28
+    },
+    color: {
+      type: String,
+      default: '#000000'
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click');
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import './iconfont2.scss';
+</style>

vedio/components/status-title2/status-title2.vue

+<template>
+	<!-- #ifndef H5 -->
+	<view class="status-title" :style="
+      'height:' +
+        titleBarHeight +
+        'px;line-height:' +
+        titleBarHeight +
+        'px;padding-top:' +
+        statusBarHeight +
+        'px;padding-right:' +
+        titleButtonWidth +
+        'px;background-color:' +
+        color + ';color:' +
+		fontColor
+    ">
+		<view class="status-title-back" :style="'padding-left:' + titlePadding + 'px;'">
+			<icons2 v-if="showBack" :icon="iconClone" :color="iconColor"
+				:customStyle="'padding:' + titlePadding + 'px;'" @click="back" size="40" />
+		</view>
+
+		<view class="status-title-back2" :style="'padding-left:' + titlePadding + 'px;'">
+			<icons2 v-if="showEdit" :icon="iconEdit" :color="iconColor" :customStyle="'padding:' + titlePadding + 'px;'"
+				@click="isEdit = !isEdit" size="40" />
+		</view>
+
+		<view class="status-title-title">
+			<slot></slot>
+		</view>
+	</view>
+	<!-- #endif -->
+</template>
+
+<script>
+	import {
+		navigateBack,
+		reLaunch
+	} from '@/utils/fun';
+
+	const app = getApp();
+	export default {
+		name: 'status-title',
+		data() {
+			return {
+				titleBarHeight: app.globalData.titleBarHeight,
+				titlePadding: app.globalData.titlePadding,
+				titleButtonWidth: app.globalData.titleButtonWidth,
+				statusBarHeight: app.globalData.statusBarHeight,
+				iconClone: '',
+				iconEdit: '',
+				// isEdit: false
+			};
+		},
+		props: {
+			isEdit: {
+				type: Boolean,
+				default: false
+			},
+			handleBack: {
+				type: Boolean,
+				default: false
+			},
+			showBack: {
+				type: Boolean,
+				default: true
+			},
+			showEdit: {
+				type: Boolean,
+				default: false
+			},
+			color: {
+				type: String,
+				default: 'transparent'
+			},
+			fontColor: {
+				type: String,
+				default: 'black'
+			},
+			icon: {
+				type: String,
+				default: 'black'
+			},
+			iconColor: {
+				type: String,
+				default: 'black'
+			}
+		},
+		beforeMount() {
+			// #ifdef H5
+			document.title = this.$slots.default && this.$slots.default[0].text;
+			// #endif
+			// #ifndef H5
+			this.iconClone = getCurrentPages().length === 1 ? 'fenxiang' : 'fenxiang';
+			this.iconEdit = 'bianji1'
+			// #endif
+		},
+		methods: {
+			back() {
+				if (this.handleBack) {
+					this.$emit('onBack');
+					return
+				}
+
+				// #ifdef APP-PLUS
+				this.iconClone = getCurrentPages().length === 1 ? 'fenxiang' : 'fenxiang';
+				// #endif
+				if (this.iconClone === 'fenxiang') {
+					navigateBack();
+				} else {
+					reLaunch('index');
+				}
+			}
+		},
+		watch: {
+			icon: {
+				handler(newVal, oldVal) {
+					this.iconClone = newVal;
+				},
+				immediate: true
+			},
+			isEdit: {
+				handler(newVal, oldVal) {
+					this.$emit('update:isEdit', newVal);
+
+					if (newVal) {
+						this.iconEdit = "31guanbi"
+					} else {
+						this.iconEdit = "bianji1"
+					}
+				},
+				immediate: true
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	.status-title {
+		position: relative;
+		z-index: 100;
+		display: flex;
+		// color: #ffffff;
+		color: black;
+		align-items: center;
+		overflow: hidden;
+
+		&-back {
+			box-sizing: border-box;
+			text-align: left;
+		}
+
+		&-back2 {
+			box-sizing: border-box;
+			text-align: left;
+		}
+
+		&-title {
+			flex: 1;
+			text-align: center;
+			font-size: 36rpx;
+		}
+	}
+</style>
\ No newline at end of file

vedio/components/uni-transition/uni-transition.vue

-<!-- 底部弹窗需要组件（分享） -->
-
-<template>
-	<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
-	 @click="change">
-		 <slot></slot>
-	</view>
-</template>
-
-<script>
-	// #ifdef APP-NVUE
-	const animation = uni.requireNativePlugin('animation');
-	// #endif
-	/**
-	 * Transition 过渡动画
-	 * @description 简单过渡动画组件
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=985
-	 * @property {Boolean} show = [false|true] 控制组件显示或隐藏
-     * @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
-     *  @value fade 渐隐渐出过渡
-     *  @value slide-top 由上至下过渡
-     *  @value slide-right 由右至左过渡
-     *  @value slide-bottom 由下至上过渡
-     *  @value slide-left 由左至右过渡
-     *  @value zoom-in 由小到大过渡
-     *  @value zoom-out 由大到小过渡
-	 * @property {Number} duration 过渡动画持续时间
-	 * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
-	 */
-	export default {
-		name: 'uniTransition',
-		props: {
-			show: {
-				type: Boolean,
-				default: false
-			},
-			modeClass: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			duration: {
-				type: Number,
-				default: 300
-			},
-			styles: {
-				type: Object,
-				default () {
-					return {}
-				}
-			}
-		},
-		data() {
-			return {
-				isShow: false,
-				transform: '',
-				ani: { in: '',
-					active: ''
-				}
-			};
-		},
-		watch: {
-			show: {
-				handler(newVal) {
-					if (newVal) {
-						this.open()
-					} else {
-						this.close()
-					}
-				},
-				immediate: true
-			}
-		},
-		computed: {
-			stylesObject() {
-				let styles = {
-					...this.styles,
-					'transition-duration': this.duration / 1000 + 's'
-				}
-				let transfrom = ''
-				for (let i in styles) {
-					let line = this.toLine(i)
-					transfrom += line + ':' + styles[i] + ';'
-				}
-				return transfrom
-			}
-		},
-		created() {
-			// this.timer = null
-			// this.nextTick = (time = 50) => new Promise(resolve => {
-			// 	clearTimeout(this.timer)
-			// 	this.timer = setTimeout(resolve, time)
-			// 	return this.timer
-			// });
-		},
-		methods: {
-			change() {
-				this.$emit('click', {
-					detail: this.isShow
-				})
-			},
-			open() {
-				clearTimeout(this.timer)
-				this.isShow = true
-				this.transform = ''
-				this.ani.in = ''
-				for (let i in this.getTranfrom(false)) {
-					if (i === 'opacity') {
-						this.ani.in = 'fade-in'
-					} else {
-						this.transform += `${this.getTranfrom(false)[i]} `
-					}
-				}
-				this.$nextTick(() => {
-					setTimeout(() => {
-						this._animation(true)
-					}, 50)
-				})
-
-			},
-			close(type) {
-				clearTimeout(this.timer)
-				this._animation(false)
-			},
-			_animation(type) {
-				let styles = this.getTranfrom(type)
-				// #ifdef APP-NVUE
-				if(!this.$refs['ani']) return
-				animation.transition(this.$refs['ani'].ref, {
-					styles,
-					duration: this.duration, //ms
-					timingFunction: 'ease',
-					needLayout: false,
-					delay: 0 //ms
-				}, () => {
-					if (!type) {
-						this.isShow = false
-					}
-					this.$emit('change', {
-						detail: this.isShow
-					})
-				})
-				// #endif
-				// #ifndef APP-NVUE
-				this.transform = ''
-				for (let i in styles) {
-					if (i === 'opacity') {
-						this.ani.in = `fade-${type?'out':'in'}`
-					} else {
-						this.transform += `${styles[i]} `
-					}
-				}
-				this.timer = setTimeout(() => {
-					if (!type) {
-						this.isShow = false
-					}
-					this.$emit('change', {
-						detail: this.isShow
-					})
-
-				}, this.duration)
-				// #endif
-
-			},
-			getTranfrom(type) {
-				let styles = {
-					transform: ''
-				}
-				this.modeClass.forEach((mode) => {
-					switch (mode) {
-						case 'fade':
-							styles.opacity = type ? 1 : 0
-							break;
-						case 'slide-top':
-							styles.transform += `translateY(${type?'0':'-100%'}) `
-							break;
-						case 'slide-right':
-							styles.transform += `translateX(${type?'0':'100%'}) `
-							break;
-						case 'slide-bottom':
-							styles.transform += `translateY(${type?'0':'100%'}) `
-							break;
-						case 'slide-left':
-							styles.transform += `translateX(${type?'0':'-100%'}) `
-							break;
-						case 'zoom-in':
-							styles.transform += `scale(${type?1:0.8}) `
-							break;
-						case 'zoom-out':
-							styles.transform += `scale(${type?1:1.2}) `
-							break;
-					}
-				})
-				return styles
-			},
-			_modeClassArr(type) {
-				let mode = this.modeClass
-				if (typeof(mode) !== "string") {
-					let modestr = ''
-					mode.forEach((item) => {
-						modestr += (item + '-' + type + ',')
-					})
-					return modestr.substr(0, modestr.length - 1)
-				} else {
-					return mode + '-' + type
-				}
-			},
-			// getEl(el) {
-			// 	console.log(el || el.ref || null);
-			// 	return el || el.ref || null
-			// },
-			toLine(name) {
-				return name.replace(/([A-Z])/g, "-$1").toLowerCase();
-			}
-		}
-	}
-</script>
-
-<style>
-	.uni-transition {
-		transition-timing-function: ease;
-		transition-duration: 0.3s;
-		transition-property: transform, opacity;
-	}
-
-	.fade-in {
-		opacity: 0;
-	}
-
-	.fade-active {
-		opacity: 1;
-	}
-
-	.slide-top-in {
-		/* transition-property: transform, opacity; */
-		transform: translateY(-100%);
-	}
-
-	.slide-top-active {
-		transform: translateY(0);
-		/* opacity: 1; */
-	}
-
-	.slide-right-in {
-		transform: translateX(100%);
-	}
-
-	.slide-right-active {
-		transform: translateX(0);
-	}
-
-	.slide-bottom-in {
-		transform: translateY(100%);
-	}
-
-	.slide-bottom-active {
-		transform: translateY(0);
-	}
-
-	.slide-left-in {
-		transform: translateX(-100%);
-	}
-
-	.slide-left-active {
-		transform: translateX(0);
-		opacity: 1;
-	}
-
-	.zoom-in-in {
-		transform: scale(0.8);
-	}
-
-	.zoom-out-active {
-		transform: scale(1);
-	}
-
-	.zoom-out-in {
-		transform: scale(1.2);
-	}
-</style>

vedio/mixins/common.js

@@ -143,7 +143,7 @@ export default {
 
       Object.assign(header, {
         // token: uni.getStorageSync('token'),
-        token: 'EF05F562126806736038B218E12884F9483D433C42E9B84882577C78642C25CF5F433703067DF5142735505C42F58997',
+        token: 'A4A51158A9011FE1B2B0D8E35D657258483D433C42E9B84882577C78642C25CF5F433703067DF5142735505C42F58997',
         pkgName: app.globalData.pkgName,
 		proChannel:uniChannel
       })

vedio/pages/index/index.vue

@@ -248,9 +248,15 @@
 				topList: [],
 				statusBarHeight: app.globalData.statusBarHeight,
 			};
+		},
+		onShow() {
+			this.show()
+		},
+		onHide() {
+			this.hide()
 		},
 		methods: {
-			onShow() {
+			show() {
 				// 匹配视频
 				this.showFirstDialog();
 				// 轮播图

vedio/pages/my/my.vue

@@ -70,10 +70,10 @@
 				<view v-if="userBean.showVipInner && os === 'android' " class="item arrow" @click="handlePayRecord">
 					我的订单
 					<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
-				</view>
-				<view  class="item arrow" @click="handleVedio">
-					我的追剧
-					<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
+				</view>
+				<view class="item arrow" @click="handleVedio">
+					我的追剧
+					<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
 				</view>
 				<view v-if="os === 'android' " class="item arrow" @click="handleDotRecord">
 					看点记录
@@ -138,8 +138,14 @@
 				curl: '', // 客服链接
 			};
 		},
+		onShow() {
+			this.show()
+		},
+		onHide() {
+			this.hide()
+		},
 		methods: {
-			onShow() {
+			show() {
 				// this.os = wx.getSystemInfoSync().platform;
 				this.windowHeight = uni.getSystemInfoSync().windowHeight
 				// loadData() {
@@ -155,9 +161,9 @@
 			},
 			hide() {
 
-			},
-			handleVedio(){
-				navigateTo(`/pages/recommend/follow`)
+			},
+			handleVedio() {
+				navigateTo(`/pages/recommend/follow`)
 			},
 			handleDotRecord() {
 				// 看点记录

vedio/pages/recommend/follow.vue

 <template>
 	<view style="background-color: white;">
-		<status-title :showBack="true">我的追剧</status-title>
-		<scroll-view scroll-y="true"
-			:style="'height: '+(windowHeight -80)+'px;'">
-			<view class="flex space" style="display:flex; flex-wrap:wrap;height: 100%;width: 100%;background-color: white;">
+		<status-title2 :isEdit.sync="isEditStyle" :showEdit="true" :showBack="true">我的追剧</status-title2>
+		<scroll-view scroll-y="true" :style="'height: '+(windowHeight -80)+'px;padding-bottom:110rpx;'">
+			<view class="flex space"
+				style="display:flex; flex-wrap:wrap;height: 100%;width: 100%;background-color: white;">
 				<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;"
@@ -27,11 +27,20 @@
 			</view>
 		</scroll-view>
 
-		<!-- <view v-if="dataList.length<=0"
+		<view v-if="dataList.length<=0"
 			style="position: absolute;left: 50%;width: 240rpx;margin-left: -120rpx;top: 600rpx;text-align: center;">
 			<text style="color: gray;">暂无在追剧</text>
-			<view @click="goRecommend" class="button" style="margin-top: 20rpx;color: white;">去剧场</view>
-		</view> -->
+			<!-- <view @click="goRecommend" class="button" style="margin-top: 20rpx;color: white;">去剧场</view> -->
+		</view>
+
+		<view v-if="isEditStyle" class="editBar" :style="'padding-bottom:' + bottomSafePadding + 'px;'">
+			<view class="editItem" @click="!isFullChoice?fullChoice():noChoice()">
+				{{!isFullChoice?'全选':'全不选'}}
+			</view>
+			<view class="editItem" @click="deleteCollect">
+				删除
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -53,14 +62,13 @@
 				statusBarHeight: app.globalData.statusBarHeight,
 				windowHeight: 0,
 				dataList: [],
-				isEditStyle: false
+				isEditStyle: false,
+				isFullChoice: false,
 			}
 		},
 		watch: {
 			isEditStyle: {
-				handler(newValue, oldValue) {
-					this.$emit("showEditBarR", newValue)
-				}
+				handler(newValue, oldValue) {}
 			},
 		},
 		onLoad(e) {},
@@ -111,12 +119,14 @@
 				this.$set(this.dataList, key, newData)
 			},
 			fullChoice() {
+				this.isFullChoice = !this.isFullChoice
 				for (let i = 0; i < this.dataList.length; i++) {
 					this.dataList[i].isChecked = true
 				}
 				this.$forceUpdate()
 			},
 			noChoice() {
+				this.isFullChoice = !this.isFullChoice
 				for (let i = 0; i < this.dataList.length; i++) {
 					this.dataList[i].isChecked = false
 				}
@@ -171,4 +181,20 @@
 		margin-left: 10rpx;
 		// position: absolute;
 	}
+
+	.editBar {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+		height: 110rpx;
+		background: white;
+		display: flex;
+
+		.editItem {
+			height: 110rpx;
+			line-height: 110rpx;
+			text-align: center;
+			width: 50%;
+		}
+	}
 </style>
\ No newline at end of file

vedio/pages/recommend/recommendVideo.vue

 <template>
 	<view class="body">
-		<swiper style="height: 100%;width: 100%;" class="swiper" circular @change="swiperChange" :current="current" :vertical="true" duration="300">
+		<swiper style="height: 100%;width: 100%;" class="swiper" circular @change="swiperChange" :current="current"
+			:vertical="true" duration="300">
 
 			<swiper-item v-for="(list, index) in displaySwiperList" :key="index" style="height: 100%;width: 100%;">
 				<view v-if="Math.abs(displayIndex-index)==0" style="height: 100%;width: 100%;">
-					<video style="height: 100%;width: 100%;" v-if="Math.abs(displayIndex-index)==0" :id="''+list.vedioId" :controls="controls"
-						:autoplay="true" :isplay="true" play-btn-position="center" :loop="!isplay" @ended="ended"
-						@controlstoggle="controlstoggle" :show-fullscreen-btn="false" :poster="list.coverImage"
-						:show-loading="true" @click="tapVideoHover()" :enable-progress-gesture="false" class="tsvideo"
+					<video style="height: 100%;width: 100%;" v-if="Math.abs(displayIndex-index)==0"
+						:id="''+list.vedioId" :controls="controls" :autoplay="true" :isplay="true"
+						play-btn-position="center" :loop="!isplay" @ended="ended" @controlstoggle="controlstoggle"
+						:show-fullscreen-btn="false" :poster="list.coverImage" :show-loading="true"
+						@click="tapVideoHover()" :enable-progress-gesture="false" class="tsvideo"
 						:src="list.recommendUrl" object-fit="cover" />
 				</view>
 				<view v-if="!isqp" class="userInfo flex">
@@ -84,6 +86,12 @@
 			this.windowWidth = uni.getSystemInfoSync().windowWidth
 			this.windowHeight = uni.getSystemInfoSync().windowHeight
 		},
+		onShow() {
+			this.show()
+		},
+		onHide() {
+			this.stop()
+		},
 		methods: {
 			reShare() {
 				var href = ''
@@ -118,7 +126,7 @@
 				})
 				// #endif 
 			},
-			onShow() {
+			show() {
 				if (this.isFirstLoad) {
 					this.isFirstLoad = false
 					this.queryList()