1

components/nk-select-file/nk-select-file.vue

@@ -0,0 +1,647 @@
+<template>
+	<view class="file-outerBox" @touchmove.prevent v-if="isOpen">
+		<view style="width: 100%; padding-top: --status-bar-height;"></view>
+		<view class="file-titel" :style="{backgroundColor: navBgColor}">
+			<view class="file-nav-leftBox" @click="backAddress">
+				<image :src="backImg" mode="widthFix" class="file-back-img"></image>
+			</view>
+			<text :style="titelStyle">
+				{{titel}}
+			</text>
+			<view class="file-nav-rightBox"></view>
+		</view>
+		<view class="file-address">
+			<view class="root-box"  @click="backRoot">
+				内部存储
+				<image :src="directionImg" mode="widthFix" class="to-img-box"></image>
+			</view>
+			<scroll-view :scroll-x="true" class="address-scroll">
+				<view class="address-box" v-for="(item,index) in addressBar" @click="backFolder(item,index)">
+					{{item.name}}
+					<image :src="directionImg" mode="widthFix" class="to-img-box"></image>
+				</view>
+			</scroll-view>
+		</view>
+		<view class="">
+			<scroll-view :scroll-y="true" :style="{height: 'calc(100vh - ' +  (barHeight*2 + 280) + 'rpx)'}">
+				<view class="select-tips" v-if="inaccessible">
+					<view style="line-height: 40rpx;">
+						无法访问的文件夹
+					</view>
+					<view style="line-height: 40rpx;">
+						建议前往安卓存储访问框架查看文件
+					</view>
+				</view>
+				<view class="folder-box" v-for="item in folderArr" @click="toFolder(item)">
+					<view class="folder-name-box">
+						<image :src="folderImg" mode="widthFix" class="folder-img"></image>
+						<view class="name-box">{{item.name}}</view>
+					</view>
+					<view>
+						<image :src="enterImg" mode="widthFix" class="toFolder-img"></image>
+					</view>
+				</view>
+				<view class="file-box" v-for="(item,index) in fileArr" @click="selectFile(index)">
+					<view class="file-name-box">
+						<image :src="fileImg" mode="widthFix" class="file-img" v-if="item.type == 'file'"></image>
+						<image :src="txtImg" mode="widthFix" class="file-img" v-if="item.type == 'txt'"></image>
+						<image :src="docImg" mode="widthFix" class="file-img" v-if="item.type == 'doc'"></image>
+						<image :src="pdfImg" mode="widthFix" class="file-img" v-if="item.type == 'pdf'"></image>
+						<view class="name-box">
+							{{item.name}}
+						</view>
+					</view>
+					<view>
+						<image :src="selectedImg" mode="widthFix" class="select-img" v-if="item.select"></image>
+						<image :src="unselectedImg" mode="widthFix" class="select-img" v-else></image>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+		<view class="">
+			<button type="default" class="select-foot-btn" :style="btnStyle" @click="uploadBtn">{{btnText}}</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	
+/*
+*	
+* {property} 使用 v-model 绑定一个变量来控制组件的开启与关闭
+* {property} navBgColor [String] 顶部标题栏背景色
+* {property} folderImg [String] 文件夹的图片
+* {property} backImg [String] 返回上一级图片
+* {property} directionImg [String] 右指向箭头 
+* {property} enterImg [String] 进入文件夹箭头
+* {property} fileImg [String] 未知文件通用图标，当前仅可识别 pdf、doc/docx、txt
+* {property} txtImg [String] txt文件图标
+* {property} docImg [String] doc/docx文件图标
+* {property} pdfImg [String] pdf文件图标 
+* {property} selectedImg [String] 选中状态下的按钮图标
+* {property} unselectedImg [String] 未选中状态下的按钮图标
+* {property} titel [String] 标题文字，默认 '选择文件'
+* {property} titelSize [String,Number] 标题文字大小，默认 36rpx
+* {property} titelWeight [String,Number] 标题文字粗细，默认 600
+* {property} titelColor [String] 标题文字颜色，默认 #373737
+* {property} btnText [String] 底部按钮文字， 默认 '上传'
+* {property} btnSize [String,Number] 底部按钮文字大小， 默认 36rpx
+* {property} btnHeight [String,Number] 底部按钮高度， 默认 92rpx
+* {property} btnBgColor [String] 底部按钮颜色， 默认 #6521e2
+* {property} btnTextColor [String] 底部按钮文字颜色， 默认 #fff
+* {property} filterArr [Array] 筛选文件类型，示例：['doc','PDF']，不区分大小写
+*
+* {event} confirm [Function] 点击上传按钮触发的回调事件，会返回选中文件的地址 event = [{name: name, url: path, sizeMB: sizeMb}]
+*		name: 文件名  url: 文件地址  sizeMB: 文件大小，单位MB
+*/
+	
+	export default {
+		name:"nk-select-file",
+		props:{
+			value:{
+				type: Boolean,
+				default: false
+			},
+			backImg:{
+				type: String,
+				default: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5c697db4-d920-4af3-90a0-19211379b881/c08ef3dc-2514-443d-91aa-a055a098077f.png'
+			},
+			directionImg:{
+				type: String,
+				default: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5c697db4-d920-4af3-90a0-19211379b881/183fcda4-b046-4723-8356-dded284bdefc.png'
+			},
+			enterImg:{
+				type: String,
+				default: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5c697db4-d920-4af3-90a0-19211379b881/138ad94e-84e5-460e-a4eb-9e29d2139049.png'
+			},
+			folderImg:{
+				type: String,
+				default: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5c697db4-d920-4af3-90a0-19211379b881/7f70ee21-bd9c-4630-9a0a-113d78a99335.png'
+			},
+			fileImg:{
+				type: String,
+				default: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5c697db4-d920-4af3-90a0-19211379b881/24fe2fda-a956-402e-af65-e11f8779c6d1.png'
+			},
+			txtImg:{
+				type: String,
+				default: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5c697db4-d920-4af3-90a0-19211379b881/10450e01-189b-48c7-9b97-918104fdd701.png'
+			},
+			docImg:{
+				type: String,
+				default: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5c697db4-d920-4af3-90a0-19211379b881/501660e5-8386-473f-bfcb-34c0b2b4a2f8.png'
+			},
+			pdfImg:{
+				type: String,
+				default: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5c697db4-d920-4af3-90a0-19211379b881/b1056050-6d27-454e-b2b7-51e3832cfe5e.png'
+			},
+			selectedImg:{
+				type: String,
+				default: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5c697db4-d920-4af3-90a0-19211379b881/ebaaad9d-4697-42d1-beea-f4c736132b9a.png'
+			},
+			unselectedImg:{
+				type: String,
+				default: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5c697db4-d920-4af3-90a0-19211379b881/ea5fe3fa-799b-40c9-be01-00d0b7419c4a.png'
+			},
+			titel:{
+				type: String,
+				default: '选择文件'
+			},
+			titelSize: {
+				type: [String,Number],
+				default: 36
+			},
+			titelWeight: {
+				type: [String,Number],
+				default: 600
+			},
+			titelColor: {
+				type: String,
+				default: '#373737'
+			},
+			btnText: {
+				type: String,
+				default: '上传'
+			},
+			btnSize: {
+				type: [String,Number],
+				default: 36
+			},
+			btnHeight: {
+				type: [String,Number],
+				default: 92
+			},
+			btnBgColor: {
+				type: String,
+				default: '#6521e2'
+			},
+			btnTextColor: {
+				type: String,
+				default: '#fff'
+			},
+			navBgColor: {
+				type: String,
+				default: '#fff'
+			},
+			filterArr: {
+				type: Array,
+				default () {
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				barHeight: '', // 状态栏高度
+				rootAddress: {}, // 根目录
+				addressBar: [], // 地址栏记录栈
+				folderArr: [], // 文件夹
+				fileArr: [], // 文件
+				selectArr:[], // 选中文件集合
+				isExit: true, // 退出
+				isOpen: false,
+				inaccessible: false, // 无法访问提示
+				titelStyle: {
+					fontSize: this.titelSize + 'rpx',
+					fontWeight: this.titelWeight,
+					color: this.titelColor
+				},
+				btnStyle: {
+					height: this.btnHeight + 'rpx',
+					backgroundColor: this.btnBgColor,
+					color: this.btnTextColor,
+					fontSize: this.btnSize + 'rpx'
+				},
+				filterReg: ''
+			};
+		},
+		watch:{
+			value(val){debugger
+				if(val){
+					this.open();
+				}else{
+					this.close();
+				}
+			}
+		},
+		mounted() {debugger
+			if(Object.prototype.toString.call(this.filterArr) === '[object Array]' && this.filterArr.length > 0){
+				let str = this.filterArr.join("|");
+				this.filterReg = new RegExp(str,'i');
+			}
+		},
+		methods:{
+			// 打开组件
+			open(){
+				this.isOpen = true;
+				this.getBarHeight();
+				this.getRootDirectory();
+			},
+			// 关闭组件
+			close(){
+				this.isOpen = false;
+				this.rootAddress = {}; // 根目录
+				this.addressBar = []; // 地址栏记录栈
+				this.folderArr = [];
+				this.fileArr = [];
+				this.selectArr = []; // 选中文件集合
+				this.$emit('input', false);
+				// 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
+				this.$nextTick(() => {
+					this.$emit('change', false);
+				})
+			},
+			
+			// 获取状态栏高度
+			getBarHeight(){
+				var self = this;
+				uni.getSystemInfo({
+					success(res) {
+						self.barHeight = res.statusBarHeight;
+					}
+				})
+			},
+			// 获取根目录
+			getRootDirectory(){
+				this.inaccessible = false;
+				// 修改退出状态，以便在点击返回按钮时最后一层返回的是根目录，再点击一次才会退出
+				this.isExit = false;
+				this.addressBar = [];
+				var environment = plus.android.importClass("android.os.Environment");
+				environment.getExternalStorageState() === environment.MEDIA_MOUNTED;
+				var sdRoot = environment.getExternalStorageDirectory();
+				var rootName = plus.android.invoke(sdRoot,"getName");
+				this.rootAddress = {
+					name: rootName,
+					file: sdRoot,
+				};
+				var files = plus.android.invoke(sdRoot,"listFiles");
+				if(!(Object.prototype.toString.call(files) === '[object Array]')){
+					uni.showToast({
+						icon: 'none',
+						title: '请确认授权访问',
+						duration: 2000
+					});
+					return;
+				}
+				var len = files.length;
+				for(let i = 0; i < len; i++){
+					// 过滤隐藏文件
+					if(!plus.android.invoke(files[i],"isHidden")){
+						// 判断是文件还是文件夹
+						if(plus.android.invoke(files[i],"isDirectory")){ 
+							var folderName = plus.android.invoke(files[i],"getName")
+							this.folderArr.push({name: folderName,file: files[i]})
+						}
+						else{
+							var fileName = plus.android.invoke(files[i],"getName")
+							if(this.filterArr.length > 0){
+								if(fileName.search(this.filterReg) < 0){
+									continue;
+								}
+							}
+							if(fileName.search(/txt/i) > -1){
+								// txt 文件
+								this.fileArr.push({name: fileName,file: files[i],type: 'txt',select: false})
+							}
+							else if(fileName.search(/doc|docx/i) > -1){
+								// doc/docx 文件
+								this.fileArr.push({name: fileName,file: files[i],type: 'doc',select: false})
+							}
+							else if(fileName.search(/pdf/i) > -1){
+								// pdf 文件
+								this.fileArr.push({name: fileName,file: files[i],type: 'pdf',select: false})
+							}
+							else{
+								// 其他文件
+								this.fileArr.push({name: fileName,file: files[i],type: 'file',select: false})
+							}
+						}
+					}
+				}
+				// 排序，不区分大小写
+				this.folderArr.sort(function(a,b){return a.name.toUpperCase() > b.name.toUpperCase() ? '1' : '-1'});
+				this.fileArr.sort(function(a,b){return a.name.toUpperCase() > b.name.toUpperCase() ? '1' : '-1'});
+				this.rootAddress.folderArr = this.folderArr;
+				this.rootAddress.fileArr = this.fileArr;
+			},
+			// 进入文件夹
+			toFolder(event){
+				this.isExit = false; // 地址栈中存在新地址，重置退出状态
+				this.folderArr = [];
+				this.fileArr = [];
+				this.addressBar.push(event)
+				var files = plus.android.invoke(event.file,"listFiles");
+				if(files == null){
+					this.inaccessible = true;
+				}
+				var len = files.length;
+				for(let i = 0; i < len; i++){
+					// 过滤隐藏文件
+					if(!plus.android.invoke(files[i],"isHidden")){
+						// 判断是文件还是文件夹
+						if(plus.android.invoke(files[i],"isDirectory")){
+							var folderName = plus.android.invoke(files[i],"getName")
+							this.folderArr.push({name: folderName,file: files[i]})
+						}
+						else{
+							var fileName = plus.android.invoke(files[i],"getName")
+							if(this.filterArr.length > 0){
+								if(fileName.search(this.filterReg) < 0){
+									continue;
+								}
+							}
+							if(fileName.search(/txt/i) > -1){
+								// txt 文件
+								this.fileArr.push({name: fileName,file: files[i],type: 'txt',select: false})
+							}
+							else if(fileName.search(/doc|docx/i) > -1){
+								// doc/docx 文件
+								this.fileArr.push({name: fileName,file: files[i],type: 'doc',select: false})
+							}
+							else if(fileName.search(/pdf/i) > -1){
+								// pdf 文件
+								this.fileArr.push({name: fileName,file: files[i],type: 'pdf',select: false})
+							}
+							else{
+								// 其他文件
+								this.fileArr.push({name: fileName,file: files[i],type: 'file',select: false})
+							}
+						}
+					}
+				}
+				// 排序，不区分大小写
+				this.folderArr.sort(function(a,b){return a.name.toUpperCase() > b.name.toUpperCase() ? '1' : '-1'});
+				this.fileArr.sort(function(a,b){return a.name.toUpperCase() > b.name.toUpperCase() ? '1' : '-1'});
+			},
+			// 返回根目录
+			backRoot(){
+				this.inaccessible = false;
+				this.addressBar = [];
+				this.folderArr = this.rootAddress.folderArr;
+				this.fileArr = this.rootAddress.fileArr;
+			},
+			// 返回上级文件夹
+			backFolder(event,index){
+				this.inaccessible = false;
+				var len = this.addressBar.length;
+				if(index + 1 == len){
+					// 点击当前文件夹--无事发生
+					return;
+				}
+				else{
+					this.folderArr = [];
+					this.fileArr = [];
+					this.addressBar.splice(index + 1, len - index + 1)
+					var files = plus.android.invoke(event.file,"listFiles");
+					var len = files.length;
+					for(let i = 0; i < len; i++){
+						// 过滤隐藏文件
+						if(!plus.android.invoke(files[i],"isHidden")){
+							// 判断是文件还是文件夹
+							if(plus.android.invoke(files[i],"isDirectory")){ 
+								var folderName = plus.android.invoke(files[i],"getName")
+								this.folderArr.push({name: folderName,file: files[i]})
+							}
+							else{
+								var fileName = plus.android.invoke(files[i],"getName");
+								if(this.filterArr.length > 0){
+									if(fileName.search(this.filterReg) < 0){
+										continue;
+									}
+								}
+								if(fileName.search(/txt/i) > -1){
+									// txt 文件
+									this.fileArr.push({name: fileName,file: files[i],type: 'txt',select: false})
+								}
+								else if(fileName.search(/doc|docx/i) > -1){
+									// doc/docx 文件
+									this.fileArr.push({name: fileName,file: files[i],type: 'doc',select: false})
+								}
+								else if(fileName.search(/pdf/i) > -1){
+									// pdf 文件
+									this.fileArr.push({name: fileName,file: files[i],type: 'pdf',select: false})
+								}
+								else{
+									// 其他文件
+									this.fileArr.push({name: fileName,file: files[i],type: 'file',select: false})
+								}
+							}
+						}
+					}
+					// 排序，不区分大小写
+					this.folderArr.sort(function(a,b){return a.name.toUpperCase() > b.name.toUpperCase() ? '1' : '-1'});
+					this.fileArr.sort(function(a,b){return a.name.toUpperCase() > b.name.toUpperCase() ? '1' : '-1'});
+				}
+			},
+			// 选中文件
+			selectFile(index){
+				if(this.fileArr[index].select){
+					// 取消选中
+					this.$set(this.fileArr[index],'select',false);
+					let name = this.fileArr[index].name;
+					for(let i = 0; i < this.selectArr.length; i++){
+						if(name == this.selectArr[i].name){
+							this.selectArr.splice(i,1);
+							break;
+						}
+					}
+				}else{
+					// 选中
+					this.$set(this.fileArr[index],'select',true);
+					
+					// 读文件大小  
+					var FileInputStream = plus.android.importClass("java.io.FileInputStream");  
+					var fileSize = new FileInputStream(this.fileArr[index].file);  
+					var size = fileSize.available(); 
+					var sizeMb = size / 1048576;
+					sizeMb = sizeMb.toFixed(4);
+					
+					// 获取文件的相对路径
+					var Path = plus.android.invoke(this.fileArr[index].file,"getPath")
+					this.selectArr.push({name: this.fileArr[index].name, url: Path, sizeMB: sizeMb})
+				}
+			},
+			// 点击上传按钮
+			uploadBtn(){
+				this.$emit("confirm",this.selectArr);
+				this.close();
+			},
+			// 点击返回
+			backAddress(){
+				// 先判断地址栈中是否还有地址
+				var len = this.addressBar.length;
+				if(len > 1){
+					// 返回上级文件夹
+					let index = len - 2;
+					let event = this.addressBar[index];
+					this.backFolder(event,index);
+				}
+				else{
+					// 退出文件选择
+					if(this.isExit){
+						// 退出文件选择
+						this.close();
+						// this.$u.toast('在点击一次退出文件选择')
+					}
+					else{
+						// 返回根目录
+						this.isExit = true; // 下一次再点击则退出
+						this.backRoot();
+						uni.showToast({
+						    title: '再操作一次退出文件选择',
+							icon: 'none',
+						    duration: 1000
+						});
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+.file-outerBox{
+	width: 100%;
+	height: 100vh;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 1070;
+	padding-bottom: 40rpx;
+	background-color: #fff;
+	.file-titel{
+		width: 100%;
+		height: 80rpx;
+		line-height: 80rpx;
+		text-align: center;
+		// background-color: #FFFFFF;
+		padding: 0 32rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		.file-nav-leftBox{
+			width: 60rpx;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			.file-back-img{
+				width: 36rpx;
+			}
+		}
+		.file-nav-rightBox{
+			width: 60rpx;
+			height: 100%;
+		}
+	}
+	.file-address{
+		width: 100%;
+		height: 60rpx;
+		background-color: #FBFBFB;
+		padding: 0 32rpx;
+		display: flex;
+		color: #373737;
+		font-size: 24rpx;
+		.address-scroll{
+			width: calc(100% - 116rpx);
+			white-space: nowrap;
+			height: 100%;
+			.address-box{
+				height: 60rpx;
+				line-height: 60rpx;
+				display: inline-block;
+				.to-img-box{
+					width: 20rpx;
+				}
+			}
+		}
+		.root-box{
+			width: 116rpx;
+			height: 60rpx;
+			line-height: 60rpx;
+			display: inline-block;
+			box-shadow: 10rpx 0 10rpx -10rpx rgba(8,8,8,0.3);
+			.to-img-box{
+				width: 20rpx;
+			}
+		}
+	}
+	.folder-box{
+		height: 120rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin: 0 32rpx;
+		border-bottom: 1px solid #EEEEEE;
+		.folder-name-box{
+			width: 80%;
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap; 
+			.folder-img{
+				width: 72rpx;
+				margin-right: 16rpx;
+			}
+			.name-box{
+				width: calc(100% - 100rpx);
+				overflow: hidden;
+				word-wrap: break-word;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				-webkit-box-orient: vertical;
+			}
+		}
+		.toFolder-img{
+			width: 28rpx;
+		}
+	}
+	.select-tips{
+		width: 100%;
+		height: 160rpx;
+		text-align: center;
+		font-size: 32rpx;
+		color: #888;
+		padding-top: 60rpx;
+	}
+	.file-box{
+		height: 120rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin: 0 32rpx;
+		border-bottom: 1px solid #EEEEEE;
+		.file-name-box{
+			width: 80%;
+			display: flex;
+			align-items: center;
+			.file-img{
+				width: 72rpx;
+				margin-right: 16rpx;
+			}
+			// .type-file{
+			// 	width: 60rpx;
+			// 	margin-left: 10rpx;
+			// }
+			.name-box{
+				width: calc(100% - 100rpx);
+				overflow: hidden;
+				word-wrap: break-word;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				-webkit-box-orient: vertical;
+			}
+		}
+		.select-img{
+			width: 32rpx;
+		}
+	}
+	.select-foot-btn{
+		width: calc(100% - 64rpx);
+		margin-top: 20rpx;
+	}
+}
+</style>

components/nk-select-file/readme.md

@@ -0,0 +1,46 @@
+### select-file 文件选择（安卓）
+
+使用 v-model 绑定一个变量来控制组件的开启与关闭
+
+**属性说明：**
+
+|属性名			|是否必须	|类型			|默认值			|说明								|
+|---			|----		|----			|---			|---								|
+|filterArr		|否			|Array			|---			|筛选文件类型（不区分大小写）见下方说明			|
+|folderImg		|否			|String			|---			|文件夹的图片						    |
+|backImg		|否			|String			|---			|返回上一级图片						|
+|directionImg	|否			|String			|---		    |右指向箭头							|
+|enterImg		|否			|String			|---			|进入文件夹箭头						|
+|fileImg		|否			|String			|---			|未知文件通用图标，当前仅可识别 pdf、doc/docx、txt	|
+|txtImg			|否			|String			|---			|txt文件图标							|
+|docImg			|否			|String			|---			|doc/docx文件图标					|
+|pdfImg			|否			|String			|---			|pdf文件图标 						|
+|selectedImg	|否			|String			|---			|取消按钮颜色						    |
+|unselectedImg	|否			|String			|---			|未选中状态下的按钮图标				|
+|titel			|否			|String			|选择文件		|标题文字							|
+|titelSize		|否			|String,Number	|36(rpx)		|标题文字大小							|
+|titelWeight	|否			|String,Number	|600			|标题文字粗细							|
+|titelColor		|否			|String			|#373737		|标题文字颜色							|
+|navBgColor		|否			|String			|#fff			|顶部标题栏背景色						|
+|btnText		|否			|String			|上传			|底部按钮文字							|
+|btnSize		|否			|String,Number	|36(rpx)		|底部按钮文字大小						|
+|btnHeight		|否			|String,Number	|92(rpx)		|底部按钮高度							|
+|btnBgColor		|否			|String			|#6521e2		|底部按钮颜色							|
+|btnTextColor	|否			|String			|#fff			|底部按钮文字颜色						|
+
+**filterArr属性说明**
+格式为['zip','RAR']，不区分大小写
+
+**事件说明：**
+
+|事件称名	|说明						|
+|---		|----						|
+|confirm	|点击上传按钮触发的回调事件，会返回选中文件的地址，参数见下方		|
+
+**confirm参数说明：**
+
+|事件称名	|说明						|
+|---		|----						|
+|name		|文件名						|
+|url		|文件地址					|
+|sizeMB		|文件大小					|

components/ossutil/uploadFile.js

@@ -12,7 +12,7 @@ const Crypto = require('./crypto.js');
  *@param - successc:成功回调
  *@param - failc:失败回调
  */ 
-const uploadFile = function (filePath, dir, successc, failc) {
+const uploadFile = function (file,filePath, dir, successc, failc) {debugger
   if (!filePath || filePath.length < 9) {
     uni.showModal({
       title: '图片错误',
@@ -23,7 +23,8 @@ const uploadFile = function (filePath, dir, successc, failc) {
   }
   
   //图片名字 可以自行定义，     这里是采用当前的时间戳 + 150内的随机数来给图片命名的
-  const aliyunFileKey = dir + new Date().getTime() + Math.floor(Math.random() * 150) + '.png';
+  // const aliyunFileKey = dir + new Date().getTime() + Math.floor(Math.random() * 150) + '.png';
+  const aliyunFileKey = file.name
   
   const aliyunServerURL = env.uploadImageUrl;//OSS地址，需要https
   const accessid = env.OSSAccessKeyId;

config/index.js

@@ -1,5 +1,5 @@
 const dev = {
-	baseUrlNew: 'http://192.168.0.17:8091',
+	baseUrlNew: 'http://192.168.1.114:8091',
 	h5Appid: 'wxb66b599f7f61b46f',
 	debug: false
 }

hybrid/html/play.html

@@ -0,0 +1,394 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta name="viewport"
+			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+		<title>视频认证</title>
+		<style>
+			body {
+				margin: 0;
+				background: #F5F6FA;
+			}
+
+			.content {
+				background: #F5F6FA;
+				height: 100vh;
+				position: relative;
+			}
+
+			.row {
+				display: flex;
+				justify-content: center;
+				padding-top: 50px;
+
+			}
+
+			.img-video {
+				position: relative;
+				border-radius: 280px;
+				width: 250px;
+				height: 250px;
+				overflow: hidden;
+			}
+
+			.row2 {
+				display: flex;
+				font-size: 20px;
+				justify-content: center;
+				margin-top: 20px;
+			}
+
+			.verify-btn {
+				background: #2772FB;
+				font-size: 20px;
+				padding: 10px 0;
+				width: 70%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				border-radius: 50px;
+				color: white;
+
+			}
+
+			.btn {
+				position: absolute;
+				bottom: 0;
+				background: white;
+				width: 100%;
+				display: flex;
+				justify-content: center;
+				padding: 40px 0;
+			}
+
+			.img {
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				width: 100%;
+				width: 564px;
+				height: 564px;
+				right: 0;
+				left: 0;
+				margin: auto;
+			}
+
+			.video-content {
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				width: 100%;
+				right: 0;
+				left: 0;
+				margin: auto;
+			}
+
+			.video {
+				width: calc(100%);
+				background: #F5F6FA;
+			}
+
+			.video-btn {
+				width: 100%;
+				display: flex;
+				justify-content: center;
+			}
+			.progressBar {
+				width: 50%;
+				height: 25px;
+				display: block;
+				top: 0;
+				left: 0;
+				bottom: 0;
+				right: 0;
+				margin: auto;
+				padding: 10px 10px 10px 10px;
+				position: absolute;
+				z-index: 2001;
+				background: rgb(102, 102, 102);
+				color: white;
+				border-radius: 5px;
+			}
+			.text{
+				padding: 20px;
+			}
+		</style>
+	</head>
+	<body>
+		<div id='app'>
+			<video width="320" height="240" controls>
+			  <source src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/video165026727868476.mp4" type="video/mp4">
+			</video>
+		</div>
+	</body>
+	<script type="text/javascript" src="vue.min.js"></script>
+	<script type="text/javascript" src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/jquery.min.js"></script>
+	<script type="text/javascript" src="base64.js"></script>
+	<script type="text/javascript" src="crypto.js"></script>
+	<script type="text/javascript" src="index.js"></script>
+	<script type="text/javascript">
+		document.addEventListener('UniAppJSBridgeReady', function() {
+			uni.webView.getEnv(function(res) {
+				console.log('当前环境：' + JSON.stringify(res));
+			});
+			// 
+			new Vue({
+		 	el: '#app',
+				data: {
+					url: '',
+					// showVideo: true,
+					mediaRecorder: null,
+					MediaStreamTrack: null,
+					isAlreadyRecord: false,
+					count: 8,
+					countTimer: null,
+					recordedBlobs: [],
+					compId: ''
+				},
+				beforeDestroy() {
+					this.MediaStreamTrack && this.MediaStreamTrack.stop()
+					this.countTimer && clearTimeout(this.countTimer)
+				},
+				computed: {},
+
+				mounted() {
+					this.getCamera()
+				},
+				watch: {},
+				methods: {
+					getPolicyBase64() {
+						let date = new Date();
+						date.setHours(date.getHours() + 87600);
+						let srcT = date.toISOString();
+		 			const policyText = {
+							"expiration": srcT, //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了 
+							"conditions": [
+								["content-length-range", 0, 100 * 1024 * 1024] // 设置上传文件的大小限制,5mb
+							]
+						};
+
+						const policyBase64 = Window.base64.encode(JSON.stringify(policyText));
+						console.log(policyBase64);
+						return policyBase64;
+					},
+					getSignature(policyBase64) {
+						const accesskey = 'FpClTp4OVrRRtHEfi3lBOWUoLxKieW';
+						// console.log('video.js')
+						// console.log(Crypto)
+						const bytes = Window.Crypto.HMAC(Window.Crypto.SHA1, policyBase64, accesskey, {
+							asBytes: true
+						})
+						const signature = Window.Crypto.util.bytesToBase64(bytes);
+						// console.log(signature);
+		 			return signature;
+					},
+					async uploadFile(file) {
+						var formdata = new FormData()
+						const policyBase64 = this.getPolicyBase64();
+						const signature = this.getSignature(policyBase64); //获取签名
+						const urlStr = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/"
+						const fileName = "appData/video" + new Date().getTime() + Math.floor(Math.random() *
+							150) + '.mp4'
+						formdata.append("key", fileName)
+						formdata.append("policy", policyBase64)
+						formdata.append("OSSAccessKeyId", 'LTAI4G9c14PgKvM23WZ9zrpc')
+						formdata.append("signature", signature)
+						formdata.append("success_action_status", '200')
+						formdata.append("file", file)
+						console.log('file.name')
+						$.ajax({
+							type: "POST",
+							data: formdata,
+							contentType: false,
+							processData: false,
+							url: urlStr,
+							success: function(result) {
+		 					console.log(urlStr + fileName)
+								uni.webView.navigateTo({
+									url: '/pages/mine/company/addcompany?videoSrc=' +
+										urlStr + fileName
+								})
+
+							},
+
+							//请求失败，包含具体的错误信息
+							error: function(e) {
+								console.log(e);
+								console.log(e.status);
+								console.log(e.responseText);
+							}
+						});
+					},
+					// 调用摄像头 开始录制
+					getCamera() {
+						// 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。
+						let constraints = {
+		 				audio: true,
+							video: {
+								facingMode: 'user' // 优先调前置摄像头
+							}
+						}
+						console.log('--------------')
+						console.log(navigator)
+						// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+						if (navigator.mediaDevices === undefined) {
+							navigator.mediaDevices = {}
+						}
+						// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+						// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+						if (navigator.mediaDevices.getUserMedia === undefined) {
+							navigator.mediaDevices.getUserMedia = function(constraints) {
+								// 首先，如果有getUserMedia的话，就获得它
+								//   var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
+								var getUserMedia = navigator.getUserMedia ||
+		 						navigator.webkitGetUserMedia ||
+									navigator.mozGetUserMedia
+		 					// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+								if (!getUserMedia) {
+									this.$messageBox.alert('该浏览器不支持getUserMedia，请使用其他浏览器')
+									return Promise.reject(new Error(
+										'getUserMedia is not implemented in this browser'))
+								}
+								// 否则，为老的navigator.getUserMedia方法包裹一个Promise
+								return new Promise(function(resolve, reject) {
+									getUserMedia.call(navigator, constraints, resolve, reject)
+								})
+							}
+						}
+						navigator.mediaDevices.getUserMedia(constraints)
+							.then((stream) => {
+								this.MediaStreamTrack = typeof stream.stop === 'function' ? stream :
+									stream
+									.getTracks()[0]
+								console.log(stream)
+								console.log(this.MediaStreamTrack)
+								// 显示录制框
+								this.showVideo = true
+								this.isAlreadyRecord = false
+								let winURL = window.URL || window.webkitURL
+								if ('srcObject' in this.$refs.videoRef) {
+									this.$refs.videoRef.srcObject = stream
+								} else {
+									this.$refs.videoRef.src = winURL.createObjectURL(stream)
+								}
+								console.log(this.$refs.videoRef)
+								this.$refs.videoRef.onloadedmetadata = e => {
+									// 播放视频
+									this.$refs.videoRef.play()
+								}
+								let options = {
+									videoBitsPerSecond: 2500000
+		 					}
+								this.mediaRecorder = new MediaRecorder(stream, options)
+							})
+							.catch((err) => {
+								console.log(err)
+								this.$messageBox.alert('摄像头开启失败，请检查摄像头是否授权或是否可用！')
+							})
+							$("#progressBar").hide();
+					},
+					// 关闭活体检测
+					closeVideo() {
+						this.recordedBlobs = ''
+						this.isAlreadyRecord = false
+						this.MediaStreamTrack && this.MediaStreamTrack.stop()
+						this.countTimer && clearTimeout(this.countTimer)
+						this.$router.go(0)
+					},
+					// 录制倒计时
+					countDown() {
+						let that = this
+						let sendTime = Math.round(+new Date() / 1000)
+		 			return function walk() {
+							that.countTimer = setTimeout(function() {
+								that.countTimer && clearTimeout(that.countTimer)
+								let diff = sendTime + 8 - Math.round(+new Date() / 1000)
+								if (diff > 0) {
+									that.count = diff
+									walk()
+								} else {
+									console.log('倒计时结束')
+									// this.showVideo = false
+									console.log(this.url)
+									console.log(this.MediaStreamTrack)
+								}
+							}, 1000)
+						}
+					},
+					dataURLtoBlob(dataurl) {
+
+						var arr = dataurl.split(","),
+
+							mime = arr[0].match(/:(.*?);/)[1],
+
+							bstr = atob(arr[1]),
+
+							n = bstr.length,
+
+							u8arr = new Uint8Array(n);
+
+						while (n--) {
+
+							u8arr[n] = bstr.charCodeAt(n);
+
+						}
+
+						return this.blobToFile(new Blob([u8arr], {
+							type: mime
+						}), {
+							type: mime
+						});
+
+					},
+					blobToFile(theBlob, type) {
+						theBlob.lastModifiedDate = new Date();
+						return new File([theBlob], `${new Date().getTime()}.mp4`, type);
+
+					},
+					// 保存录制视频
+					saveVideo() {
+						let that = this
+						if (this.isAlreadyRecord) {
+							this.countTimer && clearTimeout(this.countTimer)
+							// this.showVideo = false
+							//当录制的数据可用时
+							this.mediaRecorder.ondataavailable = (e) => {
+								if (e.data && e.data.size > 0) {
+									this.recordedBlobs.push(e.data)
+								}
+							}
+							this.mediaRecorder.stop()
+							setTimeout(() => {
+								console.log("this.recordedBlobs-------------------------")
+		 					var blob = new Blob(this.recordedBlobs, {
+									type: 'video/mp4'
+		 					})
+								this.isAlreadyRecord = false
+								this.MediaStreamTrack && this.MediaStreamTrack.stop()
+								var reader = new FileReader();
+								reader.readAsDataURL(blob)
+								reader.onload = (e) => {
+									this.$refs.videob.src = reader.result
+									let a = this.dataURLtoBlob(reader.result)
+									console.log(a)
+									this.uploadFile(a)
+								}
+							}, 100)
+						} else {
+							this.count = 8
+							this.isAlreadyRecord = true
+							this.mediaRecorder.start(8000)
+							this.countDown()()
+						}
+					},
+					changeVideo(e) {
+		 			let file = this.$refs.videoFile.files
+						console.log(file)
+					}
+				}
+			})
+		});
+	</script>
+
+</html>

hybrid/html/video.html

@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<meta charset="utf-8">
+		<meta name="viewport"
+			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 		<title>视频认证</title>
 		<style>
@@ -19,29 +20,29 @@
 			.row {
 				display: flex;
 				justify-content: center;
-				padding-top: 200px;
+				padding-top: 50px;
 
 			}
 
 			.img-video {
 				position: relative;
 				border-radius: 280px;
-				width: 564px;
-				height: 564px;
+				width: 250px;
+				height: 250px;
 				overflow: hidden;
 			}
 
 			.row2 {
 				display: flex;
-				font-size: 36px;
+				font-size: 20px;
 				justify-content: center;
-				margin-top: 100px;
+				margin-top: 20px;
 			}
 
 			.verify-btn {
 				background: #2772FB;
-				font-size: 36px;
-				padding: 20px 0;
+				font-size: 20px;
+				padding: 10px 0;
 				width: 70%;
 				display: flex;
 				justify-content: center;
@@ -58,7 +59,7 @@
 				width: 100%;
 				display: flex;
 				justify-content: center;
-				padding: 80px 0;
+				padding: 40px 0;
 			}
 
 			.img {
@@ -93,15 +94,35 @@
 				display: flex;
 				justify-content: center;
 			}
+			.progressBar {
+				width: 50%;
+				height: 25px;
+				display: block;
+				top: 0;
+				left: 0;
+				bottom: 0;
+				right: 0;
+				margin: auto;
+				padding: 10px 10px 10px 10px;
+				position: absolute;
+				z-index: 2001;
+				background: rgb(102, 102, 102);
+				color: white;
+				border-radius: 5px;
+			}
+			.text{
+				padding: 20px;
+			}
 		</style>
 	</head>
 	<body>
 		<div id='app'>
 			<div class='content'>
+				<div id="progressBar" class="progressBar">地图数据加载中...</div>
 				<div class='row'>
 					<div class='img-video'>
-						<img src="./img/shipinrenzheng.png" alt="" class='img'>
-						<div class="video-content" v-show="showVideo">
+						<!-- <img src="./img/shipinrenzheng.png" alt="" class='img'> -->
+						<div class="video-content">
 							<!--    人脸检测-->
 							<div class="video-cover"></div>
 							<video :src="url" ref="videoRef" autoplay playsinline x5-video-player-type="h5"
@@ -109,286 +130,299 @@
 						</div>
 					</div>
 				</div>
-				<div class='row2' v-show="!showVideo">
+				<!-- 	<div class='row2' v-show="!showVideo">
 					请打开摄像头 并阅读提示文字
-				</div>
-				<div class='row2' v-show="showVideo">
+				</div> -->
+				<div class='row2'>
 					请将头像放于圆圈内，并阅读以下文字
 				</div>
-				<div class='row2' v-show="showVideo">
+				<div class='row2 text'>
 					网络客服过段时间浪费多少级范德萨快逻辑范德萨拉丝机多亏了房价按时付款了金坷垃所肩负的看离开静安寺了发动机as在考虑家双方都会计分录卡死范德萨拉使肌肤抵抗力
 				</div>
 				<div class='btn'>
-					<div class="verify-btn" @click="getCamera" v-show="!showVideo">打开摄像头</div>
-
-					<div v-show="showVideo" class='video-btn'>
+					<!-- <div class="verify-btn" @click="getCamera" v-show="!showVideo">打开摄像头</div> -->
+					<div class='video-btn'>
 						<div class="verify-btn" @click="saveVideo" v-if='!isAlreadyRecord'>开始录制</div>
-						<div class="verify-btn" @click="saveVideo" v-if='isAlreadyRecord'>结束录制</div>
+						<div class="verify-btn" @click="saveVideo" v-if='isAlreadyRecord' data-action="navigateTo">结束录制
+						</div>
 						<!-- <button class="video-close" @click="closeVideo">×</button>
 						<button class="video-save" @click="saveVideo">
 							{{ isAlreadyRecord ? '结束录制(' + count + 's)' : '开始录制' }}</button> -->
 					</div>
 				</div>
-
-
-				<video ref="videob" controls="" name="media" v-show="!showVideo" width="100%" height="400"></video>
+				<video ref="videob" controls="" name="media" width="100%" height="100"></video>
 			</div>
 
 
 		</div>
 	</body>
-	<script src="vue.min.js"></script>
-	<script src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/jquery.min.js"></script>
-	<script src="base64.js"></script>
-	<script src="crypto.js"></script>
-	<!-- <script src="oss.js"></script> -->
-	<!-- <script src="video.js"></script> -->
-	<script>
-		new Vue({
-			el: '#app',
-			data: {
-				url: '',
-				showVideo: false,
-				mediaRecorder: null,
-				MediaStreamTrack: null,
-				isAlreadyRecord: false,
-				count: 8,
-				countTimer: null,
-				recordedBlobs: [],
-				compId: ''
-			},
-			beforeDestroy() {
-				this.MediaStreamTrack && this.MediaStreamTrack.stop()
-				this.countTimer && clearTimeout(this.countTimer)
-			},
-			computed: {},
+	<script type="text/javascript" src="vue.min.js"></script>
+	<script type="text/javascript" src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/jquery.min.js"></script>
+	<script type="text/javascript" src="base64.js"></script>
+	<script type="text/javascript" src="crypto.js"></script>
+	<script type="text/javascript" src="index.js"></script>
+	<script type="text/javascript">
+		document.addEventListener('UniAppJSBridgeReady', function() {
+			uni.webView.getEnv(function(res) {
+				console.log('当前环境：' + JSON.stringify(res));
+			});
+			// 
+			new Vue({
+		 	el: '#app',
+				data: {
+					url: '',
+					// showVideo: true,
+					mediaRecorder: null,
+					MediaStreamTrack: null,
+					isAlreadyRecord: false,
+					count: 8,
+					countTimer: null,
+					recordedBlobs: [],
+					compId: ''
+				},
+				beforeDestroy() {
+					this.MediaStreamTrack && this.MediaStreamTrack.stop()
+					this.countTimer && clearTimeout(this.countTimer)
+				},
+				computed: {},
 
-			mounted() {
+				mounted() {
+					this.getCamera()
+				},
+				watch: {},
+				methods: {
+					getPolicyBase64() {
+						let date = new Date();
+						date.setHours(date.getHours() + 87600);
+						let srcT = date.toISOString();
+		 			const policyText = {
+							"expiration": srcT, //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了 
+							"conditions": [
+								["content-length-range", 0, 100 * 1024 * 1024] // 设置上传文件的大小限制,5mb
+							]
+						};
 
-			},
-			watch: {},
-			methods: {
-				getPolicyBase64() {
-					let date = new Date();
-					date.setHours(date.getHours() + 87600);
-					let srcT = date.toISOString();
-					const policyText = {
-						"expiration": srcT, //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了 
-						"conditions": [
-							["content-length-range", 0, 100 * 1024 * 1024] // 设置上传文件的大小限制,5mb
-						]
-					};
+						const policyBase64 = Window.base64.encode(JSON.stringify(policyText));
+						console.log(policyBase64);
+						return policyBase64;
+					},
+					getSignature(policyBase64) {
+						const accesskey = 'FpClTp4OVrRRtHEfi3lBOWUoLxKieW';
+						// console.log('video.js')
+						// console.log(Crypto)
+						const bytes = Window.Crypto.HMAC(Window.Crypto.SHA1, policyBase64, accesskey, {
+							asBytes: true
+						})
+						const signature = Window.Crypto.util.bytesToBase64(bytes);
+						// console.log(signature);
+		 			return signature;
+					},
+					async uploadFile(file) {
+						var formdata = new FormData()
+						const policyBase64 = this.getPolicyBase64();
+						const signature = this.getSignature(policyBase64); //获取签名
+						const urlStr = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/"
+						const fileName = "appData/video" + new Date().getTime() + Math.floor(Math.random() *
+							150) + '.mp4'
+						formdata.append("key", fileName)
+						formdata.append("policy", policyBase64)
+						formdata.append("OSSAccessKeyId", 'LTAI4G9c14PgKvM23WZ9zrpc')
+						formdata.append("signature", signature)
+						formdata.append("success_action_status", '200')
+						formdata.append("file", file)
+						console.log('file.name')
+						$.ajax({
+							type: "POST",
+							data: formdata,
+							contentType: false,
+							processData: false,
+							url: urlStr,
+							success: function(result) {
+		 					console.log(urlStr + fileName)
+								uni.webView.navigateTo({
+									url: '/pages/mine/company/addcompany?videoSrc=' +
+										urlStr + fileName
+								})
 
-					const policyBase64 = Window.base64.encode(JSON.stringify(policyText));
-					console.log(policyBase64);
-					return policyBase64;
-				},
-				getSignature(policyBase64) {
-					const accesskey = 'FpClTp4OVrRRtHEfi3lBOWUoLxKieW';
-					// console.log('video.js')
-					// console.log(Crypto)
-					const bytes = Window.Crypto.HMAC(Window.Crypto.SHA1, policyBase64, accesskey, {
-						asBytes: true
-					})
-					const signature = Window.Crypto.util.bytesToBase64(bytes);
-					// console.log(signature);
-					return signature;
-				},
-				uploadFile(file) {
-					var formdata = new FormData()
-					const policyBase64 = this.getPolicyBase64();
-					const signature = this.getSignature(policyBase64); //获取签名
-					formdata.append("key", 'appData/video' + new Date().getTime() + Math.floor(Math.random() * 150) +
-						'.mp4')
-					formdata.append("policy", policyBase64)
-					formdata.append("OSSAccessKeyId", 'LTAI4G9c14PgKvM23WZ9zrpc')
-					// E9996KCDUh5wSzsJjHzqaq/FmHk=
-					// formdata.append("signature", 'E9996KCDUh5wSzsJjHzqaq/FmHk=')
-					formdata.append("signature", signature)
-					formdata.append("success_action_status", '200')
-					formdata.append("file",file)
-					$.ajax({
-						type: "POST",
-						data: formdata,
-						contentType : false,
-						processData : false,
-						url: 'https://taohaoliang.oss-cn-beijing.aliyuncs.com',
-						success: function(result) {
-							console.log("result", result);
-						},
+							},
 
-						//请求失败，包含具体的错误信息
-						error: function(e) {
-							console.log(e);
-							console.log(e.status);
-							console.log(e.responseText);
+							//请求失败，包含具体的错误信息
+							error: function(e) {
+								console.log(e);
+								console.log(e.status);
+								console.log(e.responseText);
+							}
+						});
+					},
+					// 调用摄像头 开始录制
+					getCamera() {
+						// 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。
+						let constraints = {
+		 				audio: true,
+							video: {
+								facingMode: 'user' // 优先调前置摄像头
+							}
 						}
-					});
-				},
-				// 调用摄像头 开始录制
-				getCamera() {
-					// 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。
-					let constraints = {
-						audio: true,
-						video: {
-							facingMode: 'user' // 优先调前置摄像头
+						console.log('--------------')
+						console.log(navigator)
+						// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+						if (navigator.mediaDevices === undefined) {
+							navigator.mediaDevices = {}
 						}
-					}
-					console.log('--------------')
-					console.log(navigator)
-					// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
-					if (navigator.mediaDevices === undefined) {
-						navigator.mediaDevices = {}
-					}
-					// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
-					// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
-					if (navigator.mediaDevices.getUserMedia === undefined) {
-						navigator.mediaDevices.getUserMedia = function(constraints) {
-							// 首先，如果有getUserMedia的话，就获得它
-							//   var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
-							var getUserMedia = navigator.getUserMedia ||
-								navigator.webkitGetUserMedia ||
-								navigator.mozGetUserMedia
-							// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
-							if (!getUserMedia) {
-								this.$messageBox.alert('该浏览器不支持getUserMedia，请使用其他浏览器')
-								return Promise.reject(new Error(
-									'getUserMedia is not implemented in this browser'))
+						// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+						// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+						if (navigator.mediaDevices.getUserMedia === undefined) {
+							navigator.mediaDevices.getUserMedia = function(constraints) {
+								// 首先，如果有getUserMedia的话，就获得它
+								//   var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
+								var getUserMedia = navigator.getUserMedia ||
+		 						navigator.webkitGetUserMedia ||
+									navigator.mozGetUserMedia
+		 					// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+								if (!getUserMedia) {
+									this.$messageBox.alert('该浏览器不支持getUserMedia，请使用其他浏览器')
+									return Promise.reject(new Error(
+										'getUserMedia is not implemented in this browser'))
+								}
+								// 否则，为老的navigator.getUserMedia方法包裹一个Promise
+								return new Promise(function(resolve, reject) {
+									getUserMedia.call(navigator, constraints, resolve, reject)
+								})
 							}
-							// 否则，为老的navigator.getUserMedia方法包裹一个Promise
-							return new Promise(function(resolve, reject) {
-								getUserMedia.call(navigator, constraints, resolve, reject)
-							})
 						}
-					}
-					navigator.mediaDevices.getUserMedia(constraints)
-						.then((stream) => {
-							this.MediaStreamTrack = typeof stream.stop === 'function' ? stream : stream
-								.getTracks()[0]
-							console.log(stream)
-							console.log(this.MediaStreamTrack)
-							// 显示录制框
-							this.showVideo = true
-							this.isAlreadyRecord = false
-							let winURL = window.URL || window.webkitURL
-							if ('srcObject' in this.$refs.videoRef) {
-								this.$refs.videoRef.srcObject = stream
-							} else {
-								this.$refs.videoRef.src = winURL.createObjectURL(stream)
-							}
-							console.log(this.$refs.videoRef)
-							this.$refs.videoRef.onloadedmetadata = e => {
-								// 播放视频
-								this.$refs.videoRef.play()
-							}
-							let options = {
-								videoBitsPerSecond: 2500000
-							}
-							this.mediaRecorder = new MediaRecorder(stream, options)
-						})
-						.catch((err) => {
-							console.log(err)
-							this.$messageBox.alert('摄像头开启失败，请检查摄像头是否授权或是否可用！')
-						})
-				},
-				// 关闭活体检测
-				closeVideo() {
-					this.recordedBlobs = ''
-					this.isAlreadyRecord = false
-					this.MediaStreamTrack && this.MediaStreamTrack.stop()
-					this.countTimer && clearTimeout(this.countTimer)
-					this.$router.go(0)
-				},
-				// 录制倒计时
-				countDown() {
-					let that = this
-					let sendTime = Math.round(+new Date() / 1000)
-					return function walk() {
-						that.countTimer = setTimeout(function() {
-							that.countTimer && clearTimeout(that.countTimer)
-							let diff = sendTime + 8 - Math.round(+new Date() / 1000)
-							if (diff > 0) {
-								that.count = diff
-								walk()
-							} else {
-								console.log('倒计时结束')
-								this.showVideo = false
-								console.log(this.url)
+						navigator.mediaDevices.getUserMedia(constraints)
+							.then((stream) => {
+								this.MediaStreamTrack = typeof stream.stop === 'function' ? stream :
+									stream
+									.getTracks()[0]
+								console.log(stream)
 								console.log(this.MediaStreamTrack)
-							}
-						}, 1000)
-					}
-				},
-				dataURLtoBlob(dataurl) {
-				
-				      var arr = dataurl.split(","),
-				
-				        mime = arr[0].match(/:(.*?);/)[1],
-				
-				        bstr = atob(arr[1]),
-				
-				        n = bstr.length,
-				
-				        u8arr = new Uint8Array(n);
-				
-				      while (n--) {
-				
-				        u8arr[n] = bstr.charCodeAt(n);
-				
-				      }
-				
-				      return this.blobToFile(new Blob([u8arr], { type: mime }), { type: mime });
-				
-				    },
-					blobToFile(theBlob, type) {
-					      theBlob.lastModifiedDate = new Date();
-					      return new File([theBlob], `${new Date().getTime()}.mp4`, type);
-					
-					    },
-				// 保存录制视频
-				saveVideo() {
-					let that = this
-					if (this.isAlreadyRecord) {
+								// 显示录制框
+								this.showVideo = true
+								this.isAlreadyRecord = false
+								let winURL = window.URL || window.webkitURL
+								if ('srcObject' in this.$refs.videoRef) {
+									this.$refs.videoRef.srcObject = stream
+								} else {
+									this.$refs.videoRef.src = winURL.createObjectURL(stream)
+								}
+								console.log(this.$refs.videoRef)
+								this.$refs.videoRef.onloadedmetadata = e => {
+									// 播放视频
+									this.$refs.videoRef.play()
+								}
+								let options = {
+									videoBitsPerSecond: 2500000
+		 					}
+								this.mediaRecorder = new MediaRecorder(stream, options)
+							})
+							.catch((err) => {
+								console.log(err)
+								this.$messageBox.alert('摄像头开启失败，请检查摄像头是否授权或是否可用！')
+							})
+							$("#progressBar").hide();
+					},
+					// 关闭活体检测
+					closeVideo() {
+						this.recordedBlobs = ''
+						this.isAlreadyRecord = false
+						this.MediaStreamTrack && this.MediaStreamTrack.stop()
 						this.countTimer && clearTimeout(this.countTimer)
-						this.showVideo = false
-						//当录制的数据可用时
-						this.mediaRecorder.ondataavailable = (e) => {
-							if (e.data && e.data.size > 0) {
-								this.recordedBlobs.push(e.data)
-							}
+						this.$router.go(0)
+					},
+					// 录制倒计时
+					countDown() {
+						let that = this
+						let sendTime = Math.round(+new Date() / 1000)
+		 			return function walk() {
+							that.countTimer = setTimeout(function() {
+								that.countTimer && clearTimeout(that.countTimer)
+								let diff = sendTime + 8 - Math.round(+new Date() / 1000)
+								if (diff > 0) {
+									that.count = diff
+									walk()
+								} else {
+									console.log('倒计时结束')
+									// this.showVideo = false
+									console.log(this.url)
+									console.log(this.MediaStreamTrack)
+								}
+							}, 1000)
 						}
-						this.mediaRecorder.stop()
-						setTimeout(() => {
-							console.log("this.recordedBlobs-------------------------")
-							var blob = new Blob(this.recordedBlobs, {
-								type: 'video/mp4'
-							})
-							this.isAlreadyRecord = false
-							this.MediaStreamTrack && this.MediaStreamTrack.stop()
-							var reader = new FileReader();
-							reader.readAsDataURL(blob)
-							reader.onload = (e) => {
-								this.$refs.videob.src = reader.result
-								
-								
-								let a = this.dataURLtoBlob(reader.result)
-								console.log(a)
-								this.uploadFile(a)
+					},
+					dataURLtoBlob(dataurl) {
+
+						var arr = dataurl.split(","),
+
+							mime = arr[0].match(/:(.*?);/)[1],
+
+							bstr = atob(arr[1]),
+
+							n = bstr.length,
+
+							u8arr = new Uint8Array(n);
+
+						while (n--) {
+
+							u8arr[n] = bstr.charCodeAt(n);
+
+						}
+
+						return this.blobToFile(new Blob([u8arr], {
+							type: mime
+						}), {
+							type: mime
+						});
+
+					},
+					blobToFile(theBlob, type) {
+						theBlob.lastModifiedDate = new Date();
+						return new File([theBlob], `${new Date().getTime()}.mp4`, type);
+
+					},
+					// 保存录制视频
+					saveVideo() {
+						let that = this
+						if (this.isAlreadyRecord) {
+							this.countTimer && clearTimeout(this.countTimer)
+							// this.showVideo = false
+							//当录制的数据可用时
+							this.mediaRecorder.ondataavailable = (e) => {
+								if (e.data && e.data.size > 0) {
+									this.recordedBlobs.push(e.data)
+								}
 							}
-						}, 1000)
-					} else {
-						this.count = 8
-						this.isAlreadyRecord = true
-						this.mediaRecorder.start(8000)
-						this.countDown()()
+							this.mediaRecorder.stop()
+							setTimeout(() => {
+								console.log("this.recordedBlobs-------------------------")
+		 					var blob = new Blob(this.recordedBlobs, {
+									type: 'video/mp4'
+		 					})
+								this.isAlreadyRecord = false
+								this.MediaStreamTrack && this.MediaStreamTrack.stop()
+								var reader = new FileReader();
+								reader.readAsDataURL(blob)
+								reader.onload = (e) => {
+									this.$refs.videob.src = reader.result
+									let a = this.dataURLtoBlob(reader.result)
+									console.log(a)
+									this.uploadFile(a)
+								}
+							}, 100)
+						} else {
+							this.count = 8
+							this.isAlreadyRecord = true
+							this.mediaRecorder.start(8000)
+							this.countDown()()
+						}
+					},
+					changeVideo(e) {
+		 			let file = this.$refs.videoFile.files
+						console.log(file)
 					}
-				},
-				changeVideo(e) {
-					let file = this.$refs.videoFile.files
-					console.log(file)
 				}
-			}
-		})
+			})
+		});
 	</script>
 
 </html>

package.json

@@ -0,0 +1,17 @@
+{
+    "id": "nk-select-file",
+    "name": "可自定义样式的文件选择--安卓端",
+    "version": "1.0.2",
+    "description": "可自定义样式的文件选择，仅支持安卓端，后续会添加更多自定义内容与功能拓展",
+    "keywords": [
+        "文件选择",
+        "file",
+        "自定义"
+    ],
+    "dcloudext": {
+        "category": [
+            "前端组件",
+            "通用组件"
+        ]
+    }
+}

pages.json

@@ -147,7 +147,8 @@
 		{
 			"path": "pages/mine/company/addcompany",
 			"style": {
-				"navigationStyle": "custom"
+				"navigationBarTitleText": "企业认证",
+				"enablePullDownRefresh": false
 			}
 
 		}, {
@@ -392,7 +393,16 @@
 			}
 
 		}
-	],
+	    ,{
+            "path" : "pages/mine/cargoowner/editEnerprise",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",

pages/mine/agentCargoOwner.vue

@@ -1,29 +1,41 @@
 <template>
 	<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
-		<view class="good-list">
+		<view class="good-list content">
 			<view class="good-li" v-for="(good,index) in goods" :key="index">
-				<view class="row flex flex-space-between">
-					<view class="left flex">
-						<view class="name">{{good.name}}</view>
-						<view class="name">{{good.phone}}</view>
+				<view class="row flex">
+					<image :src="good.avatarUrl" mode="" class="avatar-img"></image>
+					<view class="content-text">
+						<view class="left flex">
+							<view class="name">{{good.name}}</view>
+							<view class="phone">{{good.phone}}</view>
+						</view>
+						<view class="company">{{good.company}}</view>
 					</view>
-					<view class="right">{{good.status}}</view>
+					<view class="right-status number-color" v-if="good.status=='待审核'">{{good.status}}</view>
+					<view class="right-status wtg-color" v-if="good.status=='已驳回'">{{good.status}}</view>
+					<view class="right-status wtg-color" v-if="good.status=='平台已驳回'">{{good.status}}</view>
+					<view class="right-status wtg-color" v-if="good.status=='已撤销授权'">{{good.status}}</view>
+					<view class="right-status ygq-color" v-if="good.status=='代理终止'">{{good.status}}</view>
+					<view class="right-status ytg-color" v-if="good.status=='已授权'">{{good.status}}</view>
 				</view>
-				<view class="row flex flex-space-between">
-					<view class="left flex">
-						<view class="name">{{good.company}}</view>
-					</view>
+				<view class="row flex sqs flex-space-between" @click="previewImage(good)">
 					<view class="right">授权书</view>
+					<u-icon name="attach" color="#2979ff" size="24"></u-icon>
+					
 				</view>
-				<view class="row flex flex-end">
-					<view class="btn" @click="configAuthorize(good,1)">授权</view>
-					<view class="btn" @click="configAuthorize(good,2)">驳回</view>
-					<view class="btn" @click="del(good)">删除</view>
-					<view class="btn" @click="configAuthorize(good,3)">撤销授权</view>
+				<view class="row flex flex-end row-btn">
+					<view class="btn sq-btn" @click="configAuthorize(good,1)" v-if="good.status=='待审核'">授权</view>
+					<view class="btn bh-btn" @click="configAuthorize(good,2)" v-if="good.status=='待审核'">驳回</view>
+					<view class="btn sc-btn" @click="del(good)"
+						v-if="good.status=='已驳回'||good.status=='已撤销授权'||good.status=='代理终止'">删除</view>
+					<view class="btn cxsq-btn" @click="configAuthorize(good,3)" v-if="good.status=='已授权'">撤销授权</view>
 				</view>
 			</view>
 		</view>
 		<u-toast ref="uToast"></u-toast>
+		<u-modal :show="isShowAlert" :title="alertTitle" :content='alertContent' :closeOnClickOverlay='true'
+			:showCancelButton='true' confirmColor='#2772FB' @confirm="confirmClick" @close="cancelClick"
+			@cancel="cancelClick"></u-modal>
 	</mescroll-body>
 </template>
 
@@ -41,7 +53,12 @@
 		mixins: [MescrollMixin], // 使用mixin
 		data() {
 			return {
-				goods: [] // 数据列表
+				isShowAlert: false,
+				alertTitle: '',
+				alertContent: '',
+				goods: [], // 数据列表，
+				type: '',
+				selectVal: null
 			}
 		},
 		computed: {
@@ -51,58 +68,95 @@
 			that = this
 		},
 		methods: {
-			mescrollInit(mescroll) {
-				this.mescroll = mescroll;
+			previewImage(good){
+				uni.previewImage({
+							urls: [good.certificateAddressUrl],
+							longPressActions: {
+								// itemList: ['发送给朋友', '保存图片', '收藏'],
+								success: function(data) {
+									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
+								},
+								fail: function(err) {
+									console.log(err.errMsg);
+								}
+							}
+						});
 			},
-			configAuthorize(val, type) {
-				this.$request.baseRequest('post', '/agentCargoOwnerInfo/api/editAgentCargoOwner', {
-						id: val.id,
-						grantFlag: type,
-					}).then(res => {
-						if (res.code == 200) {
+			confirmClick() {
+				if (this.type == 4) {
+					this.$request.baseRequest('post', '/agentCargoOwnerInfo/api/deleteAgentCargoOwner', {
+							id: this.selectVal.id,
+						}).then(res => {
+							this.isShowAlert = false
 							that.$refs.uToast.show({
 								type: 'success',
-								message: "操作成功！",
+								message: "刪除成功！",
 								complete() {
 									that.mescroll.resetUpScroll()
-									// uni.switchTab({
-									// 	url: "/pages/order/index"
-									// })
 								}
 							})
-						}
-					})
-					.catch(res => {
-						uni.hideLoading()
-						uni.showToast({
-							title: res.message,
-							icon: 'none',
-							duration: 2000
 						})
-						this.mescroll.endErr();
-					});
-			},
-			del(val) {
-				this.$request.baseRequest('post', '/agentCargoOwnerInfo/api/deleteAgentCargoOwner', {
-						id: val.id,
-					}).then(res => {
-						that.$refs.uToast.show({
-							type: 'success',
-							message: "刪除成功！",
-							complete() {
-								that.mescroll.resetUpScroll()
+						.catch(res => {
+							uni.hideLoading()
+							uni.showToast({
+								title: res.message,
+								icon: 'none',
+								duration: 2000
+							})
+							this.mescroll.endErr();
+						});
+				} else {
+					this.$request.baseRequest('post', '/agentCargoOwnerInfo/api/editAgentCargoOwner', {
+							id: this.selectVal.id,
+							grantFlag: this.type,
+						}).then(res => {
+							if (res.code == 200) {
+								this.isShowAlert = false
+								that.$refs.uToast.show({
+									type: 'success',
+									message: "操作成功！",
+									complete() {
+										that.mescroll.resetUpScroll()
+									}
+								})
 							}
 						})
-					})
-					.catch(res => {
-						uni.hideLoading()
-						uni.showToast({
-							title: res.message,
-							icon: 'none',
-							duration: 2000
-						})
-						this.mescroll.endErr();
-					});
+						.catch(res => {
+							uni.hideLoading()
+							uni.showToast({
+								title: res.message,
+								icon: 'none',
+								duration: 2000
+							})
+							this.mescroll.endErr();
+						});
+				}
+
+			},
+			cancelClick() {
+				this.isShowAlert = false
+			},
+			mescrollInit(mescroll) {
+				this.mescroll = mescroll;
+			},
+			configAuthorize(val, type) {
+				this.type = type
+				this.selectVal = val
+				if (type == 1) {
+					this.alertTitle = '确定授权？'
+				} else if (type == 2) {
+					this.alertTitle = '确定驳回？'
+				} else {
+					this.alertTitle = '确定撤销授权？'
+				}
+				this.isShowAlert = true
+			},
+			del(val) {
+				this.alertTitle = '确定删除？'
+				this.selectVal = val
+				this.type = 4
+				this.isShowAlert = true
+
 			},
 			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
 			upCallback(page) {
@@ -130,6 +184,81 @@
 	}
 </script>
 
-<style>
+<style scoped lang="scss">
+	.good-li {
+		background: white;
+		margin: 20rpx;
+		border-radius: 15rpx;
+		padding: 40rpx;
+		position: relative;
+
+		.row {
+			align-items: center;
+		}
+	}
+
+	.avatar-img {
+		width: 104rpx;
+		height: 104rpx;
+	}
+
+	.right-status {
+		position: absolute;
+		top: 20rpx;
+		right: 20rpx;
+	}
+
+	.content-text {
+		margin-left: 30rpx;
 
+		.name {
+			font-size: 36rpx;
+			font-weight: 700;
+			color: #333333;
+			margin-right: 20rpx;
+		}
+
+		.company {
+			color: #333333;
+		}
+
+		.left {
+			align-items: baseline;
+
+			.phone {
+				font-size: 28rpx;
+			}
+		}
+	}
+
+	.sqs {
+		background: #F3F8FF;
+		margin-top: 40rpx;
+		color: #2772FB;
+		padding: 20rpx;
+		border-radius: 15rpx;
+	}
+
+	.row-btn {
+		margin-top: 40rpx;
+	}
+
+	.sq-btn {
+		background: #2772FB;
+		font-size: 28rpx;
+		color: #FFFFFF;
+		padding: 10rpx 20rpx;
+		border-radius: 50rpx;
+		margin-right: 20rpx;
+	}
+
+	.bh-btn,
+	.sc-btn,
+	.cxsq-btn {
+		background: #F8F8F8;
+		font-size: 28rpx;
+		color: #333333;
+		padding: 10rpx 20rpx;
+		border-radius: 50rpx;
+	}
 </style>

pages/mine/cargoowner/addEnerprise.vue

@@ -19,7 +19,23 @@
 		</view>
 		<view class='content1'>
 			<view class="title">上传企业授权书</view>
-			<view style='position:relative;'>
+			<!-- {{show}} -->
+<!-- 			<button type="default" @click="()=>{show = true}" style="width: 80%;background-color: #007AFF;color: #fff;margin-top: 60rpx;">选择文件</button>
+				<view class="textStyle" v-for="(item,index) in pathArr" :key="index">
+					<view>
+						文件名：{{item.name}}
+					</view>
+					<view>
+						文件地址：{{item.url}}
+					</view>
+					<view>
+						文件大小：{{item.sizeMB}}
+					</view>
+				</view>
+				<nk-select-file v-model="show" @confirm="getPath"></nk-select-file> -->
+			<u-upload class="uview-upload" :fileList="fileList1" @afterRead="afterRead($event)" @delete="deletePic"
+				name="1" multiple :maxCount="9"></u-upload>
+	<!-- 		<view style='position:relative;'>
 				<view v-if='!dataDetails.certificateAddressUrl' @click="uploadImg(1)" class="picture picture7">
 					<image class="xj-image" src="@/static/mine/ic_shanchuan@2x.png"></image>
 					<view class="text">上传企业授权书</view>
@@ -32,7 +48,7 @@
 				</view>
 				<image class="" :src="dataDetails.certificateAddressUrl" mode="aspectFit"></image>
 			</view>
-			</view>
+			</view> -->
 			<view class="flex row noborder">
 				<view class="left-text">营业期限截止日期</view>
 				<view style='font-size:16px;width:50%;' class='flex flex-space-between'  @click="selectdate">
@@ -70,11 +86,15 @@
 	import upload from '@/components/upload.vue';
 	import uploadImage from '@/components/ossutil/uploadFile.js';
 	export default {
+		components: {
+		},
 		data() {
 			return {
+				show:false,
+				pathArr: [],
 				dataDetails:{
 					authorizationDeadline:'',
-					certificateAddressUrl:''
+					certificateAddressUrl:'',
 				},
 				companuList:[],
 				isshow:false,
@@ -83,7 +103,8 @@
 				validityPeriod:[],
 				isShowimgType:false,
 				uploadType:'',
-				index:0
+				index:0,
+				fileList1: []
 			}
 		},
 		computed: {
@@ -93,8 +114,8 @@
 			if(uni.getStorageSync('cargoOwnerId')){
 				this.dataDetails.cargoOwnerId=uni.getStorageSync('cargoOwnerId')
 			}
-			this.validityPeriod = this.$helper.makeValidityPeriod(0,50)
-			this.getList()
+			this.validityPeriod = this.$helper.makeValidityPeriod(0,'长期')
+			// this.getList()
 		},
 		onShow() {
 			if(uni.getStorageSync('currectcompany')){
@@ -103,6 +124,47 @@
 			}
 		},
 		methods: {
+			getPath(event){
+				console.log(event);
+				this.pathArr = event;
+			},
+			uploadFilePromise(file,url) {
+				uploadImage(file,url, 'appData/',
+					result => {debugger
+						// 上传成功回调函数
+						console.log('图片地址', result)
+						this.dataDetails.certificateAddressUrl += result
+			
+					}
+				)
+			},
+			// 删除图片
+			deletePic(event) {
+				this[`fileList${event.name}`].splice(event.index, 1)
+			},
+			// 新增图片
+			async afterRead(event) {debugger
+				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
+				let lists = [].concat(event.file)
+				let fileListLen = this[`fileList${event.name}`].length
+				lists.map((item) => {
+					this[`fileList${event.name}`].push({
+						...item,
+						status: 'uploading',
+						message: '上传中'
+					})
+				})
+				for (let i = 0; i < lists.length; i++) {
+					const result = await this.uploadFilePromise(lists[i],lists[i].url)
+					let item = this[`fileList${event.name}`][fileListLen]
+					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
+						status: 'success',
+						message: '',
+						url: result
+					}))
+					fileListLen++
+				}
+			},
 			consent(){
 				this.checked=!this.checked
 			},
@@ -122,60 +184,10 @@
 			
 				this.isdate = false
 			},
-			imgTypeSelect(val) {
-				var _this=this
-				if (val.name == '相册') {
-					uni.chooseImage({
-						count: 1,
-						sourceType: this.$helper.chooseImage.sourceType,
-						success: function(res) {
-							console.log(JSON.stringify(res.tempFilePaths));
-							uploadImage(res.tempFilePaths[0], 'appData/',
-								result => {
-									// 上传成功回调函数
-									console.log('图片地址', result)
-									_this.dataDetails.certificateAddressUrl=result
-									console.log(_this.dataDetails.certificateAddressUrl)
-								}
-							)
-						}
-					});
-				} else {
-					uni.chooseImage({
-						count: 1,
-						sourceType: ['camera'],
-						success: function(res) {
-							console.log(JSON.stringify(res.tempFilePaths));
-							uploadImage(res.tempFilePaths[0], 'appData/',
-								result => {
-									// 上传成功回调函数
-									console.log('图片地址', result)
-									_this.dataDetails.certificateAddressUrl=result
-								}
-							)
-						}
-					});
-				}
-			},
-			uploadImg(type, index) {
-				this.uploadType = type
-				this.isShowimgType = true
-				this.index = index
-			},
 			goDetailPage(src) {
 				uni.setStorage({key: 'companydata',data: JSON.stringify(this.dataDetails)});
 				uni.$u.route(src);
 			},
-			confirmcompany(e) {
-				console.log('confirm', e)
-				if (e.value[0] == '长期') {
-					this.dataDetails.businessTermDate = e.value[0]
-				} else {
-					this.dataDetails.businessTermDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
-				}
-			
-				this.isShowcardValidity = false
-			},
 			changeHandler(e) {
 				const {
 					columnIndex,
@@ -197,25 +209,25 @@
 				// 	}
 				// }
 			},
-			getList(){
-				uni.showLoading({
-					title: '加载中',
-					mask:true
-				})
-				var _this=this
-				this.$request.baseRequest('get', '/companyInfo/selectAllCompany').then(res => {
-					uni.hideLoading()
-					this.companyList=res
-				})
-				.catch(res => {
-					uni.hideLoading()
-					uni.showToast({
-						title: res.message,
-						icon: 'none',
-						duration: 2000
-					})
-				});
-			},
+			// getList(){
+			// 	uni.showLoading({
+			// 		title: '加载中',
+			// 		mask:true
+			// 	})
+			// 	var _this=this
+			// 	this.$request.baseRequest('get', '/companyInfo/selectAllCompany').then(res => {
+			// 		uni.hideLoading()
+			// 		this.companyList=res
+			// 	})
+			// 	.catch(res => {
+			// 		uni.hideLoading()
+			// 		uni.showToast({
+			// 			title: res.message,
+			// 			icon: 'none',
+			// 			duration: 2000
+			// 		})
+			// 	});
+			// },
 			submit(){
 				uni.showLoading({
 					title: '加载中',
@@ -247,6 +259,16 @@
 	page{
 		background: #F5F6FA;
 	}
+	.content{
+		/* background: white; */
+		/* padding:20rpx */
+	}
+	.wrap{
+		margin: 20rpx;
+		padding: 20rpx;
+		border-radius: 20rpx;
+		background: white;
+	}
 	.preview-card-img {
 		/deep/uni-image>div, uni-image>img {
 		    transform: scale(1.5) rotate(-90deg);

pages/mine/cargoowner/cargoowner.vue

@@ -21,7 +21,7 @@
 			</view>
 		</view> -->
 		 <!-- @click='goDetailPage("/pages/mine/cargoowner/editpersonalinformation")' -->
-				<view class=' flex items-center identity'>
+				<view class=' flex items-center identity' @click='toEditPage()'>
 					<view style='width:100%;' class='flex items-center content1'>
 						<u--image style='margin-right:5px;' class='image' :showLoading="true"
 							:src="personage.authenticationStatus=='已认证'?'../../../static/mine/huozhurenzheng/shenfen2.png':'../../../static/mine/huozhurenzheng/shenfen.png'"
@@ -61,7 +61,8 @@
 					</view>
 					<view class="row3">
 						<view class="right">
-							<image v-if='item.status!="平台审核中"&&item.status!="企业审核中"&&item.status!="企业暂不可用"&&item.status!="企业不存在"&&item.status!="授权已撤销"' @click='edit(item)'
+							<!-- v-if='item.status!="平台审核中"&&item.status!="企业审核中"&&item.status!="企业暂不可用"&&item.status!="企业不存在"&&item.status!="授权已撤销"' -->
+							<image  @click='edit(item)'
 								style='width:17px;height:17px;margin:0 10px;' src="@/static/mine/company/edit.png">
 							</image>
 							<image @click='del(item)' style='width:17px;height:17px;margin:0 10px;'
@@ -111,10 +112,34 @@
 			...mapState(['hasLogin', 'userInfo']),
 		},
 		methods: {
-			edit(){
-				
+			toEditPage(){
+				if(!this.personage){
+					return
+				}else{
+					uni.$u.route("/pages/mine/cargoowner/editpersonalinformation",this.personage);
+				}
+			},
+			edit(val){
+				uni.$u.route('/pages/mine/cargoowner/editEnerprise', val);
+			},
+			del(val){
+				uni.showLoading({
+					mask:true,
+					title:'加载中...'
+				})
+				this.$request.baseRequest('post', '/cargoOwnerCompInfo/api/deleteCargoOwnerComp',{id:val.id} ).then(res => {
+					uni.hideLoading()
+						this.getList()
+				})
+				.catch(res => {
+					uni.hideLoading()
+					uni.showToast({
+						title: res.message,
+						icon: 'none',
+						duration: 2000
+					})
+				});
 			},
-			del(){},
 			goDetailPage(src, status) {
 				if (status) {
 					uni.setStorageSync('cargoOwnerId', this.personage.id)
@@ -184,7 +209,7 @@
 
 <style lang="scss" scoped>
 	.content {
-		height: 90vh;
+		padding-bottom: 200rpx;
 	}
 
 	.identity {

pages/mine/cargoowner/editEnerprise.vue

@@ -0,0 +1,367 @@
+<template>
+	<view class='content'>
+		<view class="wrap">
+			<view style='border-bottom:1px solid #eee;padding:10px 0 10px;' class="flex flex-space-between row">
+				<view class="left-text">企业</view>
+				<view style='font-size:16px;width:50%;' class='flex flex-space-between'  @click="selectshow">
+					<view :style="{'color':dataDetails.company ? '#000':'#C6CBD5'}">{{dataDetails.company?dataDetails.company:'选择所属企业'}}</view>
+					<view><u-icon name="arrow-right" color="#7E7E7E" size="10"></u-icon></view>
+				</view>
+				
+			</view>
+			<view style='padding:10px 0 10px;' class="flex flex-space-between items-center width100">
+				<view style='width:100px;font-size:14px;'>法定代表人姓名</view>
+				<view class="flex">
+					<u--input disabledColor='#fff' disabled placeholder="自动获取" inputAlign='left' border="none" v-model="dataDetails.legalPersonName">
+					</u--input>
+				</view>
+			</view>
+		</view>
+		<view class='content1'>
+			<view class="title">上传企业授权书</view>
+			<!-- {{show}} -->
+<!-- 			<button type="default" @click="()=>{show = true}" style="width: 80%;background-color: #007AFF;color: #fff;margin-top: 60rpx;">选择文件</button>
+				<view class="textStyle" v-for="(item,index) in pathArr" :key="index">
+					<view>
+						文件名：{{item.name}}
+					</view>
+					<view>
+						文件地址：{{item.url}}
+					</view>
+					<view>
+						文件大小：{{item.sizeMB}}
+					</view>
+				</view>
+				<nk-select-file v-model="show" @confirm="getPath"></nk-select-file> -->
+			<u-upload class="uview-upload" :fileList="fileList1" @afterRead="afterRead($event)" @delete="deletePic"
+				name="1" multiple :maxCount="9"></u-upload>
+	<!-- 		<view style='position:relative;'>
+				<view v-if='!dataDetails.certificateAddressUrl' @click="uploadImg(1)" class="picture picture7">
+					<image class="xj-image" src="@/static/mine/ic_shanchuan@2x.png"></image>
+					<view class="text">上传企业授权书</view>
+				</view>
+				<view v-if='dataDetails.certificateAddressUrl' @click.stop="uploadImg(1)"
+				class="preview-card-img picture ">
+				<view @click.stop="delCard(1)">
+					<image class='del-card' src="@/static/images/common/quxiao@2x.png">
+					</image>
+				</view>
+				<image class="" :src="dataDetails.certificateAddressUrl" mode="aspectFit"></image>
+			</view>
+			</view> -->
+			<view class="flex row noborder">
+				<view class="left-text">营业期限截止日期</view>
+				<view style='font-size:16px;width:50%;' class='flex flex-space-between'  @click="selectdate">
+					<view :style="{'color':dataDetails.authorizationDeadline ? '#000':'#C6CBD5'}">{{dataDetails.authorizationDeadline?dataDetails.authorizationDeadline:'选择期限截止日期'}}</view>
+					<view><u-icon name="arrow-right" color="#7E7E7E" size="10"></u-icon></view>
+				</view>
+			</view>
+			<u-picker :show="isdate" ref="uPicker" :columns="validityPeriod"
+				@confirm="confirmValidityPeriod" @change="changeHandler"  @cancel="isdate=false">
+			</u-picker>
+			
+		</view>
+		<u-action-sheet :actions="$helper.imgTypeList" :title="$helper.imgType" :show="isShowimgType"
+			@select="imgTypeSelect" @cancel='isShowimgType=false' :closeOnClickOverlay="true" :closeOnClickAction="true" @close="isShowimgType=false">
+		</u-action-sheet>
+		<view class="content4">
+			<view style='margin:0 0 18px;font-size:12px;color:#999;' class='flex items-center'>
+				<u--image style='margin-right:5px;' @click='consent'
+					:src="checked?'../../../static/mine/duihao@2x.png':'../../../static/mine/wxz.png'"
+					width="12px" height="12px"></u--image>
+					我已阅读并同意全部细则
+			</view>
+			<view class='line'></view>
+			<view :class="{'active':dataDetails.certificateAddressUrl&&dataDetails.company&&dataDetails.legalPersonName&&dataDetails.authorizationDeadline}" class="next-btn" @click="submit()">
+				提交
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex';
+	import upload from '@/components/upload.vue';
+	import uploadImage from '@/components/ossutil/uploadFile.js';
+	export default {
+		components: {
+		},
+		data() {
+			return {
+				show:false,
+				pathArr: [],
+				dataDetails:{},
+				companuList:[],
+				isshow:false,
+				isdate:false,
+				checked:false,
+				validityPeriod:[],
+				isShowimgType:false,
+				uploadType:'',
+				index:0,
+				fileList1: []
+			}
+		},
+		computed: {
+			...mapState(['hasLogin', 'userInfo']),
+		},
+		onLoad(options){
+			if(uni.getStorageSync('cargoOwnerId')){
+				this.dataDetails.cargoOwnerId=uni.getStorageSync('cargoOwnerId')
+			}
+			this.validityPeriod = this.$helper.makeValidityPeriod(0,'长期')
+			// this.getList()
+			debugger
+			this.dataDetails = options
+			this.fileList1 = [{
+				url:options.certificateAddressUrl
+			}]
+		},
+		onShow() {
+		
+		},
+		methods: {
+			uploadFilePromise(file,url) {
+				uploadImage(file,url, 'appData/',
+					result => {
+						// 上传成功回调函数
+						console.log('图片地址', result)
+						this.dataDetails.addressUrl += result
+			
+					}
+				)
+			},
+			// 删除图片
+			deletePic(event) {
+				this[`fileList${event.name}`].splice(event.index, 1)
+			},
+			// 新增图片
+			async afterRead(event) {
+				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
+				let lists = [].concat(event.file)
+				let fileListLen = this[`fileList${event.name}`].length
+				lists.map((item) => {
+					this[`fileList${event.name}`].push({
+						...item,
+						status: 'uploading',
+						message: '上传中'
+					})
+				})
+				for (let i = 0; i < lists.length; i++) {
+					const result = await this.uploadFilePromise(lists[i],lists[i].url)
+					let item = this[`fileList${event.name}`][fileListLen]
+					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
+						status: 'success',
+						message: '',
+						url: result
+					}))
+					fileListLen++
+				}
+			},
+			consent(){
+				this.checked=!this.checked
+			},
+			selectdate(){
+				this.isdate=true
+			},
+			selectshow(){
+				this.goDetailPage('/pages/mine/cargoowner/selectcompany')
+			},
+			confirmValidityPeriod(e) {
+				console.log('confirm', e)
+				if (e.value[0] == '长期') {
+					this.dataDetails.authorizationDeadline = e.value[0]
+				} else {
+					this.dataDetails.authorizationDeadline = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
+				}
+			
+				this.isdate = false
+			},
+			goDetailPage(src) {
+				uni.setStorage({key: 'companydata',data: JSON.stringify(this.dataDetails)});
+				uni.$u.route(src);
+			},
+			changeHandler(e) {
+				const {
+					columnIndex,
+					value,
+					values,
+					index,
+					picker = this.$refs.uPicker
+				} = e
+			
+				// if (columnIndex === 0) {
+				// 	debugger
+				// 	if (e.index != 0) {
+				// 		picker.setColumnValues(1, this.validityPeriod[1].shift())
+				// 	}
+			
+				// } else if (columnIndex === 1) {
+				// 	if (e.index != 0) {
+				// 		picker.setColumnValues(2, this.validityPeriod[2].shift())
+				// 	}
+				// }
+			},
+			// getList(){
+			// 	uni.showLoading({
+			// 		title: '加载中',
+			// 		mask:true
+			// 	})
+			// 	var _this=this
+			// 	this.$request.baseRequest('get', '/companyInfo/selectAllCompany').then(res => {
+			// 		uni.hideLoading()
+			// 		this.companyList=res
+			// 	})
+			// 	.catch(res => {
+			// 		uni.hideLoading()
+			// 		uni.showToast({
+			// 			title: res.message,
+			// 			icon: 'none',
+			// 			duration: 2000
+			// 		})
+			// 	});
+			// },
+			submit(){
+				uni.showLoading({
+					title: '加载中',
+					mask:true
+				})
+				var _this=this
+				this.dataDetails.commonId=this.userInfo.id
+				this.$request.baseRequest('post', '/cargoOwnerCompInfo/api/editCargoOwnerComp', _this.dataDetails).then(res => {
+					uni.hideLoading()
+					uni.removeStorage('cargoOwnerId')
+					uni.removeStorage('currectcompany')
+					uni.$u.toast('提交成功')
+					_this.goDetailPage('/pages/mine/cargoowner/cargoowner')
+				})
+				.catch(res => {
+					uni.hideLoading()
+					uni.showToast({
+						title: res.message,
+						icon: 'none',
+						duration: 2000
+					})
+				});
+			},
+		}
+	}
+</script>
+
+<style lang='scss' scoped>
+	page{
+		background: #F5F6FA;
+	}
+	.content{
+		/* background: white; */
+		/* padding:20rpx */
+	}
+	.wrap{
+		margin: 20rpx;
+		padding: 20rpx;
+		border-radius: 20rpx;
+		background: white;
+	}
+	.preview-card-img {
+		/deep/uni-image>div, uni-image>img {
+		    transform: scale(1.5) rotate(-90deg);
+		}
+	}
+	.picture {
+		margin-top: 20rpx;
+		background: #F5F6FA;
+		width: 212rpx;
+		height: 212rpx;
+		border-radius: 20rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		color: #6A7282;
+	}
+	.content1 {
+		background:#fff;
+		padding:40rpx 20rpx 20rpx;
+		margin:20rpx 0rpx 200rpx;
+		border-radius: 10rpx;
+		.row {
+			border-bottom: 1px solid #EEEEEE;
+			padding-bottom: 28rpx;
+			margin-top: 26rpx;
+	
+		}
+	
+		.left-text {
+			// background: red;
+			width: 320rpx;
+			color: #333333;
+			display: flex;
+			align-items: center;
+			font-size:14px;
+		}
+	
+		.picture {
+			position: relative;
+			width: 100%;
+			height: 440rpx;
+			display: flex;
+			justify-content: center;
+			flex-direction: column;
+			align-items: center;
+	
+			.text {
+				margin-top: 20rpx;
+			}
+		}
+		.picture7 {
+			background: url(../../../static/mine/cy.png);
+			background-size: 100% 100%;
+		}
+	
+	
+		.xj-image {
+			width: 100rpx;
+			height: 100rpx;
+		}
+	
+		.title {
+			color: #999999;
+			margin: 20rpx 0;
+		}
+	}
+	.u-input{
+		font-size:16px;
+	}
+	.content4 {
+		position:fixed;
+		bottom:0;
+		background: white;
+		width:100%;
+		text-align:center;
+		left:0;
+		box-sizing: border-box;;
+		padding:10px 15px;
+		.line{
+			position:absolute;
+			left:0;
+			margin-top:-9px;
+			border-top:1px solid #eee;
+			width:100%;
+		}
+		.next-btn {
+			background: #F1F3F6;
+			width: 85%;
+			padding: 20rpx 20rpx;
+			text-align: center;
+			color: #C5CAD4;
+			border-radius: 50rpx;margin:0 auto;
+			margin-top:10px;
+		}
+		.next-btn.active{
+			background:#2772FB;
+			color:#fff;
+		}
+	}
+</style>

pages/mine/cargoowner/editpersonalinformation.vue

@@ -18,7 +18,7 @@
 			</view>
 			<view class="flex row" style='padding:10px 0 5px;border-bottom:1px solid #eee;'>
 				<view style='width:100px;font-size:14px;'>性别</view>
-				<u-radio-group v-model="dataDetails.driverSex" placement="row">
+				<u-radio-group v-model="dataDetails.sex" placement="row">
 					<u-radio :customStyle="radioCustomStyle" v-for="(item, index) in radiolist1" :key="index"
 						:label="item.name" :name="item.name" @change="radioChange">
 					</u-radio>
@@ -27,9 +27,9 @@
 			<view class="flex row row-ch" style='padding:10px 0 5px;'>
 				<view style='width:100px;font-size:14px;'>称呼</view>
 				<u--input placeholder="输入姓氏" class="ch-style" inputAlign='left' border="none"
-					v-model="dataDetails.driverCall">
+					v-model="dataDetails.call">
 				</u--input>
-				<view class="flex align-center" v-if="dataDetails.driverSex=='男'">先生</view>
+				<view class="flex align-center" v-if="dataDetails.sex=='男'">先生</view>
 				<view class="flex align-center" v-else>女士</view>
 			</view>
 		</view>
@@ -158,8 +158,9 @@
 				index: '',
 			};
 		},
-		onLoad() {
+		onLoad(options) {debugger
 			var _this = this;
+			this.dataDetails = options
 			this.validityPeriod = this.$helper.makeValidityPeriod(0, '长期')
 			this.dataDetails.phone = this.userInfo.phone
 			this.dataDetails.commonId = this.userInfo.id
@@ -508,11 +509,11 @@
 		}
 
 		.next-btn {
-			background: #F1F3F6;
+			background: #2772FB;
 			width: 85%;
 			padding: 20rpx 20rpx;
 			text-align: center;
-			color: #C5CAD4;
+			color: white;
 			border-radius: 50rpx;
 			margin: 0 auto;
 			margin-top: 10px;

pages/mine/cargoowner/selectcompany.vue

@@ -1,11 +1,12 @@
 <template>
 	<view>
-		<luo-nav-bar @leftClick='navback' :searchText='searchText' @rightClick='cancel' @input='companyInput' :isSearch="true" :isPlaceText='true' placeText='输入企业名称' rightText='取消' leftIcon='back'></luo-nav-bar>
+		<luo-nav-bar @leftClick='navback' :searchText='searchText' @rightClick='cancel' @input='companyInput'
+			:isSearch="true" :isPlaceText='true' placeText='输入企业名称' rightText='取消' leftIcon='back'></luo-nav-bar>
 		<view v-if='searching' style='padding:10px;'>
 			<view style='color:#999;margin-bottom:40px;font-size:14px;' v-if='more'>#输入更多关键字精准获取企业</view>
 			<view @click='checkcompany(item)' class='company' v-for='item in companyList'>
 				<rich-text :nodes="item.colorcompanyName"></rich-text>
-				<view class='flex items-center'>
+				<view class='flex items-center align-center'>
 					<view class='legal_person'>法人</view>
 					<view>{{item.legalPersonName}}</view>
 				</view>
@@ -13,7 +14,8 @@
 		</view>
 		<view style='margin-left:20px;' v-if='!searching'>
 			<view>最近搜索</view>
-			<view @click='clicksearch(item)' class='historysearch' :style="{'margin-left':index==0 ? '0':'10px'}" v-for='(item,index) in history' >{{item.searchContent}}</view>
+			<view @click='clicksearch(item)' class='historysearch' :style="{'margin-left':index==0 ? '0':'10px'}"
+				v-for='(item,index) in history'>{{item.searchContent}}</view>
 		</view>
 	</view>
 </template>
@@ -26,144 +28,156 @@
 	export default {
 		data() {
 			return {
-				more:false,
-				companyList:[],
-				lastTime:0,
-				history:[],
-				searching:false,
-				searchText:''
+				more: false,
+				companyList: [],
+				lastTime: 0,
+				history: [],
+				searching: false,
+				searchText: ''
 			}
 		},
-		components:{
-		    luoNavBar
+		components: {
+			luoNavBar
 		},
 		computed: {
 			...mapState(['hasLogin', 'userInfo']),
 		},
-		onLoad(){
-			this.$request.baseRequest('get', '/searchRecordsInfo/selectSearchRecordsInfo', {functionType:1,commonId:this.userInfo.id}).then(res => {
-				this.history=res.data.records
-			})
-			.catch(res => {
-				uni.showToast({
-					title: res.message,
-					icon: 'none',
-					duration: 2000
+		onLoad() {
+			this.$request.baseRequest('get', '/searchRecordsInfo/selectSearchRecordsInfo', {
+					functionType: 1,
+					commonId: this.userInfo.id
+				}).then(res => {
+					this.history = res.data.records
 				})
-			});
+				.catch(res => {
+					uni.showToast({
+						title: res.message,
+						icon: 'none',
+						duration: 2000
+					})
+				});
 		},
 		methods: {
-			navback(){
+			navback() {
 				uni.navigateBack({})
 			},
-			cancel(){
-				this.searchText=''
-				this.searching=false
-				this.companyList=[]
+			cancel() {
+				this.searchText = ''
+				this.searching = false
+				this.companyList = []
 			},
-			join(str,key){
+			join(str, key) {
 				var reg = new RegExp((`(${key})`), "gm");
 				var replace = '<span style="color:#2772FB;">$1</span>';
 				return str.replace(reg, replace);
 			},
-			clicksearch(item){
-				this.searchText=item.searchContent
-				this.companyInput('',this.searchText)
+			clicksearch(item) {
+				this.searchText = item.searchContent
+				this.companyInput('', this.searchText)
 				// this.s
 			},
-			checkcompany(item){
+			checkcompany(item) {
 				uni.setStorageSync('currectcompany', item)
 				this.goDetailPage('pages/mine/cargoowner/addEnerprise')
 			},
 			goDetailPage(src) {
 				uni.$u.route(src);
 			},
-			currectsearch(value){
-				var _this=this
-				var arr=[],filterArr=[]
-				this.$request.baseRequest('post', '/searchRecordsInfo/api/addInfo', {functionType:1,commonId:this.userInfo.id,searchContent:value}).then(res => {
-				})
-				.catch(res => {
-					uni.showToast({
-						title: res.message,
-						icon: 'none',
-						duration: 2000
+			currectsearch(value) {
+				var _this = this
+				var arr = [],
+					filterArr = []
+				this.$request.baseRequest('post', '/searchRecordsInfo/api/addInfo', {
+						functionType: 1,
+						commonId: this.userInfo.id,
+						searchContent: value
+					}).then(res => {})
+					.catch(res => {
+						uni.showToast({
+							title: res.message,
+							icon: 'none',
+							duration: 2000
+						})
+					});
+				this.$request.baseRequest('get', '/companyInfo/selectAllCompany', {
+						searchKeyWord: value
+					}).then(res => {
+						uni.hideLoading()
+						var len = 0
+						console.log(res)
+						if (res.data.records.length > 10) {
+							_this.more = true
+							len = 10
+						} else {
+							len = res.data.records.length
+							_this.more = false
+						}
+						for (var i = 0; i < len; i++) {
+							// console.log(res.data.records[i])
+							res.data.records[i].colorcompanyName = res.data.records[i].companyName
+							res.data.records[i].colorcompanyName = _this.join(res.data.records[i].colorcompanyName,
+								value)
+							arr.push(res.data.records[i])
+						}
+						_this.companyList = arr
+						console.log(arr)
 					})
-				});
-				this.$request.baseRequest('get', '/companyInfo/selectAllCompany', {searchKeyWord:value}).then(res => {
-					uni.hideLoading()
-					var len=0
-					console.log(res)
-					if(res.data.records.length>10){
-						_this.more=true
-						len=10
-					}else{
-						len=res.data.records.length
-						_this.more=false
-					}
-					for (var i = 0; i < len; i++) {
-						// console.log(res.data.records[i])
-						res.data.records[i].colorcompanyName=res.data.records[i].companyName
-						res.data.records[i].colorcompanyName=_this.join(res.data.records[i].colorcompanyName,value)
-						arr.push(res.data.records[i])
-					}
-					_this.companyList=arr
-					console.log(arr)
-				})
-				.catch(res => {
-					uni.hideLoading()
-					uni.showToast({
-						title: res.message,
-						icon: 'none',
-						duration: 2000
-					})
-				});
+					.catch(res => {
+						uni.hideLoading()
+						uni.showToast({
+							title: res.message,
+							icon: 'none',
+							duration: 2000
+						})
+					});
 			},
-			companyInput(e,value){
-				var _this=this
-				this.searching=true
+			companyInput(e, value) {
+				var _this = this
+				this.searching = true
 				uni.showLoading({
 					title: '加载中',
-					mask:true
+					mask: true
 				})
-				if(this.lastTime == 0){ 
-				    this.lastTime = setTimeout(()=>{
-				         _this.currectsearch(value)
-				    },2000)
-				}else{
-				    clearTimeout(this.lastTime)
-				    this.lastTime = setTimeout(()=>{
+				if (this.lastTime == 0) {
+					this.lastTime = setTimeout(() => {
 						_this.currectsearch(value)
-				    },2000)
-				}	
+					}, 2000)
+				} else {
+					clearTimeout(this.lastTime)
+					this.lastTime = setTimeout(() => {
+						_this.currectsearch(value)
+					}, 2000)
+				}
 			}
 		}
 	}
 </script>
 
 <style lang='scss' scoped>
-/deep/.u-navbar__content{
-	/deep/>.u-nav-solt{
-		width:90%;
+	/deep/.u-navbar__content {
+		/deep/>.u-nav-solt {
+			width: 90%;
+		}
+	}
+
+	.legal_person {
+		color: #2772FB;
+		font-size: 20rpx;
+		border: 1px solid #2772FB;
+		padding: 4rpx 6rpx;
+		border-radius: 10rpx;
+		margin: 8rpx 10rpx 8rpx 0;
 	}
-}
-.legal_person{
-	color:#2772FB;
-	font-size:20rpx;
-	border:1px solid #2772FB;
-	padding:4rpx 6rpx;
-	border-radius:10rpx;
-	margin:8rpx 10rpx 8rpx 0;
-}
-.company{
-	padding-bottom:80rpx;
-}
 
-.historysearch{
-	background:#F5F6FA;
-	display: inline-block;
-	padding:10rpx 20rpx;
-	margin:15rpx 20rpx;
-	border-radius:10rpx;
-}
+	.company {
+		padding-bottom: 80rpx;
+	}
+
+	.historysearch {
+		background: #F5F6FA;
+		display: inline-block;
+		padding: 10rpx 20rpx;
+		margin: 15rpx 20rpx;
+		border-radius: 10rpx;
+	}
 </style>

pages/mine/company/addcompany.vue

@@ -1,14 +1,15 @@
 <template>
 	<view class="content">
-		<u-navbar leftText="返回" title="企业认证" :safeAreaInsetTop="true">
+		<!-- <web-view id="mapContainer" :src="srcHandler()"></web-view> -->
+		<!-- 		<u-navbar leftText="返回" title="企业认证" :safeAreaInsetTop="true">
 			<view class="u-nav-slot" slot="left">
 				<u-icon @click='navback' name="arrow-left" size="19"></u-icon>
 			</view>
 			<view class="u-nav-slot" slot="right">
 				<view @click="goDetailPage('/pages/mine/company/addcompanythree')" class='next'>下一步</view>
 			</view>
-		</u-navbar>
-		<view style='margin:50px 0 0 19px;font-size:12px;color:#EF4034;'>注：企业认证仅限该企业法定代表人本人完成。</view>
+		</u-navbar> -->
+		<view style='margin:10px 0 0 19px;font-size:12px;color:#EF4034;'>注：企业认证仅限该企业法定代表人本人完成。</view>
 		<view class='wrap'>
 			<view class="flex border-bottom mt20 align-center">
 				<view class="left">企业名称</view>
@@ -115,6 +116,19 @@
 				</view>
 			</view>
 		</view>
+		<!-- http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 -->
+		<!-- dataDetails.videoAddressUrl -->
+		<view class='content3' @click="goDetailPage('/pages/mine/company/addcompanythree')">
+			<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" @error="videoErrorCallback" controls></video>
+			<video src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/video165026727868476.mp4" :play-strategy='3' @error="videoErrorCallback" controls></video>
+			<view v-if="!dataDetails.videoAddressUrl">
+				<view class="left-text">视频验证（打开摄像头并阅读提示文字）</view>
+				<view class="video-icon">
+					<u-icon size="40" name="camera-fill"></u-icon>
+				</view>
+			</view>
+
+		</view>
 		<view class="content4">
 			<view class="flex row noborder mt20 flex-space-between">
 				<view class="left-text">申请开通平台垫付运费业务</view>
@@ -136,7 +150,8 @@
 		</view>
 
 		<view class='footer'>
-			<view @click="goDetailPage('/pages/mine/company/addcompanythree')" class='newlyIncreased'>下一步</view>
+			<!-- <view @click="goDetailPage('/pages/mine/company/addcompanythree')" class='newlyIncreased'>下一步</view> -->
+			<view @click="submit()" class='newlyIncreased'>提交</view>
 		</view>
 		<u-picker :show="isShowcardValidity" ref="uPicker" :columns="validityPeriod" @confirm="confirmValidityPeriod"
 			@change="changeHandler" @cancel="isShowcardValidity=false">
@@ -157,6 +172,10 @@
 		components: {},
 		data() {
 			return {
+				srcHandler() {
+					// 
+					return `/hybrid/html/play.html`
+				},
 				consentStatus: false,
 				ValidityPeriodType: '',
 				value: true,
@@ -185,21 +204,51 @@
 					businessLicenseAddressUrl: '',
 					propertyAddressUrl: '',
 					advanceFreightService: 1,
-					landOwnership: '自有'
+					landOwnership: '自有',
+					videoAddressUrl: null
 
 				}
 			}
 		},
-		onLoad() {
+		onLoad(options) {
 			this.validityPeriod = this.$helper.makeValidityPeriod(0, '长期')
 			console.log(this)
 			this.dataDetails.commonId = this.userInfo.id
 			this.dataDetails.phone = this.userInfo.phone
+			console.log('```````````````')
+			console.log(options)
+			this.dataDetails.videoAddressUrl = options.videoSrc
 		},
 		computed: {
 			...mapState(['hasLogin', 'userInfo']),
 		},
 		methods: {
+			videoErrorCallback: function(e) {
+				uni.showModal({
+					content: e.target.errMsg,
+					showCancel: false
+				})
+			},
+			submit() {
+				uni.showLoading({
+					title: '加载中',
+					mask: true
+				})
+				var _this = this
+				this.$request.baseRequest('post', '/companyInfo/api/addCompanyInfo', _this.dataDetails).then(res => {
+						uni.hideLoading()
+						uni.$u.toast('提交成功')
+						this.goDetailPage('/pages/mine/company/index')
+					})
+					.catch(res => {
+						uni.hideLoading()
+						uni.showToast({
+							title: res.message,
+							icon: 'none',
+							duration: 2000
+						})
+					});
+			},
 			consent() {
 				this.consentStatus = !this.consentStatus
 			},
@@ -356,7 +405,7 @@
 
 <style lang="scss" scoped>
 	.content {
-		padding: 20rpx 0 200rpx 0;
+		padding: 0 0 200rpx 0;
 	}
 
 	page {
@@ -487,19 +536,22 @@
 		width: 100%;
 		bottom: 0;
 		left: 0;
-		padding: 15px 15px 30px;
+		padding: 40rpx 60rpx;
 		box-sizing: border-box;
 	}
 
 	.newlyIncreased {
 		width: 100%;
+		height: 80rpx;
 		margin: 0 auto;
 		text-align: center;
-		height: 46px;
-		line-height: 46px;
 		color: #fff;
-		background: url(../../../static/mine/huozhurenzheng/Mask@3x.png) no-repeat;
+		background: #2772FB;
 		background-size: 100%;
+		border-radius: 50rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 	.u-checkbox-label--left {
@@ -515,4 +567,17 @@
 			margin: 0 20rpx;
 		}
 	}
+
+	.video-icon {
+		margin-top: 20rpx;
+		background: #F5F6FA;
+		width: 212rpx;
+		height: 211rpx;
+		border-radius: 20rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		color: #6A7282;
+	}
 </style>

pages/mine/helpDescription.vue

@@ -1,27 +1,10 @@
 <!-- 帮助说明 -->
 <template>
 	<view class="content flex-center">
-		<view> 手机注册</view>
-		<u-icon name="arrow-downward" size="28"></u-icon>
-		<view>认证身份</view>
-		<u-icon name="arrow-downward" size="28"></u-icon>
-		<view> 发布货运信息</view>
-		<u-icon name="arrow-downward" size="28"></u-icon>
-		<view> 司机抢单</view>
-		<u-icon name="arrow-downward" size="28"></u-icon>
-		<view> 签订运输合同</view>
-		<u-icon name="arrow-downward" size="28"></u-icon>
-		<view> 司机装车反馈，货主确认</view>
-		<u-icon name="arrow-downward" size="28"></u-icon>
-		<view> 平台支付运费预付款</view>
-		<u-icon name="arrow-downward" size="28"></u-icon>
-		<view> 司机卸车反馈，货主确认</view>
-		<u-icon name="arrow-downward" size="28"></u-icon>
-		<view> 平台支付运费尾款</view>
-		<u-icon name="arrow-downward" size="28"></u-icon>
-		<view> 还款</view>
-		<u-icon name="arrow-downward" size="28"></u-icon>
-		<view> 评价司机</view>
+		<image class="img" src="@/static/images/help/banner@2x.png" mode="widthFix"></image>
+		<image class="img" src="@/static/images/help/tu1@2x.png" mode="widthFix"></image>
+	<image class="img" src="@/static/images/help/zy.png" mode="widthFix"></image>
+
 	</view>
 </template>
 
@@ -36,5 +19,7 @@
 </script>
 
 <style lang="scss">
-
+.img{
+	width: 100%;
+}
 </style>

unpackage/dist/dev/app-plus/hybrid/html/video.html

@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<meta charset="utf-8">
+		<meta name="viewport"
+			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
-		<title></title>
+		<title>视频认证</title>
 		<style>
 			body {
 				margin: 0;
@@ -19,35 +20,36 @@
 			.row {
 				display: flex;
 				justify-content: center;
-				padding-top: 200px;
-			
+				padding-top: 50px;
+
 			}
-			.img-video{
-					position: relative;
-					border-radius: 280px;
-					width: 564px;
-					height: 564px;
-						overflow: hidden;
+
+			.img-video {
+				position: relative;
+				border-radius: 280px;
+				width: 250px;
+				height: 250px;
+				overflow: hidden;
 			}
 
 			.row2 {
 				display: flex;
-				font-size: 36px;
+				font-size: 20px;
 				justify-content: center;
-				margin-top: 100px;
+				margin-top: 20px;
 			}
 
 			.verify-btn {
 				background: #2772FB;
-				font-size: 36px;
-				padding: 20px 0;
+				font-size: 20px;
+				padding: 10px 0;
 				width: 70%;
 				display: flex;
 				justify-content: center;
 				align-items: center;
 				border-radius: 50px;
 				color: white;
-				
+
 			}
 
 			.btn {
@@ -57,9 +59,10 @@
 				width: 100%;
 				display: flex;
 				justify-content: center;
-				padding: 80px 0;
+				padding: 40px 0;
 			}
-			.img{
+
+			.img {
 				position: absolute;
 				top: 0;
 				bottom: 0;
@@ -70,7 +73,8 @@
 				left: 0;
 				margin: auto;
 			}
-			.video-content{
+
+			.video-content {
 				position: absolute;
 				top: 0;
 				bottom: 0;
@@ -79,283 +83,346 @@
 				left: 0;
 				margin: auto;
 			}
-			.video{
+
+			.video {
 				width: calc(100%);
 				background: #F5F6FA;
 			}
-			.video-btn{
+
+			.video-btn {
 				width: 100%;
 				display: flex;
 				justify-content: center;
 			}
+			.progressBar {
+				width: 50%;
+				height: 25px;
+				display: block;
+				top: 0;
+				left: 0;
+				bottom: 0;
+				right: 0;
+				margin: auto;
+				padding: 10px 10px 10px 10px;
+				position: absolute;
+				z-index: 2001;
+				background: rgb(102, 102, 102);
+				color: white;
+				border-radius: 5px;
+			}
+			.text{
+				padding: 20px;
+			}
 		</style>
 	</head>
 	<body>
 		<div id='app'>
 			<div class='content'>
+				<div id="progressBar" class="progressBar">地图数据加载中...</div>
 				<div class='row'>
 					<div class='img-video'>
-						<img src="./img/shipinrenzheng.png" alt="" class='img'>
-						<div class="video-content" v-show="showVideo">
+						<!-- <img src="./img/shipinrenzheng.png" alt="" class='img'> -->
+						<div class="video-content">
 							<!--    人脸检测-->
 							<div class="video-cover"></div>
-							<video :src="url" ref="videoRef" autoplay playsinline x5-video-player-type="h5" class="video"></video>
+							<video :src="url" ref="videoRef" autoplay playsinline x5-video-player-type="h5"
+								class="video"></video>
 						</div>
 					</div>
 				</div>
-				<div class='row2' v-show="!showVideo">
+				<!-- 	<div class='row2' v-show="!showVideo">
 					请打开摄像头 并阅读提示文字
-				</div>
-				<div class='row2'  v-show="showVideo">
+				</div> -->
+				<div class='row2'>
 					请将头像放于圆圈内，并阅读以下文字
 				</div>
-				<div class='row2'  v-show="showVideo">
+				<div class='row2 text'>
 					网络客服过段时间浪费多少级范德萨快逻辑范德萨拉丝机多亏了房价按时付款了金坷垃所肩负的看离开静安寺了发动机as在考虑家双方都会计分录卡死范德萨拉使肌肤抵抗力
 				</div>
 				<div class='btn'>
-					<div class="verify-btn" @click="getCamera" v-show="!showVideo">打开摄像头</div>
-					
-					<div v-show="showVideo" class='video-btn'>
-						<div class="verify-btn"  @click="saveVideo" v-if='!isAlreadyRecord'>开始录制</div>
-						<div class="verify-btn" @click="saveVideo"  v-if='isAlreadyRecord'>结束录制</div>
+					<!-- <div class="verify-btn" @click="getCamera" v-show="!showVideo">打开摄像头</div> -->
+					<div class='video-btn'>
+						<div class="verify-btn" @click="saveVideo" v-if='!isAlreadyRecord'>开始录制</div>
+						<div class="verify-btn" @click="saveVideo" v-if='isAlreadyRecord' data-action="navigateTo">结束录制
+						</div>
 						<!-- <button class="video-close" @click="closeVideo">×</button>
 						<button class="video-save" @click="saveVideo">
 							{{ isAlreadyRecord ? '结束录制(' + count + 's)' : '开始录制' }}</button> -->
 					</div>
 				</div>
-
-				
-				<!-- <video ref="videob" controls="" name="media" v-show="!showVideo" width="100%" height="400"></video> -->
+				<video ref="videob" controls="" name="media" width="100%" height="100"></video>
 			</div>
 
 
 		</div>
 	</body>
-	<script src="vue.min.js"></script>
-	<script src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/jquery.min.js"></script>
-	<script src="base64.js"></script>
-	<script src="crypto.js"></script>
-	<!-- <script src="oss.js"></script> -->
-	<!-- <script src="video.js"></script> -->
-	<script>
-		new Vue({
-			el: '#app',
-			data: {
-				url: '',
-				showVideo: false,
-				mediaRecorder: null,
-				MediaStreamTrack: null,
-				isAlreadyRecord: false,
-				count: 8,
-				countTimer: null,
-				recordedBlobs: [],
-				compId: ''
-			},
-			beforeDestroy() {
-				this.MediaStreamTrack && this.MediaStreamTrack.stop()
-				this.countTimer && clearTimeout(this.countTimer)
-			},
-			computed: {},
+	<script type="text/javascript" src="vue.min.js"></script>
+	<script type="text/javascript" src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/jquery.min.js"></script>
+	<script type="text/javascript" src="base64.js"></script>
+	<script type="text/javascript" src="crypto.js"></script>
+	<script type="text/javascript" src="index.js"></script>
+	<script type="text/javascript">
+		document.addEventListener('UniAppJSBridgeReady', function() {
+			uni.webView.getEnv(function(res) {
+				console.log('当前环境：' + JSON.stringify(res));
+			});
+			// 
+			new Vue({
+		 	el: '#app',
+				data: {
+					url: '',
+					// showVideo: true,
+					mediaRecorder: null,
+					MediaStreamTrack: null,
+					isAlreadyRecord: false,
+					count: 8,
+					countTimer: null,
+					recordedBlobs: [],
+					compId: ''
+				},
+				beforeDestroy() {
+					this.MediaStreamTrack && this.MediaStreamTrack.stop()
+					this.countTimer && clearTimeout(this.countTimer)
+				},
+				computed: {},
 
-			mounted() {
+				mounted() {
+					this.getCamera()
+				},
+				watch: {},
+				methods: {
+					getPolicyBase64() {
+						let date = new Date();
+						date.setHours(date.getHours() + 87600);
+						let srcT = date.toISOString();
+		 			const policyText = {
+							"expiration": srcT, //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了 
+							"conditions": [
+								["content-length-range", 0, 100 * 1024 * 1024] // 设置上传文件的大小限制,5mb
+							]
+						};
 
-			},
-			watch: {},
-			methods: {
-				getPolicyBase64() {
-					let date = new Date();
-					date.setHours(date.getHours() + 87600);
-					let srcT = date.toISOString();
-					const policyText = {
-						"expiration": srcT, //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了 
-						"conditions": [
-							["content-length-range", 0, 5 * 1024 * 1024] // 设置上传文件的大小限制,5mb
-						]
-					};
+						const policyBase64 = Window.base64.encode(JSON.stringify(policyText));
+						console.log(policyBase64);
+						return policyBase64;
+					},
+					getSignature(policyBase64) {
+						const accesskey = 'FpClTp4OVrRRtHEfi3lBOWUoLxKieW';
+						// console.log('video.js')
+						// console.log(Crypto)
+						const bytes = Window.Crypto.HMAC(Window.Crypto.SHA1, policyBase64, accesskey, {
+							asBytes: true
+						})
+						const signature = Window.Crypto.util.bytesToBase64(bytes);
+						// console.log(signature);
+		 			return signature;
+					},
+					async uploadFile(file) {
+						var formdata = new FormData()
+						const policyBase64 = this.getPolicyBase64();
+						const signature = this.getSignature(policyBase64); //获取签名
+						const urlStr = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/"
+						const fileName = "appData/video" + new Date().getTime() + Math.floor(Math.random() *
+							150) + '.mp4'
+						formdata.append("key", fileName)
+						formdata.append("policy", policyBase64)
+						formdata.append("OSSAccessKeyId", 'LTAI4G9c14PgKvM23WZ9zrpc')
+						formdata.append("signature", signature)
+						formdata.append("success_action_status", '200')
+						formdata.append("file", file)
+						console.log('file.name')
+						$.ajax({
+							type: "POST",
+							data: formdata,
+							contentType: false,
+							processData: false,
+							url: urlStr,
+							success: function(result) {
+		 					console.log(urlStr + fileName)
+								uni.webView.navigateTo({
+									url: '/pages/mine/company/addcompany?videoSrc=' +
+										urlStr + fileName
+								})
 
-					const policyBase64 = Window.base64.encode(JSON.stringify(policyText));
-					console.log(policyBase64);
-					return policyBase64;
-				},
-				getSignature(policyBase64) {
-					const accesskey = 'FpClTp4OVrRRtHEfi3lBOWUoLxKieW';
-					// console.log('video.js')
-					// console.log(Crypto)
-					const bytes = Window.Crypto.HMAC(Window.Crypto.SHA1, policyBase64, accesskey, {
-						asBytes: true
-					})
-					const signature = Window.Crypto.util.bytesToBase64(bytes);
-					// console.log(signature);
-					return signature;
-				},
-				uploadFile(policyBase64) {
-					var formdata = new FormData()
-					// const policyBase64 = this.getPolicyBase64();
-					console.log("policyBase64-----------------------")
-					console.log(policyBase64)
-					const signature = this.getSignature(policyBase64); //获取签名
-					console.log("signatur--------------------------------------e")
-					console.log(signature)
-					formdata.append("key", "https://taohaoliang.oss-cn-beijing.aliyuncs.com")
-					formdata.append("policy", policyBase64)
-					formdata.append("OSSAccessKeyId", 'LTAI4G9c14PgKvM23WZ9zrpc')
-					formdata.append("signature", signature)
-					formdata.append("success_action_status", '200')
-					$.ajax({
-						type: "POST",
-						contentType: "application/json;charset=UTF-8",
-						url: 'https://taohaoliang.oss-cn-beijing.aliyuncs.com',
-						success: function(result) {
-							console.log("result", result);
-						},
-						//请求失败，包含具体的错误信息
-						error: function(e) {
-							console.log(e);
-							console.log(e.status);
-							console.log(e.responseText);
+							},
+
+							//请求失败，包含具体的错误信息
+							error: function(e) {
+								console.log(e);
+								console.log(e.status);
+								console.log(e.responseText);
+							}
+						});
+					},
+					// 调用摄像头 开始录制
+					getCamera() {
+						// 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。
+						let constraints = {
+		 				audio: true,
+							video: {
+								facingMode: 'user' // 优先调前置摄像头
+							}
 						}
-					});
-				},
-				// 调用摄像头 开始录制
-				getCamera() {
-					// 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。
-					let constraints = {
-						audio: true,
-						video: {
-							facingMode: 'user' // 优先调前置摄像头
+						console.log('--------------')
+						console.log(navigator)
+						// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
+						if (navigator.mediaDevices === undefined) {
+							navigator.mediaDevices = {}
 						}
-					}
-					console.log('--------------')
-					console.log(navigator)
-					// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
-					if (navigator.mediaDevices === undefined) {
-						navigator.mediaDevices = {}
-					}
-					// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
-					// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
-					if (navigator.mediaDevices.getUserMedia === undefined) {
-						navigator.mediaDevices.getUserMedia = function(constraints) {
-							// 首先，如果有getUserMedia的话，就获得它
-							//   var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
-							var getUserMedia = navigator.getUserMedia ||
-								navigator.webkitGetUserMedia ||
-								navigator.mozGetUserMedia
-							// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
-							if (!getUserMedia) {
-								this.$messageBox.alert('该浏览器不支持getUserMedia，请使用其他浏览器')
-								return Promise.reject(new Error(
-									'getUserMedia is not implemented in this browser'))
+						// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
+						// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
+						if (navigator.mediaDevices.getUserMedia === undefined) {
+							navigator.mediaDevices.getUserMedia = function(constraints) {
+								// 首先，如果有getUserMedia的话，就获得它
+								//   var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
+								var getUserMedia = navigator.getUserMedia ||
+		 						navigator.webkitGetUserMedia ||
+									navigator.mozGetUserMedia
+		 					// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
+								if (!getUserMedia) {
+									this.$messageBox.alert('该浏览器不支持getUserMedia，请使用其他浏览器')
+									return Promise.reject(new Error(
+										'getUserMedia is not implemented in this browser'))
+								}
+								// 否则，为老的navigator.getUserMedia方法包裹一个Promise
+								return new Promise(function(resolve, reject) {
+									getUserMedia.call(navigator, constraints, resolve, reject)
+								})
 							}
-							// 否则，为老的navigator.getUserMedia方法包裹一个Promise
-							return new Promise(function(resolve, reject) {
-								getUserMedia.call(navigator, constraints, resolve, reject)
-							})
 						}
-					}
-					navigator.mediaDevices.getUserMedia(constraints)
-						.then((stream) => {
-							this.MediaStreamTrack = typeof stream.stop === 'function' ? stream : stream
-								.getTracks()[0]
-							console.log(stream)
-							console.log(this.MediaStreamTrack)
-							// 显示录制框
-							this.showVideo = true
-							this.isAlreadyRecord = false
-							let winURL = window.URL || window.webkitURL
-							if ('srcObject' in this.$refs.videoRef) {
-								this.$refs.videoRef.srcObject = stream
-							} else {
-								this.$refs.videoRef.src = winURL.createObjectURL(stream)
-							}
-							console.log(this.$refs.videoRef)
-							this.$refs.videoRef.onloadedmetadata = e => {
-								// 播放视频
-								this.$refs.videoRef.play()
-							}
-							let options = {
-								videoBitsPerSecond: 2500000
-							}
-							this.mediaRecorder = new MediaRecorder(stream, options)
-						})
-						.catch((err) => {
-							console.log(err)
-							this.$messageBox.alert('摄像头开启失败，请检查摄像头是否授权或是否可用！')
-						})
-				},
-				// 关闭活体检测
-				closeVideo() {
-					this.recordedBlobs = ''
-					this.isAlreadyRecord = false
-					this.MediaStreamTrack && this.MediaStreamTrack.stop()
-					this.countTimer && clearTimeout(this.countTimer)
-					this.$router.go(0)
-				},
-				// 录制倒计时
-				countDown() {
-					let that = this
-					let sendTime = Math.round(+new Date() / 1000)
-					return function walk() {
-						that.countTimer = setTimeout(function() {
-							that.countTimer && clearTimeout(that.countTimer)
-							let diff = sendTime + 8 - Math.round(+new Date() / 1000)
-							if (diff > 0) {
-								that.count = diff
-								walk()
-							} else {
-								console.log('倒计时结束')
-								this.showVideo = false
-								console.log(this.url)
+						navigator.mediaDevices.getUserMedia(constraints)
+							.then((stream) => {
+								this.MediaStreamTrack = typeof stream.stop === 'function' ? stream :
+									stream
+									.getTracks()[0]
+								console.log(stream)
 								console.log(this.MediaStreamTrack)
-							}
-						}, 1000)
-					}
-				},
-				// 保存录制视频
-				saveVideo() {
-					if (this.isAlreadyRecord) {
+								// 显示录制框
+								this.showVideo = true
+								this.isAlreadyRecord = false
+								let winURL = window.URL || window.webkitURL
+								if ('srcObject' in this.$refs.videoRef) {
+									this.$refs.videoRef.srcObject = stream
+								} else {
+									this.$refs.videoRef.src = winURL.createObjectURL(stream)
+								}
+								console.log(this.$refs.videoRef)
+								this.$refs.videoRef.onloadedmetadata = e => {
+									// 播放视频
+									this.$refs.videoRef.play()
+								}
+								let options = {
+									videoBitsPerSecond: 2500000
+		 					}
+								this.mediaRecorder = new MediaRecorder(stream, options)
+							})
+							.catch((err) => {
+								console.log(err)
+								this.$messageBox.alert('摄像头开启失败，请检查摄像头是否授权或是否可用！')
+							})
+							$("#progressBar").hide();
+					},
+					// 关闭活体检测
+					closeVideo() {
+						this.recordedBlobs = ''
+						this.isAlreadyRecord = false
+						this.MediaStreamTrack && this.MediaStreamTrack.stop()
 						this.countTimer && clearTimeout(this.countTimer)
-						this.showVideo = false
-						//当录制的数据可用时
-						this.mediaRecorder.ondataavailable = (e) => {
-							if (e.data && e.data.size > 0) {
-								this.recordedBlobs.push(e.data)
-							}
+						this.$router.go(0)
+					},
+					// 录制倒计时
+					countDown() {
+						let that = this
+						let sendTime = Math.round(+new Date() / 1000)
+		 			return function walk() {
+							that.countTimer = setTimeout(function() {
+								that.countTimer && clearTimeout(that.countTimer)
+								let diff = sendTime + 8 - Math.round(+new Date() / 1000)
+								if (diff > 0) {
+									that.count = diff
+									walk()
+								} else {
+									console.log('倒计时结束')
+									// this.showVideo = false
+									console.log(this.url)
+									console.log(this.MediaStreamTrack)
+								}
+							}, 1000)
 						}
-						this.mediaRecorder.stop()
-						setTimeout(() => {
-							var blob = new Blob(this.recordedBlobs, {
-								type: 'video/mp4'
-							})
+					},
+					dataURLtoBlob(dataurl) {
+
+						var arr = dataurl.split(","),
+
+							mime = arr[0].match(/:(.*?);/)[1],
+
+							bstr = atob(arr[1]),
+
+							n = bstr.length,
 
-							// console.log(blob)
-							this.isAlreadyRecord = false
-							this.MediaStreamTrack && this.MediaStreamTrack.stop()
-							var reader = new FileReader();
-							reader.readAsDataURL(blob, 'utf-8')
-							reader.onload = () => {
+							u8arr = new Uint8Array(n);
 
-								console.log('11111111111111111')
-								console.log(reader.result); // base64格式
-								// this.$refs.videob.src = reader.result
-								this.uploadFile(reader.result)
+						while (n--) {
 
-								console.log(reader)
+							u8arr[n] = bstr.charCodeAt(n);
 
+						}
+
+						return this.blobToFile(new Blob([u8arr], {
+							type: mime
+						}), {
+							type: mime
+						});
+
+					},
+					blobToFile(theBlob, type) {
+						theBlob.lastModifiedDate = new Date();
+						return new File([theBlob], `${new Date().getTime()}.mp4`, type);
+
+					},
+					// 保存录制视频
+					saveVideo() {
+						let that = this
+						if (this.isAlreadyRecord) {
+							this.countTimer && clearTimeout(this.countTimer)
+							// this.showVideo = false
+							//当录制的数据可用时
+							this.mediaRecorder.ondataavailable = (e) => {
+								if (e.data && e.data.size > 0) {
+									this.recordedBlobs.push(e.data)
+								}
 							}
-						}, 1000)
-					} else {
-						this.count = 8
-						this.isAlreadyRecord = true
-						this.mediaRecorder.start(8000)
-						this.countDown()()
+							this.mediaRecorder.stop()
+							setTimeout(() => {
+								console.log("this.recordedBlobs-------------------------")
+		 					var blob = new Blob(this.recordedBlobs, {
+									type: 'video/mp4'
+		 					})
+								this.isAlreadyRecord = false
+								this.MediaStreamTrack && this.MediaStreamTrack.stop()
+								var reader = new FileReader();
+								reader.readAsDataURL(blob)
+								reader.onload = (e) => {
+									this.$refs.videob.src = reader.result
+									let a = this.dataURLtoBlob(reader.result)
+									console.log(a)
+									this.uploadFile(a)
+								}
+							}, 100)
+						} else {
+							this.count = 8
+							this.isAlreadyRecord = true
+							this.mediaRecorder.start(8000)
+							this.countDown()()
+						}
+					},
+					changeVideo(e) {
+		 			let file = this.$refs.videoFile.files
+						console.log(file)
 					}
-				},
-				changeVideo(e) {
-					let file = this.$refs.videoFile.files
-					console.log(file)
 				}
-			}
-		})
+			})
+		});
 	</script>
 
 </html>