新增图片视频选择预览组件

App.vue

@@ -4,7 +4,7 @@
 			projectname:'', // 项目名称
 			lat:'', // 公司地址维度
 			lng:''  ,// 公司地址经度
-			hostapi:'http://maintain.7and5.cn' // 域名配置
+			hostapi:'https://www.baidu.com' // 域名配置
 		},
 		// 优先于show方法
 		onLaunch: function() {

commons/base.css

@@ -73,7 +73,7 @@ button:after{content: none!important;}
 .bbot{border-bottom: 2rpx solid #EEEEEE;}
 .borbot-df{border: 2rpx solid #DFDFDF;}
 .borbot-cc{border: 2rpx solid #CCCCCC;}
-.bleft {border-left: 1rpx solid #EEEEEE;}
+.bleft {border-left: 2rpx solid #EEEEEE;}
 
 /* 行高 */
 .line-h30{line-height: 30rpx;}

components/choose-imgs/choose-img-one.vue

@@ -46,6 +46,7 @@
 </template>
 
 <script>
+	import imgTools from '@/jsFile/img/yy-img.js';
 	export default {
 		name:"img-one",
 		props: {
@@ -126,10 +127,11 @@
 			},
 			// 预览图片
 			preImg(index) {
-				uni.previewImage({
-					current: index,
-					urls: this.imgList
-				})
+				imgTools.previewImg(index,this.imgList);
+				// uni.previewImage({
+				// 	current: index,
+				// 	urls: this.imgList
+				// })
 			}
 		}
 	}

components/custom-preview/img-video-preview.vue

@@ -0,0 +1,155 @@
+<template>
+	<view>
+		<swiper class="swiper-preview" :duration="500"
+		:style="{width:nwidth+'px',height:nheight + 'px'}"
+		:current="currentNum" @change="changeSwiper">
+			<swiper-item v-for="(item,index) in list" :key="index">
+				<!-- 可上下滚动框 -->
+				<view :class="ifCenter ? 'disjcac' : 'dis'" scroll-y="true" :style="{height:nheight + 'px'}" style="overflow: hidden;overflow-y: scroll;">
+					<!-- 视频 -->
+					<video v-if="item.src.includes('.mp4')" :src="item.src" controls enable-play-gesture show-center-play-btn></video>
+					<!-- 图片 -->
+					<image :class="'img--'+index" v-else class="width100" :src="item.src" mode="widthFix"></image>
+				</view>
+			</swiper-item>
+		</swiper>
+		<!-- 头部信息 -->
+		<view class="swiper-text-box">
+			<view class="fon28 mar-x10 disjbac fe">
+				<!-- 标题 -->
+				<view v-if="list[currentNum].title" class="clips1 width100" :style="{color:titlec}">{{list[currentNum].title}}</view>
+				<!-- 描述 -->
+				<view class="flexs pad-sx10 pad-zy20 radius10 colf" :style="{background: changeBackgroundColor}"><text>{{currentNum+1}}</text>/<text>{{list.length}}</text></view>
+			</view>
+			<!-- 当前索引-1和总数 -->
+			<view v-if="list[currentNum].content" class="clips2 fon24 line-h40" :style="{color:contentc}">{{list[currentNum].content}}</view>
+		</view> 
+		<!-- 取消按钮 -->
+		<view class="swiper-close-btn" @tap="closeCustomEv">关闭</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"img-preview",
+		props:{
+			list:{
+				type:Array,
+				default:()=>{
+					return [
+						{src:'',title:'标题',content:'描述描述描述描述描述描述描述描述'},
+						{src:'',title:'标题',content:'描述描述描述描述描述描述描述描述'},
+						{src:'',title:'标题',content:'描述描述描述描述描述描述描述描述'},
+					]
+				}
+			},
+			// 窗体宽度
+			nwidth:{
+				type:String,
+				default: uni.getSystemInfoSync().windowWidth+''
+			},
+			// 窗体高度
+			nheight:{
+				type:String,
+				default: uni.getSystemInfoSync().windowHeight+''
+			},
+			// 标题颜色
+			titlec:{
+				type:String,
+				default:'#FFFFFF'
+			},
+			// 描述颜色
+			contentc:{
+				type:String,
+				default:'#F5F5F5'
+			},
+			imgcurrent:{
+				type:Number,
+				default:0
+			}
+		},
+		data() {
+			return {
+				currentNum:0,
+				changeBackgroundColor:'#000000',
+				ntop: uni.getSystemInfoSync().statusBarHeight + 50,
+				ifCenter:true
+			};
+		},
+		mounted() {
+			this.currentNum = this.imgcurrent*1;
+			setTimeout(()=>{
+				this.obtainImgHeight('img--0');
+			},100)
+		},
+		methods:{
+			obtainImgHeight(classStr) {
+				classStr = `.${classStr}`;
+				const query = wx.createSelectorQuery().in(this)
+				query.select(classStr).boundingClientRect((rect) => {
+					// console.log(rect.height,classStr);
+					console.log(this.nheight,rect.height);
+					if(this.nheight < rect.height) {
+						// 如果屏幕的高度小于当前图片的高度
+						this.ifCenter = false;
+					} else {
+						this.ifCenter = true;
+					}
+				}).exec()
+			},
+			// 改变预览
+			changeSwiper(e) {
+				this.currentNum = e.detail.current;//当前的指示点下标
+				this.obtainImgHeight(`img--${this.currentNum}`);
+				let colorArr = [];
+				for (var i = 0; i < 6; i++) {
+					colorArr.push(Math.floor(Math.random()*10))
+				}
+				this.changeBackgroundColor = `#${colorArr.join('')}`;
+			},
+			// 关闭预览
+			closeCustomEv() {
+				this.$emit('closeCustomEv',false);
+			}
+		}
+	}
+</script>
+
+<style>
+.swiper-preview{
+	position: fixed;top: 0;left: 0;right: 0;bottom: 0;
+	background-color: rgba(0, 0, 0, 1);
+	z-index: 100;
+}
+.swiper-img{
+	width: 100%;
+}
+.swiper-text-box{
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 100;
+	color: #000000;
+	background-color: rgba(0, 0, 0, .6);
+	padding: 20rpx;
+}
+.swiper-close-btn{
+	position: fixed;
+	left: 50%;
+	transform: translateX(-50%);
+	bottom: 60rpx;
+	padding: 20rpx 80rpx;
+	background-color: #FFFFFF;
+	color: #000000;
+	font-size: 28rpx;
+	font-weight: bold;
+	z-index: 100;
+	border-radius: 10rpx;
+	animation: closeBtn 2s ease-in-out alternate infinite;
+}
+@keyframes closeBtn {
+	from{background-color: #FFFFFF;color: #000000;}
+	to{background-color: #000000;color: #FFFFFF;}
+}
+</style>

components/editor/custom-editor.vue

@@ -74,13 +74,19 @@
 
 <script>
 	export default {
-		name:'editor',
+		name:'custom-editor',
 		data() {
 			return {
 				readOnly: false,
 				formats: {}
 			}
 		},
+		onLoad() {
+			uni.loadFontFace({
+				family: 'Pacifico',
+				source: 'url("https://sungd.github.io/Pacifico.ttf")'
+			})
+		},
 		methods: {
 			// 失去焦点时，获取富文本的内容
 			getContents(html){
@@ -152,13 +158,7 @@
 					}
 				})
 			}
-		},
-		onLoad() {
-			uni.loadFontFace({
-				family: 'Pacifico',
-				source: 'url("https://sungd.github.io/Pacifico.ttf")'
-			})
-		},
+		}
 	}
 </script>
 

components/function-list/column/column-function.vue

@@ -0,0 +1,78 @@
+<template>
+	<view>
+		<block v-for="(item,index) in list" :key="index">
+			<view @tap="chooseEv(item.url,index)" class="disjbac fon28" :class="[ifLastLine ? 'bbot' : 'borbot',ifIcon ? 'pad-sx10' : 'pad-sx25']" :style="{borderBottomColor: linec}">
+				<view class="disac flexs pad-y40">
+					<image class="mar-y20 flexs" v-if="!item.iconsrc && ifIcon" :src="item.iconsrc" mode="aspectFill" lazy-load :style="{width:item.iconWidth+'rpx',height:item.iconHeight+'rpx'}"></image>
+					<view :style="{color:titlec}" class="clips1">{{item.title}}</view>
+				</view>
+				<view class="disac">
+					<view v-if="item.content" class="clips1" :style="{color:item.contentColor}">{{item.content}}</view>
+					<i v-if="item.ifNext" class="icon icon-next" style="color: #999999;font-size: 28rpx;margin-left: 10rpx;"></i>
+				</view>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:'column-function',
+		props:{
+			list:{
+				type:Array,
+				default:()=>{
+					return [
+						{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题一',content:'',contentColor:'#999999',ifNext:true},
+						{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题二',content:'',contentColor:'#999999',ifNext:true},
+						{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题三',content:'',contentColor:'#999999',ifNext:true},
+					]
+				}
+			},
+			// 标题颜色
+			titlec:{
+				type:String,
+				default:'#000000'
+			},
+			// 是否显示左侧图标
+			ifIcon:{
+				type:Boolean,
+				default:false
+			},
+			// 是否显示下划线
+			ifLine:{
+				type:Boolean,
+				default:true
+			},
+			// 下划线颜色
+			linec:{
+				type:String,
+				default:"#EEEEEE"
+			},
+			// 是否显示最后一条下划线
+			ifLastLine:{
+				type:Boolean,
+				default:true
+			}
+		},
+		data(){
+			return {
+				
+			}
+		},
+		methods:{
+			// 列表选择事件
+			chooseEv(url,index) {
+				if(url) {
+					uni.navigateTo({url})
+				}
+				// 抛出事件
+				this.$emit('chooseEv',{url,index})
+			}
+		}
+	}
+</script>
+
+<style>
+	
+</style>

components/function-list/column/readme.md

@@ -0,0 +1,43 @@
+第一步：引入组件
+
+	import columnFunction from '@/components/function-list/column/column-function.vue';
+
+第二步：注册组件
+
+	export default {
+		components:{
+			columnFunction
+		}
+	}
+
+第三步：使用组件
+
+	<template>
+		<view>
+			<column-function @chooseEv="chooseEv"></column-function>
+		</view>
+	</template>
+
+参数说明
+
+	list：列表数据，默认以下数组：
+	[
+		{iconsrc:'',iconWidth:60,iconHeight:60,title:'标题一',content:'',contentColor:'#999999',ifNext:true},
+		{iconsrc:'',iconWidth:60,iconHeight:60,title:'标题二',content:'',contentColor:'#999999',ifNext:true},
+		{iconsrc:'',iconWidth:60,iconHeight:60,title:'标题三',content:'',contentColor:'#999999',ifNext:true},
+	]
+	titlec：标题颜色，默认#000000
+	ifIcon：是否显示左侧图标，默认false
+	ifLine：是否显示下划线，默认true
+	linec：下划线颜色，默认#EEEEEE
+	ifLastLine：是否显示最后一条下划线，默认true
+	
+方法使用
+	
+	export default {
+		methods:{
+			chooseEv(obj) {
+				console.log(obj);
+			},
+		}
+	}

components/function-list/gong-ge/gong-ge-function.vue

@@ -0,0 +1,86 @@
+<template>
+	<view class="disac fw bacf" :style="{paddingBottom:itemTop}">
+		<block v-for="(item,index) in list" :key="index">
+			<view @tap="chooseGe(item.url,index)" class="disjcac fc pad-s30" :style="{width:['50%','50%','50%','33.3%','25%','20%'][rowNum],paddingTop:itemTop}">
+				<view class="disjcac" :style="{height: maxHeight+'rpx'}">
+					<image :src="item.iconsrc" mode="widthFix" :style="{width: item.iconWidth +'rpx',height: item.iconHeight +'rpx'}"></image>
+				</view>
+				<view class="clips1" :style="{color:titlec,fontSize:fonts,marginTop:titleTop}">{{item.title}}</view>
+			</view>
+		</block>
+	</view>
+</template>
+<script>
+	export default {
+		name:'column-function',
+		props:{
+			list:{
+				type:Array,
+				default:()=>{
+					return [
+						{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题一'},
+						{url:'',iconsrc:'/static/tabbar/icon-select-fun.png',iconWidth:60,iconHeight:60,title:'标题二'},
+						{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题三'},
+						{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
+						{url:'',iconsrc:'/static/tabbar/icon-scan.png',iconWidth:60,iconHeight:60,title:'标题五'},
+						{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题五'},
+						{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题五'},
+					]
+				}
+			},
+			// 一排显示数量
+			rowNum:{
+				type:String,
+				default:'5'
+			},
+			// 标题颜色
+			titlec:{
+				type:String,
+				default:'#000000'
+			},
+			// 字体大小
+			fonts:{
+				type:String,
+				default:'28rpx'
+			},
+			// 字体距离图标的距离
+			titleTop:{
+				type:String,
+				default:'20rpx'
+			},
+			// item的顶部距离
+			itemTop:{
+				type:String,
+				default:'30rpx'
+			}
+		},
+		data(){
+			return {
+				
+			}
+		},
+		computed:{
+			// 找图标高度最大值
+			maxHeight() {
+				let arr = [];
+				this.list.forEach(item=>{arr.push(item.iconHeight);})
+				let max = arr.reduce((a,b)=>{return b > a ? b : a})
+				return max;
+			}
+		},
+		methods:{
+			// 列表选择事件
+			chooseGe(url,index) {
+				// 抛出事件
+				this.$emit('chooseGe',{url,index})
+				if(url) {
+					uni.navigateTo({url})
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+	
+</style>

components/function-list/gong-ge/readme.md

@@ -0,0 +1,47 @@
+第一步：引入组件
+
+	import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function.vue';
+
+第二步：注册组件
+
+	export default {
+		components:{
+			gongGeFunction
+		}
+	}
+
+第三步：使用组件
+
+	<template>
+		<view>
+			<gong-ge-function @chooseGe="chooseGe"></gong-ge-function>
+		</view>
+	</template>
+
+参数说明
+
+	list：列表数据，默认以下数组：
+	[
+		{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题一'},
+		{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题二'},
+		{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题三'},
+		{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题四'},
+		{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题五'},
+		{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题五'},
+		{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题五'},
+	]
+	rowNum：一排显示数量，默认5
+	titlec：标题颜色，默认#000000
+	fonts：字体大小，默认28rpx
+	titleTop：字体距离图标的距离，默认20rpx
+	itemTop：item的顶部距离，默认30rpx
+	
+方法使用
+	
+	export default {
+		methods:{
+			chooseGe(obj) {
+				console.log(obj);
+			},
+		}
+	}

components/function-list/swiper-gong-ge/readme.md

@@ -0,0 +1,57 @@
+第一步：引入组件
+
+	import swiperGongGe from '@/components/function-list/swiper-gong-ge/swiper-gong-ge.vue';
+
+第二步：注册组件
+
+	export default {
+		components:{
+			swiperGongGe
+		}
+	}
+
+第三步：使用组件
+
+	<template>
+		<view>
+			<swiper-gong-ge @chooseGe="chooseGe"></swiper-gong-ge>
+		</view>
+	</template>
+
+参数说明
+
+	list：列表数据，默认以下数组：
+	[
+		[
+			{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题一'},
+			{url:'',iconsrc:'/static/tabbar/icon-select-fun.png',iconWidth:60,iconHeight:60,title:'标题二'},
+			{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题三'},
+			{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
+			{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
+			{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
+		],
+		[
+			{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题一'},
+			{url:'',iconsrc:'/static/tabbar/icon-select-fun.png',iconWidth:60,iconHeight:60,title:'标题二'},
+			{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题三'},
+			{url:'',iconsrc:'/static/tabbar/icon-scan.png',iconWidth:60,iconHeight:60,title:'标题五'},
+		]
+	]
+	ifAutoplay：是否自动轮播，默认false
+	rowNum：一排显示数量，默认5
+	titlec：标题颜色，默认#000000
+	fonts：字体大小，默认28rpx
+	titleTop：字体距离图标的距离，默认20rpx
+	itemTop：item的顶部距离，默认30rpx
+	activeStop：选中时指示点的颜色，默认rgba(0,0,0,1)
+	moStop：未选中时指示点的颜色，默认rgba(0,0,0,.2)
+	
+方法使用
+	
+	export default {
+		methods:{
+			chooseGe(obj) {
+				console.log(obj);
+			},
+		}
+	}

components/function-list/swiper-gong-ge/swiper-gong-ge.vue

@@ -0,0 +1,173 @@
+<template>
+	<view class="posir">
+		<swiper class="bacf width100" 
+			:current="currentIndex" 
+			:indicator-dots="ifAutoplay" 
+			:autoplay="false" 
+			:duration="500" 
+			:style="{paddingBottom:itemTop,height: swiperHeight+'px'}"
+			@change="changeEv">
+			<swiper-item v-for="(items,indexs) in list" :key="indexs">
+				<view class="disac fw">
+					<block v-for="(item,index) in items" :key="index">
+						<view @tap="chooseGe(item.url,index)" class="disjcac fc swiper-item-box" :style="{width:['50%','50%','50%','33.3%','25%','20%'][rowNum],paddingTop:itemTop}">
+							<view class="disjcac" :style="{height: maxHeight+'rpx'}">
+								<!-- 图片 -->
+								<image :src="item.iconsrc" mode="widthFix" :style="{width: item.iconWidth +'rpx',height: item.iconHeight +'rpx'}"></image>
+							</view>
+							<!-- 标题 -->
+							<view class="clips1" :style="{color:titlec,fontSize:fonts,marginTop:titleTop}">{{item.title}}</view>
+						</view>
+					</block>
+				</view>
+			</swiper-item>
+		</swiper>
+		<!-- 指示点 -->
+		<view class="posia disjcac width100" style="bottom: 20rpx;">
+			<view class="mar-y10 gong-ge-spot" 
+			:class="currentIndex==index ? 'active-spot' : ''" 
+			v-for="(item,index) in list.length" :key="index"
+			:style="{backgroundColor:currentIndex==index ? activeStop : moStop}"></view>
+		</view>
+	</view>
+</template>
+<script>
+	import imgTools from '@/jsFile/img/yy-img.js';
+	export default {
+		name:'column-function',
+		props:{
+			list:{
+				type:Array,
+				default:()=>{
+					return [
+						[
+							{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题一'},
+							{url:'',iconsrc:'/static/tabbar/icon-select-fun.png',iconWidth:60,iconHeight:60,title:'标题二'},
+							{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题三'},
+							{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
+							{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
+							{url:'',iconsrc:'/static/tabbar/icon-select-news.png',iconWidth:60,iconHeight:60,title:'标题四'},
+						],
+						[
+							{url:'',iconsrc:'/static/tabbar/icon-select-person.png',iconWidth:60,iconHeight:60,title:'标题一'},
+							{url:'',iconsrc:'/static/tabbar/icon-select-fun.png',iconWidth:60,iconHeight:60,title:'标题二'},
+							{url:'',iconsrc:'/static/tabbar/icon-select-home.png',iconWidth:60,iconHeight:60,title:'标题三'},
+							{url:'',iconsrc:'/static/tabbar/icon-scan.png',iconWidth:60,iconHeight:60,title:'标题五'},
+						]
+					]
+				}
+			},
+			// 是否自动轮播
+			ifAutoplay:{
+				type:Boolean,
+				default:false
+			},
+			// 一排显示数量
+			rowNum:{
+				type:String,
+				default:'5'
+			},
+			// 标题颜色
+			titlec:{
+				type:String,
+				default:'#000000'
+			},
+			// 字体大小
+			fonts:{
+				type:String,
+				default:'28rpx'
+			},
+			// 字体距离图标的距离
+			titleTop:{
+				type:String,
+				default:'20rpx'
+			},
+			// item的顶部距离
+			itemTop:{
+				type:String,
+				default:'50rpx'
+			},
+			// 选中时指示点的颜色
+			activeStop:{
+				type:String,
+				default:'rgba(0,0,0,1)'
+			},
+			// 未选中时指示点的颜色
+			moStop: {
+				type:String,
+				default:'rgba(0,0,0,.2)'
+			}
+		},
+		data(){
+			return {
+				currentIndex:0,
+				swiperHeight:0,
+			}
+		},
+		mounted() {
+			this.changeHeight();
+		},
+		computed:{
+			// 找图标高度最大值
+			maxHeight() {
+				let arr = [];
+				this.list.forEach(item=>{arr.push(item.iconHeight);})
+				let max = arr.reduce((a,b)=>{return b > a ? b : a})
+				return max;
+			}
+		},
+		methods:{
+			// 改变swiper的高度
+			changeHeight() {
+				const query = uni.createSelectorQuery().in(this)
+				query.select('.swiper-item-box').boundingClientRect((rect) => {
+					// 查询单个格子的高度，并设置swiper的高
+					if(this.list[this.currentIndex].length <= this.rowNum) {
+						// 如果每轮的数组长度，小于等于一排显示的个数，那么设置一个格子的高度
+						this.swiperHeight = rect.height*1 + 10;
+					} else {
+						// 如果每轮的数组长度，大于一排显示的个数，那么设置两个个格子的高度
+						this.swiperHeight = rect.height*2 + 10;
+					}
+					
+				}).exec()
+			},
+			// 列表选择事件
+			chooseGe(url,index) {
+				// console.log(imgTools.uploadImg(),137);
+				// imgTools.chooseCompressImg();
+				imgTools.chooseCompressImg().then(res=>{
+					console.log(imgTools.getImgInfo(res));
+				})
+				// 抛出事件
+				// this.$emit('chooseGe',{url,index})
+				// if(url) {
+				// 	uni.navigateTo({url})
+				// }
+			},
+			changeEv(e) {
+				this.currentIndex = e.detail.current;
+				this.changeHeight();
+			}
+		}
+	}
+</script>
+
+<style>
+	.gong-ge-spot{
+		width: 20rpx;height: 20rpx;
+		border-radius: 100%;
+		background-color: rgba(0, 0, 0, .2);
+	}
+	.active-spot{
+		background-color: rgba(0, 0, 0, .5);
+		animation: gongspot 3s linear alternate infinite;
+	}
+	@keyframes gongspot{
+		0%{background-color: rgba(0, 0, 0, 1);}
+		25%{background-color: rgba(255, 0, 0, 1);}
+		50%{background-color: rgba(0, 255, 0, 1);}
+		75%{background-color: rgba(0, 0, 255, 1);}
+		100%{background-color: rgba(0, 0, 0, 1);}
+	}
+</style>

components/status-navs/status-nav.vue

@@ -51,7 +51,7 @@
 			// 默认导航栏高度
 			navBarHeight: {
 				type:String,
-				default:'40px'
+				default:'50px'
 			},
 			//是否显示返回键
             ifReturn:{

jsFile/img/yy-img.js

@@ -0,0 +1,168 @@
+const imgTools = {
+	/**
+	 * @description 图片多选，并返回图片数组
+	 * @param {Number} count 1
+	 */
+	chooseImg(count=1) {
+		return new Promise((resolve,reject)=>{
+			let imgArr = [];
+			uni.chooseImage({
+				count:count,
+				sizeType:['compressed'],
+				sourceType:['album'],
+				success: (res) => {
+					let files = res.tempFilePaths
+					files.forEach(item=>{
+						imgArr.push(item);
+					})
+					resolve(imgArr);
+				}
+			})
+		})
+	},
+	/**
+	 * @description 选择图片并压缩图片
+	 * @param {Number} cutQuality 80
+	 * @param {Number} cutWidth 200
+	 * @param {Number} cutWidth 200
+	 */
+	chooseCompressImg(cutQuality=80,cutWidth=200,cutHeight=200) {
+		return new Promise((resolve, reject) => {
+			uni.chooseImage({
+				count:1,
+				sourceType:['album','camera'],
+				extension:['png'],//选择图片类型
+				crop:{//图像裁剪参数，设置后 sizeType 失效
+					quality:cutQuality,//1~100
+					width:cutWidth,
+					height:cutHeight,
+					resize:false//是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注：设置为false时在裁剪编辑界面显示图片的像素值，设置为true时不显示
+				},
+				success: (res) => {
+					uni.compressImage({
+						src: res.tempFilePaths[0],
+						quality:100,//压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）
+						width:cutWidth,
+						height:cutHeight,
+						rotate:0,//旋转度数，范围0～360
+						success: res => {
+							resolve(res.tempFilePath)
+						}
+					})
+				}
+			})
+		})
+	},
+	/**
+	 * @description 预览图片
+	 * @param {Number} current 0
+	 * @param {Array} imgArr []
+	 */
+	previewImg(current=0,imgArr=[]) {
+		uni.previewImage({
+			current:current,
+			urls: imgArr,
+			indicator:'number',//图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。
+			loop:false,//是否可循环预览，默认值为 false
+			longPressActions: {
+				itemList: ['发送给朋友', '保存图片', '收藏'],
+				itemColor:'#000000',//按钮的文字颜色，字符串格式，默认为"#000000"
+				success:(data)=> {
+					// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
+					switch (data.tapIndex){
+						case 0:
+						// 发送给朋友
+							break;
+						case 1:
+						// 保存图片
+						this.saveImg(imgArr[data.index]);
+							break;
+						case 2:
+						// 收藏
+							break;
+					}
+				}
+			}
+		});
+	},
+	/**
+	 * @description 保存图片
+	 * @param {String} src
+	 */
+	saveImg(src) {
+		uni.saveImageToPhotosAlbum({
+			filePath: src,
+			success: ()=> {}
+		});
+	},
+	/**
+	 * @description 压缩图片
+	 * @param {String} imgsrc
+	 * @param {Number} quality 裁剪质量(1~100)，默认：80
+	 * @param {Number} width 裁剪宽度，默认：不设置
+	 * @param {Number} height 裁剪宽度，默认：不设置
+	 * @param {Number} rotate 裁剪角度(0～360)，默认：0
+	 */
+	compressImg(imgsrc, quality=80, width='', height='', rotate=0) {
+		return new Promise((resolve, reject)=>{
+			uni.compressImage({
+				src: imgsrc,
+				quality,//压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）
+				width,
+				height,
+				rotate,//旋转度数，范围0～360
+				success: res => {
+					resolve(res.tempFilePath);
+				}
+			})
+		})
+	},
+	/**
+	 * @description 获取图片信息
+	 * @param {String} src 
+	 */
+	getImgInfo(src) {
+		return new Promise((resolve, reject)=>{
+			uni.getImageInfo({
+				src,
+				success: (image)=> {
+					resolve(image)
+				}
+			});
+		})
+	},
+	/**
+	 * @description 选择并裁剪图片
+	 * @param {Number} cutQuality 裁剪质量(1~100)，默认：100
+	 * @param {Number} cutWidth 裁剪宽度，默认：200
+	 * @param {Number} cutHeight 裁剪高度，默认：200
+	 * @param {Number} cutRotate 裁剪角度(0～360)，默认：0
+	 */
+	cutImg(cutQuality=100,cutWidth=200,cutHeight=200, cutRotate=0) {
+		return new Promise((resolve, reject)=>{
+			uni.chooseImage({
+				count:1,
+				sourceType:['album','camera'],
+				crop:{//图像裁剪参数，设置后 sizeType 失效
+					quality:cutQuality,//1~100
+					width:cutWidth,
+					height:cutHeight,
+					resize:false//是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注：设置为false时在裁剪编辑界面显示图片的像素值，设置为true时不显示
+				},
+				success: (res) => {
+					uni.compressImage({
+						src: res.tempFilePaths[0],
+						quality:100,//压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）
+						width:cutWidth,
+						height:cutHeight,
+						rotate:cutRotate,//旋转度数，范围0～360
+						success: res => {
+							resolve(res.tempFilePath)
+						}
+					})
+				}
+			})
+		})
+	}
+}
+export default imgTools;

jsFile/tools.js

@@ -265,8 +265,9 @@ const tools = {
 			return arrEntities[t];
 		})
 		.replace('<section', '<div')
-		.replace(/\<img/g, '<img @tap="pre" style="max-width:100%!important;height:auto" ')
-		.replace(/src=\"/g,'src="https://oss.hmzfyy.cn');
+		.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, p1) => {
+		    return `<img mode="widthFix" style="max-width:100%!important;height:auto" src='${p1.indexOf('http') > -1 ? p1 : 'https://oss.hmzfyy.cn' + p1}' />`
+		})
 	},
 	/**
 	 * @description 检查网络状态

jsFile/video/yy-video.js

@@ -0,0 +1,138 @@
+const videoTools = {
+	/**
+	 * @description 视频选择，并返回
+	 */
+	chooseVideo() {
+		return new Promise((resolve,reject)=>{
+			let videoObj = {};
+			uni.chooseVideo({
+				sourceType: ['camera', 'album'],
+				compressed:true,//是否压缩所选的视频源文件，默认值为 true，需要压缩。
+				maxDuration:60,//拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。
+				camera: 'back',//'front'、'back'，默认'back'	
+				success: (res)=> {
+					console.log(res,'视频');
+					// #ifdef H5
+					videoObj = {
+						size:res.size,//视频大小
+						path:res.name,//视频名称
+						lastModified:res.tempFile.lastModified,//最后修改时间
+						type:res.tempFile.type,//视频类型
+					}
+					// #endif
+					
+					// #ifdef APP-PLUS || MP-WEIXIN
+					videoObj = {
+						size:res.size,//视频大小
+						path:res.tempFilePath,//视频名称
+						duration:res.duration,//播放总时长单位秒
+						width:res.width,//视频宽
+						height:res.height,//视频高
+					}
+					// #endif
+					resolve(videoObj)
+				}
+			});
+		})
+	},
+	/**
+	 * @description 选择视频并压缩视频，不支持H5
+	 */
+	chooseCompressVideo() {
+		return new Promise((resolve, reject)=>{
+			uni.chooseVideo({
+				sourceType: ['camera', 'album'],
+				compressed:true,//是否压缩所选的视频源文件，默认值为 true，需要压缩。
+				maxDuration:60,//拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。
+				camera: 'back',//'front'、'back'，默认'back'	
+				success: (res)=> {
+					let exit = res.tempFilePath.split('.').includes('mp4');
+					if(exit) {
+						// #ifdef APP-PLUS || MP-WEIXIN
+						uni.compressVideo({
+							src:res.tempFilePath,
+							quality:'medium',//low:低	medium:中	high:高
+							bitrate: 100000,//码率，单位 kbps
+							fps: 100,//帧率
+							resolution:1,//相对于原视频的分辨率比例，取值范围(0, 1]
+							success: rescomp => {
+								resolve({path:rescomp.tempFilePath,size:rescomp.size})
+							}
+						})
+						// #endif
+					} else {
+						uni.showToast({title:'请选择mp4格式的视频',icon:'none'})
+					}
+				}
+			});
+		})
+	},
+	/**
+	 * @description 预览视频，仅仅微信小程序生效
+	 * @param {Number} current 0
+	 * @param {Array} videoArr [{url:'',type:'video',poster:''}]
+	 */
+	previewVideo(current=0,videoArr=[]) {
+		// #ifdef MP-WEIXIN
+		uni.previewMedia({
+			current:current,
+			sources:videoArr
+		})
+		// #endif
+	},
+	/**
+	 * @description 保存视频，不支持H5
+	 * @param {String} src
+	 */
+	saveVideo(src) {
+		uni.saveVideoToPhotosAlbum({
+			filePath: src,
+			success: ()=> {}
+		});
+	},
+	/**
+	 * @description 压缩视频，不支持H5
+	 * @param {String} src
+	 */
+	compressVideo(src) {
+		return new Promise((resolve, reject)=>{
+			// #ifdef APP-PLUS || MP-WEIXIN
+			uni.compressVideo({
+				src,
+				quality:'medium',//low:低	medium:中	high:高
+				bitrate: 100000,//码率，单位 kbps
+				fps: 100,//帧率
+				resolution:1,//相对于原视频的分辨率比例，取值范围(0, 1]
+				success: rescomp => {
+					resolve({path:rescomp.tempFilePath,size:rescomp.size})
+				}
+			})
+			// #endif
+		})
+	},
+	/**
+	 * @description 获取视频信息
+	 * @param {String} src 
+	 */
+	getVideoInfo(src) {
+		return new Promise((resolve, reject)=>{
+			uni.getVideoInfo({
+				src,
+				success: (video)=> {
+					let obj = {
+						orientation:video.orientation,//画面方向	 微信小程序、App（3.1.14+）
+						type:video.type,//视频格式	微信小程序、App（3.1.14+）
+						duration:video.duration,//视频长度	微信小程序、App（3.1.10+）、H5
+						size:video.size,//视频大小，单位 kB	微信小程序、App（3.1.10+）、H5
+						height:video.height,//视频的长，单位 px	微信小程序、App（3.1.10+）、H5
+						width:video.width,//视频的宽，单位 px	微信小程序、App（3.1.10+）、H5
+						fps:video.fps,//视频帧率	微信小程序、App（3.1.14+）
+						bitrate:video.bitrate,//视频码率，单位 kbps	微信小程序、App（3.1.14+）
+					}
+					resolve(obj)
+				}
+			});
+		})
+	}
+}
+export default videoTools;

pages.json

@@ -44,15 +44,41 @@
 						"enablePullDownRefresh": false
 					}
                 }
+                ,{
+                    "path" : "yy-video/yy-video",
+                    "style" :                                                                                    
+                {
+                    "navigationBarTitleText": "",
+                    "enablePullDownRefresh": false
+                }
+                
+                }
+                ,{
+                    "path" : "yy-img/yy-img",
+                    "style" :                                                                                    
+                {
+                    "navigationBarTitleText": "",
+                    "enablePullDownRefresh": false
+                }
+                
+                }
             ]
         },
         { //B包
             "root": "pagesB",
-            "pages": []
+            "pages": [
+				{
+				    "path" : "custom-editor/custom-editor",
+				    "style" : {
+						"navigationBarTitleText": "",
+						"enablePullDownRefresh": false
+					}
+				}
+			]
         }
     ],
     "preloadRule": {
-        "pages/tabbar/pagehome/pagehome": {
+        "pages/tabbar/my/my": {
             "network": "all",
             "packages": ["pagesA"]
         }

pages/tabbar/pagehome/pagehome.vue

@@ -4,6 +4,9 @@
 			<view slot="content">
 				<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab"></swiper-tab>
 				<chooseImgOne @chooseEv="chooseEv"></chooseImgOne>
+				<column-function @chooseEv="chooseEv" :list="funList"></column-function>
+				<!-- <gong-ge-function @chooseGe="chooseGe"></gong-ge-function> -->
+				<swiper-gong-ge @chooseGe="chooseGe"></swiper-gong-ge>
 			</view>
 		</status-container>
 		<!-- 底部tab -->
@@ -15,11 +18,17 @@
 	import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
 	import footTab from '@/components/foot-tabs/foot-tab.vue';
 	import chooseImgOne from '@/components/choose-imgs/choose-img-one.vue';
+	import columnFunction from '@/components/function-list/column/column-function.vue';
+	import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function.vue';
+	import swiperGongGe from '@/components/function-list/swiper-gong-ge/swiper-gong-ge.vue';
 	export default {
 		components:{
 			'foot-tab' :footTab,
 			swiperTab,
-			chooseImgOne
+			chooseImgOne,
+			columnFunction,
+			gongGeFunction,
+			swiperGongGe
 		},
 		data() {
 			return {
@@ -34,6 +43,12 @@
 					{title:'标题七'},
 					{title:'标题八'},
 					{title:'标题九'},
+				],
+				funList:[
+					{url:'/pagesA/my-address/my-address',title:'地址选择',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
+					{url:'/pagesB/custom-editor/custom-editor',title:'富文本编辑',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
+					{url:'/pagesA/yy-img/yy-img',title:'图片',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
+					{url:'/pagesA/yy-video/yy-video',title:'视频',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
 				]
 			}
 		},
@@ -48,6 +63,12 @@
 			// 图片选择事件
 			chooseEv(arr) {
 				console.log(arr,'图片数组');
+			},
+			chooseEv(obj) {
+				console.log(obj);
+			},
+			chooseGe(obj) {
+				console.log(obj);
 			}
 		}
 	}

pagesA/yy-img/yy-img.vue

@@ -0,0 +1,60 @@
+<template>
+	<view>
+		<status-container titlet="图片">
+			<view slot="content">
+				<column-function :list="list" @chooseEv="chooseEv"></column-function>
+				<view v-if="ifPreview">
+					<img-video-preview :imgcurrent="imgcurrent" :list="imgList" @closeCustomEv="ifPreview=false"></img-video-preview>
+				</view>
+			</view>
+		</status-container>
+	</view>
+</template>
+
+<script>
+	import columnFunction from '@/components/function-list/column/column-function.vue';
+	import imgTools from '@/jsFile/img/yy-img.js';
+	import imgVideoPreview from '@/components/custom-preview/img-video-preview.vue';
+	export default {
+		components:{
+			columnFunction,
+			imgVideoPreview
+		},
+		data() {
+			return {
+				list:[
+					{url:'',title:'选择图片可传递数量',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
+					{url:'',title:'自定义图片预览',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
+				],
+				imgList:[
+					// {src:'/static/deleteImg/公式.mp4',title:'标题',content:'描述描述描述描述描述描述描述描述'},
+				],
+				ifPreview:false,
+				imgcurrent:0
+			}
+		},
+		methods: {
+			chooseEv(obj) {
+				switch (obj.index){
+					case 0:
+					imgTools.chooseImg(9).then(res=>{
+						res.forEach((item,index)=>{
+							this.imgList.push({src:item,title:`标题${index+1}`,content:`描述描述描述描述描述描述描述描述${index+1}`})
+						})
+					});
+						break;
+					case 1:
+					if(this.imgList.length) {
+						this.imgcurrent = 0;
+						this.ifPreview = true;
+					}
+						break;
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

pagesA/yy-video/yy-video.vue

@@ -0,0 +1,63 @@
+<template>
+	<view>
+		<status-container titlet="视频">
+			<view slot="content">
+				<column-function :list="list" @chooseEv="chooseEv"></column-function>
+			</view>
+		</status-container>
+	</view>
+</template>
+
+<script>
+	import columnFunction from '@/components/function-list/column/column-function.vue';
+	import videoTools from '@/jsFile/video/yy-video.js';
+	export default {
+		components:{
+			columnFunction
+		},
+		data() {
+			return {
+				list:[
+					{url:'',title:'单选视频',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
+					{url:'',title:'选择视频并压缩视频',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
+					{url:'',title:'预览视频',iconsrc:'',iconWidth:60,iconHeight:60,content:'',contentColor:'#999999',ifNext:true},
+				],
+				videoArr:[]
+			}
+		},
+		methods: {
+			chooseEv(obj) {
+				switch (obj.index){
+					case 0:
+					videoTools.chooseVideo().then(res=>{
+						console.log(res,30);
+						let obj = {
+							url:res.path,
+							type:'video',
+							poster:''
+						}
+						this.videoArr.push(obj);
+					});
+						break;
+					case 1:
+					videoTools.chooseCompressVideo().then(res=>{
+						console.log(res,30);
+					});
+						break;
+					case 2:
+					console.log(this.videoArr)
+					uni.previewMedia({
+						current:1,
+						sources:this.videoArr
+					})
+					// videoTools.previewVideo(1,this.videoArr)
+						break;
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

pagesB/custom-editor/custom-editor.vue

@@ -1,14 +1,18 @@
 <template>
-	<view class="container">
-		<custom-editor @getContents="getContents"></custom-editor>
+	<view>
+		<status-container titlet="富文本编辑">
+			<view slot="content">
+				<custom-editor @getContents="getContents"></custom-editor>
+			</view>
+		</status-container>
 	</view>
 </template>
 
 <script>
-	import editor from '@/components/editor/editor.vue';
+	import customEditor from '@/components/editor/custom-editor.vue';
 	export default {
 		components:{
-			'custom-editor':editor
+			'custom-editor':customEditor
 		},
 		data() {
 			return {