新增图片视频选择预览组件
2
App.vue
|
@ -4,7 +4,7 @@
|
||||||
projectname:'', // 项目名称
|
projectname:'', // 项目名称
|
||||||
lat:'', // 公司地址维度
|
lat:'', // 公司地址维度
|
||||||
lng:'' ,// 公司地址经度
|
lng:'' ,// 公司地址经度
|
||||||
hostapi:'http://maintain.7and5.cn' // 域名配置
|
hostapi:'https://www.baidu.com' // 域名配置
|
||||||
},
|
},
|
||||||
// 优先于show方法
|
// 优先于show方法
|
||||||
onLaunch: function() {
|
onLaunch: function() {
|
||||||
|
|
|
@ -73,7 +73,7 @@ button:after{content: none!important;}
|
||||||
.bbot{border-bottom: 2rpx solid #EEEEEE;}
|
.bbot{border-bottom: 2rpx solid #EEEEEE;}
|
||||||
.borbot-df{border: 2rpx solid #DFDFDF;}
|
.borbot-df{border: 2rpx solid #DFDFDF;}
|
||||||
.borbot-cc{border: 2rpx solid #CCCCCC;}
|
.borbot-cc{border: 2rpx solid #CCCCCC;}
|
||||||
.bleft {border-left: 1rpx solid #EEEEEE;}
|
.bleft {border-left: 2rpx solid #EEEEEE;}
|
||||||
|
|
||||||
/* 行高 */
|
/* 行高 */
|
||||||
.line-h30{line-height: 30rpx;}
|
.line-h30{line-height: 30rpx;}
|
||||||
|
|
|
@ -46,6 +46,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import imgTools from '@/jsFile/img/yy-img.js';
|
||||||
export default {
|
export default {
|
||||||
name:"img-one",
|
name:"img-one",
|
||||||
props: {
|
props: {
|
||||||
|
@ -126,10 +127,11 @@
|
||||||
},
|
},
|
||||||
// 预览图片
|
// 预览图片
|
||||||
preImg(index) {
|
preImg(index) {
|
||||||
uni.previewImage({
|
imgTools.previewImg(index,this.imgList);
|
||||||
current: index,
|
// uni.previewImage({
|
||||||
urls: this.imgList
|
// current: index,
|
||||||
})
|
// urls: this.imgList
|
||||||
|
// })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
|
@ -74,13 +74,19 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name:'editor',
|
name:'custom-editor',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
readOnly: false,
|
readOnly: false,
|
||||||
formats: {}
|
formats: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
onLoad() {
|
||||||
|
uni.loadFontFace({
|
||||||
|
family: 'Pacifico',
|
||||||
|
source: 'url("https://sungd.github.io/Pacifico.ttf")'
|
||||||
|
})
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 失去焦点时,获取富文本的内容
|
// 失去焦点时,获取富文本的内容
|
||||||
getContents(html){
|
getContents(html){
|
||||||
|
@ -152,13 +158,7 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
onLoad() {
|
|
||||||
uni.loadFontFace({
|
|
||||||
family: 'Pacifico',
|
|
||||||
source: 'url("https://sungd.github.io/Pacifico.ttf")'
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -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>
|
|
@ -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);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
|
@ -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>
|
|
@ -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);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
|
@ -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);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
|
@ -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>
|
|
@ -51,7 +51,7 @@
|
||||||
// 默认导航栏高度
|
// 默认导航栏高度
|
||||||
navBarHeight: {
|
navBarHeight: {
|
||||||
type:String,
|
type:String,
|
||||||
default:'40px'
|
default:'50px'
|
||||||
},
|
},
|
||||||
//是否显示返回键
|
//是否显示返回键
|
||||||
ifReturn:{
|
ifReturn:{
|
||||||
|
|
|
@ -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;
|
|
@ -265,8 +265,9 @@ const tools = {
|
||||||
return arrEntities[t];
|
return arrEntities[t];
|
||||||
})
|
})
|
||||||
.replace('<section', '<div')
|
.replace('<section', '<div')
|
||||||
.replace(/\<img/g, '<img @tap="pre" style="max-width:100%!important;height:auto" ')
|
.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, p1) => {
|
||||||
.replace(/src=\"/g,'src="https://oss.hmzfyy.cn');
|
return `<img mode="widthFix" style="max-width:100%!important;height:auto" src='${p1.indexOf('http') > -1 ? p1 : 'https://oss.hmzfyy.cn' + p1}' />`
|
||||||
|
})
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @description 检查网络状态
|
* @description 检查网络状态
|
||||||
|
|
|
@ -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;
|
30
pages.json
|
@ -44,15 +44,41 @@
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
,{
|
||||||
|
"path" : "yy-video/yy-video",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "yy-img/yy-img",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{ //B包
|
{ //B包
|
||||||
"root": "pagesB",
|
"root": "pagesB",
|
||||||
"pages": []
|
"pages": [
|
||||||
|
{
|
||||||
|
"path" : "custom-editor/custom-editor",
|
||||||
|
"style" : {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"preloadRule": {
|
"preloadRule": {
|
||||||
"pages/tabbar/pagehome/pagehome": {
|
"pages/tabbar/my/my": {
|
||||||
"network": "all",
|
"network": "all",
|
||||||
"packages": ["pagesA"]
|
"packages": ["pagesA"]
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,6 +4,9 @@
|
||||||
<view slot="content">
|
<view slot="content">
|
||||||
<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab"></swiper-tab>
|
<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab"></swiper-tab>
|
||||||
<chooseImgOne @chooseEv="chooseEv"></chooseImgOne>
|
<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>
|
</view>
|
||||||
</status-container>
|
</status-container>
|
||||||
<!-- 底部tab -->
|
<!-- 底部tab -->
|
||||||
|
@ -15,11 +18,17 @@
|
||||||
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
|
||||||
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
import footTab from '@/components/foot-tabs/foot-tab.vue';
|
||||||
import chooseImgOne from '@/components/choose-imgs/choose-img-one.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 {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
'foot-tab' :footTab,
|
'foot-tab' :footTab,
|
||||||
swiperTab,
|
swiperTab,
|
||||||
chooseImgOne
|
chooseImgOne,
|
||||||
|
columnFunction,
|
||||||
|
gongGeFunction,
|
||||||
|
swiperGongGe
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -34,6 +43,12 @@
|
||||||
{title:'标题七'},
|
{title:'标题七'},
|
||||||
{title:'标题八'},
|
{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) {
|
chooseEv(arr) {
|
||||||
console.log(arr,'图片数组');
|
console.log(arr,'图片数组');
|
||||||
|
},
|
||||||
|
chooseEv(obj) {
|
||||||
|
console.log(obj);
|
||||||
|
},
|
||||||
|
chooseGe(obj) {
|
||||||
|
console.log(obj);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -1,14 +1,18 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view>
|
||||||
<custom-editor @getContents="getContents"></custom-editor>
|
<status-container titlet="富文本编辑">
|
||||||
|
<view slot="content">
|
||||||
|
<custom-editor @getContents="getContents"></custom-editor>
|
||||||
|
</view>
|
||||||
|
</status-container>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import editor from '@/components/editor/editor.vue';
|
import customEditor from '@/components/editor/custom-editor.vue';
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
'custom-editor':editor
|
'custom-editor':customEditor
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
Before Width: | Height: | Size: 59 KiB |
Before Width: | Height: | Size: 73 KiB |
Before Width: | Height: | Size: 70 KiB |
Before Width: | Height: | Size: 74 KiB |
Before Width: | Height: | Size: 65 KiB |
Before Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 867 B |
Before Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 752 B |
Before Width: | Height: | Size: 162 KiB |
Before Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 794 B |
Before Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 45 KiB |
Before Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 740 B |
Before Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 7.2 KiB |
Before Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 827 B |
Before Width: | Height: | Size: 868 B |
Before Width: | Height: | Size: 3.4 KiB |
Before Width: | Height: | Size: 2.6 KiB |
Before Width: | Height: | Size: 110 KiB |
Before Width: | Height: | Size: 981 B |