修改 华为商城反馈相机 问题

This commit is contained in:
GGJ
2024-09-06 14:35:06 +08:00
parent a631f060d2
commit a8618d0b5d
10 changed files with 2110 additions and 1617 deletions

View File

@@ -0,0 +1,328 @@
<template>
<view v-if="showPopup" class="uni-popup" :style="{top:isNativeHead?'':StatusBar}">
<view :class="[type, ani, animation ? 'ani' : '']" class="uni-custom uni-popup__wrapper" @click="close(true)">
<view class="uni-popup__wrapper-box">
<view class="title">{{authList[permissionID].title}}</view>
<view class="content">{{authList[permissionID].content}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'YkAuthpup',
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
type: {
type: String,
default: 'top'
},
show: {
type: Boolean,
default: true
},
//是否是原生头部
isNativeHead:{
type: Boolean,
default: true
},
permissionID: {
type: [String, Number],
default: ''
}
},
data() {
return {
ani: '',
showPopup: false,
StatusBar:'',
refuseNum:'',//拒绝次数,
authList: {
'WRITE_EXTERNAL_STORAGE': {
title: "灿能物联存储空间/照片权限申请说明",
content: "便于您使用该功能上传您的照片/视频及用于更换头像、扫描二维码等场景中使用。"
},
'ACCESS_FINE_LOCATION': {
title: "XXX对地理位置权限申请说明",
content: "便于应用程序可以提供基于位置的服务、定位导航、附近搜索等功能。"
},
'CAMERA':{
title: "灿能物联对相机/摄像头权限申请说明",
content: "便于您使用该功能拍照上传您的照片/视频及用于更换头像、扫描二维码等场景中使用。"
},
'RECORD_AUDIO':{
title: "XXX对麦克风权限申请说明",
content: "便于您使用该功能进行录音、语音通话、发布语音、与客服语音沟通等场景中使用"
},
'CALL_PHONE': {
title: "XXX对拨打/管理电话权限申请说明",
content: "便于您使用该功能联系买家、骑手或者客服、业务经理与联系等场景下使用"
}
}
}
},
created() {
// #ifdef APP-PLUS
this.getSystemInfo();
// #endif
},
methods: {
//获取状态栏高度
getSystemInfo() {
let _this = this;
uni.getSystemInfo({
success: function(e) {
_this.StatusBar = e.statusBarHeight + 'px'; //用于自定义头部时,给手机状态栏留出位置,可通过isNativeHead这个参数控制
}
})
},
open() {
this.requestPermissions(this.permissionID);
},
close(type) {
this.ani = '';
this.$nextTick(() => {
setTimeout(() => {
this.showPopup = false;
}, 300)
})
},
//权限检测
requestPermissions(permissionID) {
let _this = this;
// #ifdef APP-PLUS
//判断安卓与ios设备
if (plus.os.name == 'Android') {
let _permissionID = 'android.permission.' + permissionID;
plus.android.checkPermission(_permissionID,
granted => {
if (granted.checkResult == -1) {
//还未授权当前查询的权限,打开权限申请目的自定义弹框
_this.showPopup = true;
_this.$nextTick(() => {
setTimeout(() => {
_this.ani = 'uni-' + _this.type
},30)
})
}
},
error => {
console.log(error.message);
}
);
plus.android.requestPermissions([_permissionID],
(e) => {
//关闭权限申请目的自定义弹框
_this.ani = '';
_this.$nextTick(() => {
setTimeout(() => {
_this.showPopup = false
}, 0)
})
console.log(e,'kkkkk')
if (e.granted.length > 0) {
//当前查询权限已授权,此时可以通知页面执行接下来的操作
_this.$emit('changeAuth');
}
if (e.deniedAlways.length > 0) {
//当前查询权限已被永久禁用,此时需要引导用户跳转手机系统设置去开启
uni.showModal({
title: '温馨提示',
content: '还没有该权限,立即去设置开启?',
cancelText: "取消",
confirmText: "去设置",
showCancel: true,
confirmColor: '#000',
cancelColor: '#666',
success: (res) => {
if (res.confirm) {
_this.goSetting();
}
}
})
}
})
} else {
//IOS不需要添加自定义弹框来描述权限目的因为在配置文件的隐私信息访问的许可描述里可添加
//正常可以直接调用uni的API调起权限询问弹框使用各种权限下面的判断使用场景主要是在IOS禁用某权限后这个可以判断有无权限进而引导用户跳转设置开启仅列出了位置、相册、通讯录、相机、录音等权限其他IOS权限可具体参考 https://ext.dcloud.net.cn/plugin?id=15787
let result = 0;
if (permissionID == 'ACCESS_FINE_LOCATION') {
//IOS检测位置权限
let cLLocationManager = plus.ios.importClass("CLLocationManager"),
authStatus = cLLocationManager.authorizationStatus(),
enable = cLLocationManager.locationServicesEnabled();
if (enable && authStatus != 2) {
result = 1;
} else {
result = 0;
}
plus.ios.deleteObject(cLLocationManager);
} else if (permissionID == 'WRITE_EXTERNAL_STORAGE') {
//IOS检测相册权限
let PHPhotoLibrary = plus.ios.importClass("PHPhotoLibrary"),
authStatus = PHPhotoLibrary.authorizationStatus();
if (authStatus === 3) {
result = 1;
} else {
result = 0;
}
plus.ios.deleteObject(PHPhotoLibrary);
} else if (permissionID == 'CAMERA') {
//IOS检测相机/摄像头权限
let avCaptureDevice = plus.ios.importClass("AVCaptureDevice"),
authStatus = avCaptureDevice.authorizationStatusForMediaType("vide");
if (authStatus === 3) {
result = 1;
} else {
result = 0;
}
plus.ios.deleteObject(avCaptureDevice);
} else if (permissionID == 'CALL_PHONE') {
//IOS检测通讯录权限
let contactStore = plus.ios.importClass("CNContactStore"),
authStatus = contactStore.authorizationStatusForEntityType(0);
if (authStatus === 3) {
result = 1;
} else {
result = 0;
}
plus.ios.deleteObject(contactStore);
}else if(permissionID == 'RECORD_AUDIO'){
//IOS检测麦克风权限
let aVAudioSession = plus.ios.importClass("AVAudioSession"),
aVAudio = aVAudioSession.sharedInstance(),
authStatus = aVAudio.recordPermission();
if ([1684369017, 1970168948].includes(authStatus)) {
result = 0;
} else {
result = 1;
}
plus.ios.deleteObject(aVAudioSession);
}
if (result) {
//当前查询权限已授权,此时可以通知页面执行接下来的操作
that.$emit('changeAuth')
} else {
//当前查询的权限已禁用,引导用户跳转手机系统设置去开启
uni.showModal({
title: '温馨提示',
content: '还没有该权限,立即去设置开启?',
cancelText: "取消",
confirmText: "去设置",
showCancel: true,
confirmColor: '#000',
cancelColor: '#666',
success: (res) => {
if (res.confirm) {
_this.goSetting();
}
}
})
}
}
// #endif
},
//跳转手机系统设置
goSetting() {
if (plus.os.name == "iOS") {
var UIApplication = plus.ios.import("UIApplication");
var application2 = UIApplication.sharedApplication();
var NSURL2 = plus.ios.import("NSURL");
var setting2 = NSURL2.URLWithString("app-settings:");
application2.openURL(setting2);
plus.ios.deleteObject(setting2);
plus.ios.deleteObject(NSURL2);
plus.ios.deleteObject(application2);
} else {
var Intent = plus.android.importClass("android.content.Intent");
var Settings = plus.android.importClass("android.provider.Settings");
var Uri = plus.android.importClass("android.net.Uri");
var mainActivity = plus.android.runtimeMainActivity();
var intent = new Intent();
intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
intent.setData(uri);
mainActivity.startActivity(intent);
}
}
}
}
</script>
<style lang="scss">
.uni-popup {
position: fixed;
top: 20px;
bottom: 0;
left: 0;
right: 0;
z-index: 99999;
overflow: hidden;
&__wrapper {
position: absolute;
z-index: 999;
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
&.ani {
/* #ifndef APP-NVUE */
transition: all 0.3s;
/* #endif */
}
&.top {
top: 0;
width:705rpx;
/* #ifdef APP-NVUE */
left:22.5rpx;
/* #endif */
/* #ifndef APP-NVUE */
left:0;
transform: translateY(-705rpx);
/* #endif */
}
&-box {
position: relative;
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
}
&.uni-custom {
& .uni-popup__wrapper-box {
width: 705rpx;
/* #ifndef APP-NVUE */
margin: 0 22.5rpx;
/* #endif */
padding: 30upx;
background: #fff;
border: solid 2rpx #ddd;
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
border-radius: 16rpx;
.title{
font-size: 32rpx;
font-weight: bold;
}
.content{
margin-top: 16rpx;
line-height: 1.6;
}
}
&.top{
& .uni-popup__wrapper-box {
width: 705rpx;
}
}
}
&.uni-top{
transform: translateY(0);
}
}
}
</style>

View File

@@ -2,8 +2,8 @@
"name" : "灿能物联", "name" : "灿能物联",
"appid" : "__UNI__88BC25B", "appid" : "__UNI__88BC25B",
"description" : "", "description" : "",
"versionName" : "1.5.9", "versionName" : "1.6.0",
"versionCode" : 159, "versionCode" : 160,
"transformPx" : false, "transformPx" : false,
/* 5+App */ /* 5+App */
"app-plus" : { "app-plus" : {
@@ -143,8 +143,8 @@
"proxy" : { "proxy" : {
"/api" : { "/api" : {
"https" : true, "https" : true,
"target" : "https://pqmcn.com:8092/api", // "target" : "https://pqmcn.com:8092/api",
// "target" : "http://192.168.1.126:10215", "target" : "http://192.168.1.126:10215",
"changOrigin" : true, "changOrigin" : true,
"pathRewrite" : { "pathRewrite" : {
"/api" : "" "/api" : ""

View File

@@ -1,16 +1,20 @@
{ {
"dependencies": { "id": "yk-authpup",
"crypto-js": "^4.1.1", "name": "解决软件在运行时,未见向用户告知权限申请的目的,华为等上架被拒问题",
"html2canvas": "^1.4.1", "displayName": "解决软件在运行时,未见向用户告知权限申请的目的,华为等上架被拒问题",
"image-tools": "^1.4.0", "version": "1.0.5",
"jsrsasign": "^10.8.6", "description": "解决软件在运行时,未见向用户告知权限申请的目的,华为等上架被拒问题",
"mqtt": "3.0.0", "keywords": [
"pinyin-pro": "^3.13.2", "uniapp",
"qs": "^6.11.2", "华为上架",
"vconsole": "^3.15.1" "权限",
}, "权限申请",
"devDependencies": { "权限判断"
"@types/html5plus": "^1.0.2", ],
"@types/uni-app": "^1.4.4" "dcloudext": {
"category": [
"前端组件",
"通用组件"
]
} }
} }

View File

@@ -18,7 +18,7 @@
</uni-forms> </uni-forms>
</view> </view>
<view class="btn-wrap"> <view class="btn-wrap">
<button class="btn-wrap-item" :loading="isLoading" :disabled='isLoading' @click="register"> <button class="btn-wrap-item" :loading="isLoading" :disabled="isLoading" @click="register">
{{ isLoading ? '注册中...' : '发起注册' }} {{ isLoading ? '注册中...' : '发起注册' }}
</button> </button>
</view> </view>
@@ -165,13 +165,17 @@
</scroll-view> </scroll-view>
</uni-drawer> </uni-drawer>
</template> </template>
<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="CAMERA"></yk-authpup>
</view> </view>
</template> </template>
<script> <script>
import { registerDevice, getModel, addDevice, queryByTopoId } from '@/common/api/device.js' import { registerDevice, getModel, addDevice, queryByTopoId } from '@/common/api/device.js'
import { getProjectList, queryTopologyDiagramPage } from '@/common/api/project.js' import { getProjectList, queryTopologyDiagramPage } from '@/common/api/project.js'
import ykAuthpup from '@/components/yk-authpup/yk-authpup'
export default { export default {
components: {
ykAuthpup,
},
data() { data() {
return { return {
loading: false, loading: false,
@@ -298,11 +302,20 @@ export default {
aliasChange(e) { aliasChange(e) {
this.$forceUpdate() this.$forceUpdate()
}, },
positionChange(e) { positionChange(e) {
console.log(e) console.log(e)
}, },
projectChange(e) {}, projectChange(e) {},
scanCode() { scanCode() {
if (plus.os.name == 'Android') {
this.$refs['authpup'].open()
} else {
this.changeAuth()
}
},
changeAuth() {
uni.scanCode({ uni.scanCode({
success: (res) => { success: (res) => {
console.log('条码类型:' + res.scanType) console.log('条码类型:' + res.scanType)
@@ -321,8 +334,10 @@ export default {
return this.$util.toast('请输入设备识别码') return this.$util.toast('请输入设备识别码')
} }
this.isLoading = true this.isLoading = true
registerDevice(this.formData.nDid, Number(this.options.type)).then((res) => { registerDevice(this.formData.nDid, Number(this.options.type))
getModel(this.formData.nDid).then((res) => { .then((res) => {
getModel(this.formData.nDid)
.then((res) => {
console.log(res) console.log(res)
this.pointList = res.data.map((item) => { this.pointList = res.data.map((item) => {
return { return {
@@ -334,14 +349,12 @@ export default {
this.type = 2 this.type = 2
this.isLoading = false this.isLoading = false
})
}).catch(()=>{ .catch(() => {
this.isLoading = false this.isLoading = false
}) })
})
}).catch(()=>{ .catch(() => {
this.isLoading = false this.isLoading = false
}) })
}, },

View File

@@ -14,7 +14,9 @@
<uni-easyinput type="textarea" v-model="formData.description" placeholder="请输入详细描述"/> <uni-easyinput type="textarea" v-model="formData.description" placeholder="请输入详细描述"/>
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="图片"> <uni-forms-item label="图片">
<uni-file-picker :auto-upload="false" @select="fileChange" @delete="delImg"/> <uni-file-picker :auto-upload="false" @select="fileChange" @delete="delImg">
</uni-file-picker>
</uni-forms-item> </uni-forms-item>
</uni-forms> </uni-forms>
</view> </view>
@@ -54,6 +56,9 @@ export default {
console.log(e); console.log(e);
this.formData.files = this.formData.files.filter(item => item.url !== e.tempFilePath) this.formData.files = this.formData.files.filter(item => item.url !== e.tempFilePath)
}, },
pickerClick(){
console.log(123);
},
fileChange(e) { fileChange(e) {
console.log(e); console.log(e);
e.tempFilePaths.forEach(item => { e.tempFilePaths.forEach(item => {

View File

@@ -120,14 +120,19 @@
<view style="color: #6c6c6c; margin-top: 3rpx; "> 用于相机扫描二维码!</view> <view style="color: #6c6c6c; margin-top: 3rpx; "> 用于相机扫描二维码!</view>
</uni-popup-message> </uni-popup-message>
</uni-popup> </uni-popup>
<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="CAMERA"></yk-authpup>
</view> </view>
</template> </template>
<script> <script>
import { roleUpdate, autoLogin } from '@/common/api/user' import { roleUpdate, autoLogin } from '@/common/api/user'
import { transferDevice, shareDevice } from '@/common/api/device' import { transferDevice, shareDevice } from '@/common/api/device'
import ykAuthpup from "@/components/yk-authpup/yk-authpup";
export default { export default {
components: {
ykAuthpup
},
data() { data() {
return { return {
loading: true, loading: true,
@@ -183,17 +188,24 @@ export default {
}) })
}) })
}, },
changeAuth(){
//这里是权限通过后执行自己的代码逻辑
console.log('权限已授权,可执行自己的代码逻辑了');
// this.handleScon()
this.handleScon()
},
jump(type) { jump(type) {
switch (type) { switch (type) {
case 'scan': case 'scan':
if ( if (
plus.os.name == 'Android' && plus.os.name == 'Android'
plus.navigator.checkPermission('android.permission.CAMERA') === 'undetermined' // && plus.navigator.checkPermission('android.permission.CAMERA') === 'undetermined'
) { ) {
//未授权 //未授权
// this.$refs.alertDialog.open('bottom')
this.$refs['authpup'].open()
// this.$refs.message.open()
this.$refs.message.open()
this.$refs.alertDialog.open('bottom')
} else { } else {
console.log(2) console.log(2)
this.handleScon() this.handleScon()

View File

@@ -4,7 +4,7 @@
<view class="about"> <view class="about">
<image src="/static/logo.png" class="logo"></image> <image src="/static/logo.png" class="logo"></image>
<view class="name">灿能物联</view> <view class="name">灿能物联</view>
<view class="version">Version 1.1.1</view> <view class="version">Version 1.6.0</view>
</view> </view>
</view> </view>
</Cn-page> </Cn-page>

View File

@@ -27,37 +27,62 @@
<uni-popup ref="message" type="message"> <uni-popup ref="message" type="message">
<uni-popup-message type="info" :duration="0" style="width: 90%; margin: 5%"> <uni-popup-message type="info" :duration="0" style="width: 90%; margin: 5%">
<view style="color: #909399; font-style: 16px">相机权限使用说明:</view> <view style="color: #909399; font-style: 16px">相机权限使用说明:</view>
<view style="color: #6c6c6c; margin-top: 3rpx; "> 用于拍照上传头像!</view> <view style="color: #6c6c6c; margin-top: 3rpx"> 用于拍照上传头像!</view>
</uni-popup-message> </uni-popup-message>
</uni-popup> </uni-popup>
<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="CAMERA"></yk-authpup>
<yk-authpup
ref="authpup1"
type="top"
@changeAuth="changeAuth"
permissionID="WRITE_EXTERNAL_STORAGE"
></yk-authpup>
</view> </view>
</template> </template>
<script> <script>
import { uploadImage, getImageUrl } from '@/common/api/basic' import { uploadImage, getImageUrl } from '@/common/api/basic'
import { apiUpdateUser } from '@/common/api/user' import { apiUpdateUser } from '@/common/api/user'
import ykAuthpup from '@/components/yk-authpup/yk-authpup'
export default { export default {
components: {
ykAuthpup,
},
data() { data() {
return { return {
loading: false, loading: false,
userInfo: {}, userInfo: {},
type: '',
} }
}, },
methods: { methods: {
take(type) { take(type) {
this.type = type
if (type == 'camera') { if (type == 'camera') {
if ( if (plus.os.name == 'Android') {
plus.os.name == 'Android' && this.$refs['authpup'].open()
plus.navigator.checkPermission('android.permission.CAMERA') === 'undetermined'
) {
//未授权 //未授权
this.$refs.message.open() // this.$refs.message.open()
this.$refs.alertDialog.open('bottom') // this.$refs.alertDialog.open('bottom')
} else { } else {
this.handleScon(type) this.handleScon(type)
} }
} else {
if (plus.os.name == 'Android') {
this.$refs['authpup1'].open()
//未授权
// this.$refs.message.open()
// this.$refs.alertDialog.open('bottom')
} else { } else {
this.handleScon(type) this.handleScon(type)
} }
// this.handleScon(type)、
}
},
changeAuth() {
//这里是权限通过后执行自己的代码逻辑
console.log('权限已授权,可执行自己的代码逻辑了')
// this.handleScon()
this.handleScon(this.type)
}, },
handleScon(type) { handleScon(type) {
this.$refs.message.close() this.$refs.message.close()
@@ -66,7 +91,6 @@ export default {
sizeType: ['original', 'compressed'], sizeType: ['original', 'compressed'],
sourceType: [type], sourceType: [type],
success: (res) => { success: (res) => {
uploadImage(res.tempFilePaths[0]).then((res) => { uploadImage(res.tempFilePaths[0]).then((res) => {
console.log(res) console.log(res)
let result = JSON.parse(res[1].data) let result = JSON.parse(res[1].data)
@@ -83,7 +107,9 @@ export default {
}, },
}) })
}, },
dialogClose() {this.$refs.message.close()}, dialogClose() {
this.$refs.message.close()
},
}, },
onLoad(options) { onLoad(options) {

View File

@@ -4,9 +4,18 @@
<text class="file-title">{{ title }}</text> <text class="file-title">{{ title }}</text>
<!-- <text class="file-count">{{ filesList.length }}/{{ limitLength }}</text> --> <!-- <text class="file-count">{{ filesList.length }}/{{ limitLength }}</text> -->
</view> </view>
<upload-image v-if="fileMediatype === 'image' && showType === 'grid'" :readonly="readonly" <upload-image
:image-styles="imageStyles" :files-list="filesList" :limit="limitLength" :disablePreview="disablePreview" v-if="fileMediatype === 'image' && showType === 'grid'"
:delIcon="delIcon" @uploadFiles="uploadFiles" @choose="choose" @delFile="delFile"> :readonly="readonly"
:image-styles="imageStyles"
:files-list="filesList"
:limit="limitLength"
:disablePreview="disablePreview"
:delIcon="delIcon"
@uploadFiles="uploadFiles"
@choose="choose"
@delFile="delFile"
>
<slot> <slot>
<view class="is-add"> <view class="is-add">
<view class="icon-add"></view> <view class="icon-add"></view>
@@ -14,26 +23,26 @@
</view> </view>
</slot> </slot>
</upload-image> </upload-image>
<upload-file v-if="fileMediatype !== 'image' || showType !== 'grid'" :readonly="readonly" <upload-file
:list-styles="listStyles" :files-list="filesList" :showType="showType" :delIcon="delIcon" v-if="fileMediatype !== 'image' || showType !== 'grid'"
@uploadFiles="uploadFiles" @choose="choose" @delFile="delFile"> :readonly="readonly"
:list-styles="listStyles"
:files-list="filesList"
:showType="showType"
:delIcon="delIcon"
@uploadFiles="uploadFiles"
@choose="choose"
@delFile="delFile"
>
<slot><button type="primary" size="mini">选择文件</button></slot> <slot><button type="primary" size="mini">选择文件</button></slot>
</upload-file> </upload-file>
</view> </view>
</template> </template>
<script> <script>
import { import { chooseAndUploadFile, uploadCloudFiles } from './choose-and-upload-file.js'
chooseAndUploadFile, import { get_file_ext, get_extname, get_files_and_is_max, get_file_info, get_file_data } from './utils.js'
uploadCloudFiles
} from './choose-and-upload-file.js'
import {
get_file_ext,
get_extname,
get_files_and_is_max,
get_file_info,
get_file_data
} from './utils.js'
import uploadImage from './upload-image.vue' import uploadImage from './upload-image.vue'
import uploadFile from './upload-file.vue' import uploadFile from './upload-file.vue'
let fileInput = null let fileInput = null
@@ -82,10 +91,10 @@
name: 'uniFilePicker', name: 'uniFilePicker',
components: { components: {
uploadImage, uploadImage,
uploadFile uploadFile,
}, },
options: { options: {
virtualHost: true virtualHost: true,
}, },
emits: ['select', 'success', 'fail', 'progress', 'delete', 'update:modelValue', 'input'], emits: ['select', 'success', 'fail', 'progress', 'delete', 'update:modelValue', 'input'],
props: { props: {
@@ -94,7 +103,7 @@
type: [Array, Object], type: [Array, Object],
default() { default() {
return [] return []
} },
}, },
// #endif // #endif
@@ -103,55 +112,55 @@
type: [Array, Object], type: [Array, Object],
default() { default() {
return [] return []
} },
}, },
// #endif // #endif
beforeRemove: { beforeRemove: {
type: Function, type: Function,
default: () => {} default: () => {},
}, },
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
disablePreview: { disablePreview: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
delIcon: { delIcon: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
// 自动上传 // 自动上传
autoUpload: { autoUpload: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
// 最大选择个数 h5只能限制单选或是多选 // 最大选择个数 h5只能限制单选或是多选
limit: { limit: {
type: [Number, String], type: [Number, String],
default: 9 default: 9,
}, },
// 列表样式 grid | list | list-card // 列表样式 grid | list | list-card
mode: { mode: {
type: String, type: String,
default: 'grid' default: 'grid',
}, },
// 选择文件类型 image/video/all // 选择文件类型 image/video/all
fileMediatype: { fileMediatype: {
type: String, type: String,
default: 'image' default: 'image',
}, },
// 文件类型筛选 // 文件类型筛选
fileExtname: { fileExtname: {
type: [Array, String], type: [Array, String],
default() { default() {
return [] return []
} },
}, },
title: { title: {
type: String, type: String,
default: '' default: '',
}, },
listStyles: { listStyles: {
type: Object, type: Object,
@@ -162,38 +171,44 @@
// 是否显示分隔线 // 是否显示分隔线
dividline: true, dividline: true,
// 线条样式 // 线条样式
borderStyle: {} borderStyle: {},
}
} }
}, },
},
imageStyles: { imageStyles: {
type: Object, type: Object,
default() { default() {
return { return {
width: 'auto', width: 'auto',
height: 'auto' height: 'auto',
}
} }
}, },
},
readonly: { readonly: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
returnType: { returnType: {
type: String, type: String,
default: 'array' default: 'array',
}, },
sizeType: { sizeType: {
type: Array, type: Array,
default() { default() {
return ['original', 'compressed'] return ['original', 'compressed']
} },
} },
sourceType: {
type: Array,
default() {
return ['camera', 'album']
},
},
}, },
data() { data() {
return { return {
files: [], files: [],
localValue: [] localValue: [],
} }
}, },
watch: { watch: {
@@ -202,7 +217,7 @@
handler(newVal, oldVal) { handler(newVal, oldVal) {
this.setValue(newVal, oldVal) this.setValue(newVal, oldVal)
}, },
immediate: true immediate: true,
}, },
// #endif // #endif
// #ifdef VUE3 // #ifdef VUE3
@@ -210,14 +225,14 @@
handler(newVal, oldVal) { handler(newVal, oldVal) {
this.setValue(newVal, oldVal) this.setValue(newVal, oldVal)
}, },
immediate: true immediate: true,
}, },
// #endif // #endif
}, },
computed: { computed: {
filesList() { filesList() {
let files = [] let files = []
this.files.forEach(v => { this.files.forEach((v) => {
files.push(v) files.push(v)
}) })
return files return files
@@ -239,7 +254,7 @@
return 9 return 9
} }
return this.limit return this.limit
} },
}, },
created() { created() {
// TODO 兼容不开通服务空间的情况 // TODO 兼容不开通服务空间的情况
@@ -320,50 +335,56 @@
this.is_reset = false this.is_reset = false
this.formItem.setValue(this.localValue) this.formItem.setValue(this.localValue)
} }
let filesData = Object.keys(newVal).length > 0 ? newVal : []; let filesData = Object.keys(newVal).length > 0 ? newVal : []
this.files = [].concat(filesData) this.files = [].concat(filesData)
}, },
/** /**
* 选择文件 * 选择文件
*/ */
choose() { choose(type) {
if (this.disabled) return if (this.disabled) return
if (this.files.length >= Number(this.limitLength) && this.showType !== 'grid' && this.returnType === if (
'array') { this.files.length >= Number(this.limitLength) &&
this.showType !== 'grid' &&
this.returnType === 'array'
) {
uni.showToast({ uni.showToast({
title: `您最多选择 ${this.limitLength} 个文件`, title: `您最多选择 ${this.limitLength} 个文件`,
icon: 'none' icon: 'none',
}) })
return return
} }
this.chooseFiles()
this.chooseFiles(type)
}, },
/** /**
* 选择文件并上传 * 选择文件并上传
*/ */
chooseFiles() { chooseFiles(type) {
const _extname = get_extname(this.fileExtname) const _extname = get_extname(this.fileExtname)
// 获取后缀 // 获取后缀
uniCloud uniCloud
.chooseAndUploadFile({ .chooseAndUploadFile({
type: this.fileMediatype, type: this.fileMediatype,
compressed: false, compressed: false,
sourceType: [type],//type? :this.sourceType ,
sizeType: this.sizeType, sizeType: this.sizeType,
// TODO 如果为空video 有问题 // TODO 如果为空video 有问题
extension: _extname.length > 0 ? _extname : undefined, extension: _extname.length > 0 ? _extname : undefined,
count: this.limitLength - this.files.length, //默认9 count: this.limitLength - this.files.length, //默认9
onChooseFile: this.chooseFileCallback, onChooseFile: this.chooseFileCallback,
onUploadProgress: progressEvent => { onUploadProgress: (progressEvent) => {
this.setProgress(progressEvent, progressEvent.index) this.setProgress(progressEvent, progressEvent.index)
} },
}) })
.then(result => { .then((result) => {
console.log('选择失败', result)
this.setSuccessAndError(result.tempFiles) this.setSuccessAndError(result.tempFiles)
}) })
.catch(err => { .catch((err) => {
console.log('选择失败', err) console.log('选择失败', err)
}) })
}, },
@@ -374,19 +395,15 @@
*/ */
async chooseFileCallback(res) { async chooseFileCallback(res) {
const _extname = get_extname(this.fileExtname) const _extname = get_extname(this.fileExtname)
const is_one = (Number(this.limitLength) === 1 && const is_one =
this.disablePreview && (Number(this.limitLength) === 1 && this.disablePreview && !this.disabled) ||
!this.disabled) ||
this.returnType === 'object' this.returnType === 'object'
// 如果这有一个文件 ,需要清空本地缓存数据 // 如果这有一个文件 ,需要清空本地缓存数据
if (is_one) { if (is_one) {
this.files = [] this.files = []
} }
let { let { filePaths, files } = get_files_and_is_max(res, _extname)
filePaths,
files
} = get_files_and_is_max(res, _extname)
if (!(_extname && _extname.length > 0)) { if (!(_extname && _extname.length > 0)) {
filePaths = res.tempFilePaths filePaths = res.tempFilePaths
files = res.tempFiles files = res.tempFiles
@@ -402,12 +419,12 @@
this.files.push(filedata) this.files.push(filedata)
currentData.push({ currentData.push({
...filedata, ...filedata,
file: files[i] file: files[i],
}) })
} }
this.$emit('select', { this.$emit('select', {
tempFiles: currentData, tempFiles: currentData,
tempFilePaths: filePaths tempFilePaths: filePaths,
}) })
res.tempFiles = files res.tempFiles = files
// 停止自动上传 // 停止自动上传
@@ -422,14 +439,15 @@
*/ */
uploadFiles(files) { uploadFiles(files) {
files = [].concat(files) files = [].concat(files)
return uploadCloudFiles.call(this, files, 5, res => { return uploadCloudFiles
.call(this, files, 5, (res) => {
this.setProgress(res, res.index, true) this.setProgress(res, res.index, true)
}) })
.then(result => { .then((result) => {
this.setSuccessAndError(result) this.setSuccessAndError(result)
return result; return result
}) })
.catch(err => { .catch((err) => {
console.log(err) console.log(err)
}) })
}, },
@@ -444,7 +462,7 @@
let errorTempFilePath = [] let errorTempFilePath = []
for (let i = 0; i < res.length; i++) { for (let i = 0; i < res.length; i++) {
const item = res[i] const item = res[i]
const index = item.uuid ? this.files.findIndex(p => p.uuid === item.uuid) : item.index const index = item.uuid ? this.files.findIndex((p) => p.uuid === item.uuid) : item.index
if (index === -1 || !this.files) break if (index === -1 || !this.files) break
if (item.errMsg === 'request:fail') { if (item.errMsg === 'request:fail') {
@@ -476,14 +494,14 @@
// 状态改变返回 // 状态改变返回
this.$emit('success', { this.$emit('success', {
tempFiles: this.backObject(successData), tempFiles: this.backObject(successData),
tempFilePaths: tempFilePath tempFilePaths: tempFilePath,
}) })
} }
if (errorData.length > 0) { if (errorData.length > 0) {
this.$emit('fail', { this.$emit('fail', {
tempFiles: this.backObject(errorData), tempFiles: this.backObject(errorData),
tempFilePaths: errorTempFilePath tempFilePaths: errorTempFilePath,
}) })
} }
}, },
@@ -500,7 +518,7 @@
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total) const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
let idx = index let idx = index
if (!type) { if (!type) {
idx = this.files.findIndex(p => p.uuid === progressEvent.tempFile.uuid) idx = this.files.findIndex((p) => p.uuid === progressEvent.tempFile.uuid)
} }
if (idx === -1 || !this.files[idx]) return if (idx === -1 || !this.files[idx]) return
// fix by mehaotian 100 就会消失,-1 是为了让进度条消失 // fix by mehaotian 100 就会消失,-1 是为了让进度条消失
@@ -509,7 +527,7 @@
this.$emit('progress', { this.$emit('progress', {
index: idx, index: idx,
progress: parseInt(percentCompleted), progress: parseInt(percentCompleted),
tempFile: this.files[idx] tempFile: this.files[idx],
}) })
}, },
@@ -520,12 +538,12 @@
async delFile(index) { async delFile(index) {
let res = await this.beforeRemove({ let res = await this.beforeRemove({
tempFile: this.files[index], tempFile: this.files[index],
tempFilePath: this.files[index].url tempFilePath: this.files[index].url,
}) })
if (res === false) return if (res === false) return
this.$emit('delete', { this.$emit('delete', {
tempFile: this.files[index], tempFile: this.files[index],
tempFilePath: this.files[index].url tempFilePath: this.files[index].url,
}) })
this.files.splice(index, 1) this.files.splice(index, 1)
this.$nextTick(() => { this.$nextTick(() => {
@@ -542,7 +560,7 @@
const len = name.length const len = name.length
return { return {
name: name.substring(0, last_len), name: name.substring(0, last_len),
ext: name.substring(last_len + 1, len) ext: name.substring(last_len + 1, len),
} }
}, },
@@ -575,7 +593,7 @@
*/ */
backObject(files) { backObject(files) {
let newFilesData = [] let newFilesData = []
files.forEach(v => { files.forEach((v) => {
newFilesData.push({ newFilesData.push({
...v, ...v,
extname: v.extname, extname: v.extname,
@@ -585,14 +603,14 @@
path: v.path, path: v.path,
size: v.size, size: v.size,
fileID: v.fileID, fileID: v.fileID,
url: v.url url: v.url,
}) })
}) })
return newFilesData return newFilesData
}, },
async getTempFileURL(fileList) { async getTempFileURL(fileList) {
fileList = { fileList = {
fileList: [].concat(fileList) fileList: [].concat(fileList),
} }
const urls = await uniCloud.getTempFileURL(fileList) const urls = await uniCloud.getTempFileURL(fileList)
return urls.fileList[0].tempFileURL || '' return urls.fileList[0].tempFileURL || ''
@@ -601,16 +619,16 @@
* 获取父元素实例 * 获取父元素实例
*/ */
getForm(name = 'uniForms') { getForm(name = 'uniForms') {
let parent = this.$parent; let parent = this.$parent
let parentName = parent.$options.name; let parentName = parent.$options.name
while (parentName !== name) { while (parentName !== name) {
parent = parent.$parent; parent = parent.$parent
if (!parent) return false; if (!parent) return false
parentName = parent.$options.name; parentName = parent.$options.name
}
return parent;
}
} }
return parent
},
},
} }
</script> </script>

View File

@@ -2,14 +2,26 @@
<view class="uni-file-picker__container"> <view class="uni-file-picker__container">
<view class="file-picker__box" v-for="(item, index) in filesList" :key="index" :style="boxStyle"> <view class="file-picker__box" v-for="(item, index) in filesList" :key="index" :style="boxStyle">
<view class="file-picker__box-content" :style="borderStyle"> <view class="file-picker__box-content" :style="borderStyle">
<image class="file-image" :src="item.url" mode="aspectFill" @click.stop="prviewImage(item,index)"></image> <image
class="file-image"
:src="item.url"
mode="aspectFill"
@click.stop="prviewImage(item, index)"
></image>
<view v-if="delIcon && !readonly" class="icon-del-box" @click.stop="delFile(index)"> <view v-if="delIcon && !readonly" class="icon-del-box" @click.stop="delFile(index)">
<view class="icon-del"></view> <view class="icon-del"></view>
<view class="icon-del rotate"></view> <view class="icon-del rotate"></view>
</view> </view>
<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress"> <view
<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4" v-if="(item.progress && item.progress !== 100) || item.progress === 0"
:backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" /> class="file-picker__progress"
>
<progress
class="file-picker__progress-item"
:percent="item.progress === -1 ? 0 : item.progress"
stroke-width="4"
:backgroundColor="item.errMsg ? '#ff5a5f' : '#EBEBEB'"
/>
</view> </view>
<view v-if="item.errMsg" class="file-picker__mask" @click.stop="uploadFiles(item, index)"> <view v-if="item.errMsg" class="file-picker__mask" @click.stop="uploadFiles(item, index)">
点击重试 点击重试
@@ -24,31 +36,50 @@
</slot> </slot>
</view> </view>
</view> </view>
<view class="head-setup" v-if="headShow" @click="headShow = false">
<view class="head-setup-box">
<view class="head-setup-item" @click="take('camera')">拍摄</view>
<view class="head-setup-item" @click="take('album')">从相册选择</view>
<view class="head-setup-item" style="margin-top: 25rpx">取消</view>
</view>
</view>
<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="CAMERA"></yk-authpup>
<yk-authpup
ref="authpup1"
type="top"
@changeAuth="changeAuth"
permissionID="WRITE_EXTERNAL_STORAGE"
></yk-authpup>
</view> </view>
</template> </template>
<script> <script>
import ykAuthpup from '@/components/yk-authpup/yk-authpup'
export default { export default {
name: "uploadImage", components: {
ykAuthpup,
},
name: 'uploadImage',
emits: ['uploadFiles', 'choose', 'delFile'], emits: ['uploadFiles', 'choose', 'delFile'],
props: { props: {
filesList: { filesList: {
type: Array, type: Array,
default() { default() {
return [] return []
} },
}, },
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
disablePreview: { disablePreview: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
limit: { limit: {
type: [Number, String], type: [Number, String],
default: 9 default: 9,
}, },
imageStyles: { imageStyles: {
type: Object, type: Object,
@@ -56,33 +87,30 @@
return { return {
width: 'auto', width: 'auto',
height: 'auto', height: 'auto',
border: {} border: {},
}
} }
}, },
},
delIcon: { delIcon: {
type: Boolean, type: Boolean,
default: true default: true,
}, },
readonly: { readonly: {
type: Boolean, type: Boolean,
default:false default: false,
} },
}, },
computed: { computed: {
styles() { styles() {
let styles = { let styles = {
width: 'auto', width: 'auto',
height: 'auto', height: 'auto',
border: {} border: {},
} }
return Object.assign(styles, this.imageStyles) return Object.assign(styles, this.imageStyles)
}, },
boxStyle() { boxStyle() {
const { const { width = 'auto', height = 'auto' } = this.styles
width = 'auto',
height = 'auto'
} = this.styles
let obj = {} let obj = {}
if (height === 'auto') { if (height === 'auto') {
if (width !== 'auto') { if (width !== 'auto') {
@@ -113,9 +141,7 @@
return classles return classles
}, },
borderStyle() { borderStyle() {
let { let { border } = this.styles
border
} = this.styles
let obj = {} let obj = {}
const widthDefaultValue = 1 const widthDefaultValue = 1
const radiusDefaultValue = 3 const radiusDefaultValue = 3
@@ -130,7 +156,7 @@
'border-width': width, 'border-width': width,
'border-style': (border && border.style) || 'solid', 'border-style': (border && border.style) || 'solid',
'border-color': (border && border.color) || '#eee', 'border-color': (border && border.color) || '#eee',
'border-radius': radius 'border-radius': radius,
} }
} }
let classles = '' let classles = ''
@@ -138,14 +164,50 @@
classles += `${i}:${obj[i]};` classles += `${i}:${obj[i]};`
} }
return classles return classles
},
},
data() {
return {
headShow: false,
type:''
} }
}, },
methods: { methods: {
uploadFiles(item, index) { uploadFiles(item, index) {
this.$emit("uploadFiles", item) this.$emit('uploadFiles', item)
}, },
choose() { choose() {
this.$emit("choose") this.headShow = true
// this.$emit('choose')
},
take(type) {
this.type = type
if (type == 'camera') {
if (plus.os.name == 'Android') {
this.$refs['authpup'].open()
//未授权
// this.$refs.message.open()
// this.$refs.alertDialog.open('bottom')
} else {
this.$emit('choose',type)
}
} else {
if (plus.os.name == 'Android') {
this.$refs['authpup1'].open()
//未授权
// this.$refs.message.open()
// this.$refs.alertDialog.open('bottom')
} else {
this.$emit('choose',type)
}
// this.handleScon(type)、
}
},
changeAuth() {
//这里是权限通过后执行自己的代码逻辑
console.log('权限已授权,可执行自己的代码逻辑了')
// this.handleScon()
this.$emit('choose',this.type)
}, },
delFile(index) { delFile(index) {
this.$emit('delFile', index) this.$emit('delFile', index)
@@ -153,17 +215,17 @@
prviewImage(img, index) { prviewImage(img, index) {
let urls = [] let urls = []
if (Number(this.limit) === 1 && this.disablePreview && !this.disabled) { if (Number(this.limit) === 1 && this.disablePreview && !this.disabled) {
this.$emit("choose") this.$emit('choose')
} }
if (this.disablePreview) return if (this.disablePreview) return
this.filesList.forEach(i => { this.filesList.forEach((i) => {
urls.push(i.url) urls.push(i.url)
}) })
uni.previewImage({ uni.previewImage({
urls: urls, urls: urls,
current: index current: index,
}); })
}, },
value2px(value) { value2px(value) {
if (typeof value === 'number') { if (typeof value === 'number') {
@@ -174,8 +236,8 @@
} }
} }
return value return value
} },
} },
} }
</script> </script>
@@ -289,4 +351,29 @@
background-color: #fff; background-color: #fff;
border-radius: 2px; border-radius: 2px;
} }
.head-setup {
background-color: #fff;
position: fixed;
bottom: 0;
left: 0;
z-index: 10;
width: 750rpx;
height: 100vh;
padding-bottom: 60rpx;
background-color: rgba(0, 0, 0, 0.4);
.head-setup-box {
position: fixed;
bottom: 15rpx;
left: 0;
.head-setup-item {
z-index: 12;
height: 100rpx;
width: 750rpx;
background-color: #fff;
line-height: 100rpx;
text-align: center;
border-top: 1rpx solid #e8e8e8;
}
}
}
</style> </style>