修改 华为商城反馈相机 问题
This commit is contained in:
328
components/yk-authpup/yk-authpup.vue
Normal file
328
components/yk-authpup/yk-authpup.vue
Normal 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>
|
||||
@@ -2,8 +2,8 @@
|
||||
"name" : "灿能物联",
|
||||
"appid" : "__UNI__88BC25B",
|
||||
"description" : "",
|
||||
"versionName" : "1.5.9",
|
||||
"versionCode" : 159,
|
||||
"versionName" : "1.6.0",
|
||||
"versionCode" : 160,
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
@@ -143,8 +143,8 @@
|
||||
"proxy" : {
|
||||
"/api" : {
|
||||
"https" : true,
|
||||
"target" : "https://pqmcn.com:8092/api",
|
||||
// "target" : "http://192.168.1.126:10215",
|
||||
// "target" : "https://pqmcn.com:8092/api",
|
||||
"target" : "http://192.168.1.126:10215",
|
||||
"changOrigin" : true,
|
||||
"pathRewrite" : {
|
||||
"/api" : ""
|
||||
|
||||
32
package.json
32
package.json
@@ -1,16 +1,20 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"crypto-js": "^4.1.1",
|
||||
"html2canvas": "^1.4.1",
|
||||
"image-tools": "^1.4.0",
|
||||
"jsrsasign": "^10.8.6",
|
||||
"mqtt": "3.0.0",
|
||||
"pinyin-pro": "^3.13.2",
|
||||
"qs": "^6.11.2",
|
||||
"vconsole": "^3.15.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/html5plus": "^1.0.2",
|
||||
"@types/uni-app": "^1.4.4"
|
||||
}
|
||||
"id": "yk-authpup",
|
||||
"name": "解决软件在运行时，未见向用户告知权限申请的目的，华为等上架被拒问题",
|
||||
"displayName": "解决软件在运行时，未见向用户告知权限申请的目的，华为等上架被拒问题",
|
||||
"version": "1.0.5",
|
||||
"description": "解决软件在运行时，未见向用户告知权限申请的目的，华为等上架被拒问题",
|
||||
"keywords": [
|
||||
"uniapp",
|
||||
"华为上架",
|
||||
"权限",
|
||||
"权限申请",
|
||||
"权限判断"
|
||||
],
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
]
|
||||
}
|
||||
}
|
||||
1073
pages/device/new.vue
1073
pages/device/new.vue
File diff suppressed because it is too large
Load Diff
@@ -14,7 +14,9 @@
|
||||
<uni-easyinput type="textarea" v-model="formData.description" placeholder="请输入详细描述"/>
|
||||
</uni-forms-item>
|
||||
<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>
|
||||
</view>
|
||||
@@ -54,6 +56,9 @@ export default {
|
||||
console.log(e);
|
||||
this.formData.files = this.formData.files.filter(item => item.url !== e.tempFilePath)
|
||||
},
|
||||
pickerClick(){
|
||||
console.log(123);
|
||||
},
|
||||
fileChange(e) {
|
||||
console.log(e);
|
||||
e.tempFilePaths.forEach(item => {
|
||||
|
||||
@@ -120,14 +120,19 @@
|
||||
<view style="color: #6c6c6c; margin-top: 3rpx; "> 用于相机扫描二维码!</view>
|
||||
</uni-popup-message>
|
||||
</uni-popup>
|
||||
<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="CAMERA"></yk-authpup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { roleUpdate, autoLogin } from '@/common/api/user'
|
||||
import { transferDevice, shareDevice } from '@/common/api/device'
|
||||
|
||||
import ykAuthpup from "@/components/yk-authpup/yk-authpup";
|
||||
export default {
|
||||
components: {
|
||||
ykAuthpup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
@@ -183,17 +188,24 @@ export default {
|
||||
})
|
||||
})
|
||||
},
|
||||
changeAuth(){
|
||||
//这里是权限通过后执行自己的代码逻辑
|
||||
console.log('权限已授权，可执行自己的代码逻辑了');
|
||||
// this.handleScon()
|
||||
this.handleScon()
|
||||
},
|
||||
jump(type) {
|
||||
switch (type) {
|
||||
case 'scan':
|
||||
if (
|
||||
plus.os.name == 'Android' &&
|
||||
plus.navigator.checkPermission('android.permission.CAMERA') === 'undetermined'
|
||||
plus.os.name == 'Android'
|
||||
// && 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 {
|
||||
console.log(2)
|
||||
this.handleScon()
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<view class="about">
|
||||
<image src="/static/logo.png" class="logo"></image>
|
||||
<view class="name">灿能物联</view>
|
||||
<view class="version">Version 1.1.1</view>
|
||||
<view class="version">Version 1.6.0</view>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
|
||||
@@ -1,121 +1,147 @@
|
||||
<template>
|
||||
<view>
|
||||
<Cn-page :loading="loading">
|
||||
<view slot="body">
|
||||
<view class="head">
|
||||
<image class="head-img" :src="userInfo.avatar" v-if="userInfo.avatar"></image>
|
||||
<image class="head-img" src="/static/head.png" v-else></image>
|
||||
<view class="head-setup">
|
||||
<view class="head-setup-item" @click="take('album')">从相册选一张</view>
|
||||
<view class="head-setup-item" @click="take('camera')">拍一张照片</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
<view>
|
||||
<Cn-page :loading="loading">
|
||||
<view slot="body">
|
||||
<view class="head">
|
||||
<image class="head-img" :src="userInfo.avatar" v-if="userInfo.avatar"></image>
|
||||
<image class="head-img" src="/static/head.png" v-else></image>
|
||||
<view class="head-setup">
|
||||
<view class="head-setup-item" @click="take('album')">从相册选一张</view>
|
||||
<view class="head-setup-item" @click="take('camera')">拍一张照片</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
|
||||
<uni-popup ref="alertDialog" type="dialog">
|
||||
<uni-popup-dialog
|
||||
style="width: 90%; margin: 5%"
|
||||
cancelText="禁止"
|
||||
confirmText="允许"
|
||||
title="权限说明"
|
||||
content='是否允许"灿能物联"使用相机?'
|
||||
@confirm="handleScon('camera')"
|
||||
@close="dialogClose"
|
||||
></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
<uni-popup ref="message" type="message">
|
||||
<uni-popup-message type="info" :duration="0" style="width: 90%; margin: 5%">
|
||||
<view style="color: #909399; font-style: 16px">相机权限使用说明:</view>
|
||||
<view style="color: #6c6c6c; margin-top: 3rpx; "> 用于拍照上传头像!</view>
|
||||
</uni-popup-message>
|
||||
</uni-popup>
|
||||
</view>
|
||||
<uni-popup ref="alertDialog" type="dialog">
|
||||
<uni-popup-dialog
|
||||
style="width: 90%; margin: 5%"
|
||||
cancelText="禁止"
|
||||
confirmText="允许"
|
||||
title="权限说明"
|
||||
content='是否允许"灿能物联"使用相机?'
|
||||
@confirm="handleScon('camera')"
|
||||
@close="dialogClose"
|
||||
></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
<uni-popup ref="message" type="message">
|
||||
<uni-popup-message type="info" :duration="0" style="width: 90%; margin: 5%">
|
||||
<view style="color: #909399; font-style: 16px">相机权限使用说明:</view>
|
||||
<view style="color: #6c6c6c; margin-top: 3rpx"> 用于拍照上传头像!</view>
|
||||
</uni-popup-message>
|
||||
</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>
|
||||
</template>
|
||||
<script>
|
||||
import { uploadImage, getImageUrl } from '@/common/api/basic'
|
||||
import { apiUpdateUser } from '@/common/api/user'
|
||||
import ykAuthpup from '@/components/yk-authpup/yk-authpup'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
userInfo: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
take(type) {
|
||||
if (type == 'camera') {
|
||||
if (
|
||||
plus.os.name == 'Android' &&
|
||||
plus.navigator.checkPermission('android.permission.CAMERA') === 'undetermined'
|
||||
) {
|
||||
//未授权
|
||||
this.$refs.message.open()
|
||||
this.$refs.alertDialog.open('bottom')
|
||||
} else {
|
||||
this.handleScon(type)
|
||||
}
|
||||
} else {
|
||||
this.handleScon(type)
|
||||
}
|
||||
},
|
||||
handleScon(type) {
|
||||
this.$refs.message.close()
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: [type],
|
||||
success: (res) => {
|
||||
components: {
|
||||
ykAuthpup,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
userInfo: {},
|
||||
type: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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.handleScon(type)
|
||||
}
|
||||
} else {
|
||||
if (plus.os.name == 'Android') {
|
||||
this.$refs['authpup1'].open()
|
||||
//未授权
|
||||
// this.$refs.message.open()
|
||||
// this.$refs.alertDialog.open('bottom')
|
||||
} else {
|
||||
this.handleScon(type)
|
||||
}
|
||||
// this.handleScon(type)、
|
||||
}
|
||||
},
|
||||
changeAuth() {
|
||||
//这里是权限通过后执行自己的代码逻辑
|
||||
console.log('权限已授权，可执行自己的代码逻辑了')
|
||||
// this.handleScon()
|
||||
this.handleScon(this.type)
|
||||
},
|
||||
handleScon(type) {
|
||||
this.$refs.message.close()
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: [type],
|
||||
success: (res) => {
|
||||
uploadImage(res.tempFilePaths[0]).then((res) => {
|
||||
console.log(res)
|
||||
let result = JSON.parse(res[1].data)
|
||||
apiUpdateUser({
|
||||
headSculpture: result.data.minFileUrl,
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
this.userInfo.headSculpture = result.data.minFileUrl
|
||||
this.userInfo.avatar = this.$config.static + result.data.minFileUrl
|
||||
uni.setStorageSync(this.$cacheKey.userInfo, this.userInfo)
|
||||
this.$forceUpdate()
|
||||
})
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
dialogClose() {
|
||||
this.$refs.message.close()
|
||||
},
|
||||
},
|
||||
|
||||
uploadImage(res.tempFilePaths[0]).then((res) => {
|
||||
console.log(res)
|
||||
let result = JSON.parse(res[1].data)
|
||||
apiUpdateUser({
|
||||
headSculpture: result.data.minFileUrl,
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
this.userInfo.headSculpture = result.data.minFileUrl
|
||||
this.userInfo.avatar = this.$config.static + result.data.minFileUrl
|
||||
uni.setStorageSync(this.$cacheKey.userInfo, this.userInfo)
|
||||
this.$forceUpdate()
|
||||
})
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
dialogClose() {this.$refs.message.close()},
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
||||
},
|
||||
onLoad(options) {
|
||||
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.head {
|
||||
.head-img {
|
||||
height: 750rpx;
|
||||
width: 750rpx;
|
||||
}
|
||||
.head-img {
|
||||
height: 750rpx;
|
||||
width: 750rpx;
|
||||
}
|
||||
|
||||
.head-setup {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 750rpx;
|
||||
padding-bottom: 60rpx;
|
||||
background-color: #fff;
|
||||
.head-setup {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 750rpx;
|
||||
padding-bottom: 60rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.head-setup-item {
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
border-top: 1rpx solid #e8e8e8;
|
||||
}
|
||||
}
|
||||
.head-setup-item {
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
border-top: 1rpx solid #e8e8e8;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .uni-popup-message__box {
|
||||
border-radius: 10rpx !important;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx !important;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,17 +1,29 @@
|
||||
<template>
|
||||
<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">
|
||||
<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 class="icon-del"></view>
|
||||
<view class="icon-del rotate"></view>
|
||||
</view>
|
||||
<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " 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
|
||||
v-if="(item.progress && item.progress !== 100) || item.progress === 0"
|
||||
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 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)">
|
||||
点击重试
|
||||
</view>
|
||||
</view>
|
||||
@@ -24,269 +36,344 @@
|
||||
</slot>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "uploadImage",
|
||||
emits:['uploadFiles','choose','delFile'],
|
||||
props: {
|
||||
filesList: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
import ykAuthpup from '@/components/yk-authpup/yk-authpup'
|
||||
export default {
|
||||
components: {
|
||||
ykAuthpup,
|
||||
},
|
||||
name: 'uploadImage',
|
||||
emits: ['uploadFiles', 'choose', 'delFile'],
|
||||
props: {
|
||||
filesList: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
},
|
||||
disabled:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disablePreview: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
limit: {
|
||||
type: [Number, String],
|
||||
default: 9
|
||||
},
|
||||
imageStyles: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
border: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
delIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
readonly:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
styles() {
|
||||
let styles = {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disablePreview: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
limit: {
|
||||
type: [Number, String],
|
||||
default: 9,
|
||||
},
|
||||
imageStyles: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
border: {}
|
||||
border: {},
|
||||
}
|
||||
return Object.assign(styles, this.imageStyles)
|
||||
},
|
||||
boxStyle() {
|
||||
const {
|
||||
width = 'auto',
|
||||
height = 'auto'
|
||||
} = this.styles
|
||||
let obj = {}
|
||||
if (height === 'auto') {
|
||||
if (width !== 'auto') {
|
||||
obj.height = this.value2px(width)
|
||||
obj['padding-top'] = 0
|
||||
} else {
|
||||
obj.height = 0
|
||||
}
|
||||
} else {
|
||||
obj.height = this.value2px(height)
|
||||
},
|
||||
delIcon: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
styles() {
|
||||
let styles = {
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
border: {},
|
||||
}
|
||||
return Object.assign(styles, this.imageStyles)
|
||||
},
|
||||
boxStyle() {
|
||||
const { width = 'auto', height = 'auto' } = this.styles
|
||||
let obj = {}
|
||||
if (height === 'auto') {
|
||||
if (width !== 'auto') {
|
||||
obj.height = this.value2px(width)
|
||||
obj['padding-top'] = 0
|
||||
}
|
||||
|
||||
if (width === 'auto') {
|
||||
if (height !== 'auto') {
|
||||
obj.width = this.value2px(height)
|
||||
} else {
|
||||
obj.width = '33.3%'
|
||||
}
|
||||
} else {
|
||||
obj.width = this.value2px(width)
|
||||
obj.height = 0
|
||||
}
|
||||
} else {
|
||||
obj.height = this.value2px(height)
|
||||
obj['padding-top'] = 0
|
||||
}
|
||||
|
||||
let classles = ''
|
||||
for(let i in obj){
|
||||
classles+= `${i}:${obj[i]};`
|
||||
}
|
||||
return classles
|
||||
},
|
||||
borderStyle() {
|
||||
let {
|
||||
border
|
||||
} = this.styles
|
||||
let obj = {}
|
||||
const widthDefaultValue = 1
|
||||
const radiusDefaultValue = 3
|
||||
if (typeof border === 'boolean') {
|
||||
obj.border = border ? '1px #eee solid' : 'none'
|
||||
if (width === 'auto') {
|
||||
if (height !== 'auto') {
|
||||
obj.width = this.value2px(height)
|
||||
} else {
|
||||
let width = (border && border.width) || widthDefaultValue
|
||||
width = this.value2px(width)
|
||||
let radius = (border && border.radius) || radiusDefaultValue
|
||||
radius = this.value2px(radius)
|
||||
obj = {
|
||||
'border-width': width,
|
||||
'border-style': (border && border.style) || 'solid',
|
||||
'border-color': (border && border.color) || '#eee',
|
||||
'border-radius': radius
|
||||
}
|
||||
obj.width = '33.3%'
|
||||
}
|
||||
let classles = ''
|
||||
for(let i in obj){
|
||||
classles+= `${i}:${obj[i]};`
|
||||
} else {
|
||||
obj.width = this.value2px(width)
|
||||
}
|
||||
|
||||
let classles = ''
|
||||
for (let i in obj) {
|
||||
classles += `${i}:${obj[i]};`
|
||||
}
|
||||
return classles
|
||||
},
|
||||
borderStyle() {
|
||||
let { border } = this.styles
|
||||
let obj = {}
|
||||
const widthDefaultValue = 1
|
||||
const radiusDefaultValue = 3
|
||||
if (typeof border === 'boolean') {
|
||||
obj.border = border ? '1px #eee solid' : 'none'
|
||||
} else {
|
||||
let width = (border && border.width) || widthDefaultValue
|
||||
width = this.value2px(width)
|
||||
let radius = (border && border.radius) || radiusDefaultValue
|
||||
radius = this.value2px(radius)
|
||||
obj = {
|
||||
'border-width': width,
|
||||
'border-style': (border && border.style) || 'solid',
|
||||
'border-color': (border && border.color) || '#eee',
|
||||
'border-radius': radius,
|
||||
}
|
||||
return classles
|
||||
}
|
||||
let classles = ''
|
||||
for (let i in obj) {
|
||||
classles += `${i}:${obj[i]};`
|
||||
}
|
||||
return classles
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
headShow: false,
|
||||
type:''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
uploadFiles(item, index) {
|
||||
this.$emit('uploadFiles', item)
|
||||
},
|
||||
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)、
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
uploadFiles(item, index) {
|
||||
this.$emit("uploadFiles", item)
|
||||
},
|
||||
choose() {
|
||||
this.$emit("choose")
|
||||
},
|
||||
delFile(index) {
|
||||
this.$emit('delFile', index)
|
||||
},
|
||||
prviewImage(img, index) {
|
||||
let urls = []
|
||||
if(Number(this.limit) === 1&&this.disablePreview&&!this.disabled){
|
||||
this.$emit("choose")
|
||||
}
|
||||
if(this.disablePreview) return
|
||||
this.filesList.forEach(i => {
|
||||
urls.push(i.url)
|
||||
})
|
||||
|
||||
uni.previewImage({
|
||||
urls: urls,
|
||||
current: index
|
||||
});
|
||||
},
|
||||
value2px(value) {
|
||||
if (typeof value === 'number') {
|
||||
value += 'px'
|
||||
} else {
|
||||
if (value.indexOf('%') === -1) {
|
||||
value = value.indexOf('px') !== -1 ? value : value + 'px'
|
||||
}
|
||||
}
|
||||
return value
|
||||
changeAuth() {
|
||||
//这里是权限通过后执行自己的代码逻辑
|
||||
console.log('权限已授权，可执行自己的代码逻辑了')
|
||||
// this.handleScon()
|
||||
this.$emit('choose',this.type)
|
||||
},
|
||||
delFile(index) {
|
||||
this.$emit('delFile', index)
|
||||
},
|
||||
prviewImage(img, index) {
|
||||
let urls = []
|
||||
if (Number(this.limit) === 1 && this.disablePreview && !this.disabled) {
|
||||
this.$emit('choose')
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.disablePreview) return
|
||||
this.filesList.forEach((i) => {
|
||||
urls.push(i.url)
|
||||
})
|
||||
|
||||
uni.previewImage({
|
||||
urls: urls,
|
||||
current: index,
|
||||
})
|
||||
},
|
||||
value2px(value) {
|
||||
if (typeof value === 'number') {
|
||||
value += 'px'
|
||||
} else {
|
||||
if (value.indexOf('%') === -1) {
|
||||
value = value.indexOf('px') !== -1 ? value : value + 'px'
|
||||
}
|
||||
}
|
||||
return value
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-file-picker__container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-wrap: wrap;
|
||||
margin: -5px;
|
||||
}
|
||||
.uni-file-picker__container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-wrap: wrap;
|
||||
margin: -5px;
|
||||
}
|
||||
|
||||
.file-picker__box {
|
||||
position: relative;
|
||||
// flex: 0 0 33.3%;
|
||||
width: 33.3%;
|
||||
height: 0;
|
||||
padding-top: 33.33%;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
.file-picker__box {
|
||||
position: relative;
|
||||
// flex: 0 0 33.3%;
|
||||
width: 33.3%;
|
||||
height: 0;
|
||||
padding-top: 33.33%;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.file-picker__box-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
.file-picker__box-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: 5px;
|
||||
border: 1px #eee solid;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-picker__progress {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* border: 1px red solid; */
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.file-picker__progress-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-picker__mask {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.file-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.is-add {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon-add {
|
||||
width: 50px;
|
||||
height: 5px;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.rotate {
|
||||
position: absolute;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.icon-del-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 2;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.icon-del {
|
||||
width: 15px;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
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;
|
||||
margin: 5px;
|
||||
border: 1px #eee solid;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-picker__progress {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* border: 1px red solid; */
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.file-picker__progress-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-picker__mask {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.file-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.is-add {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon-add {
|
||||
width: 50px;
|
||||
height: 5px;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.rotate {
|
||||
position: absolute;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.icon-del-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 2;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.icon-del {
|
||||
width: 15px;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
.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>
|
||||
Reference in New Issue
Block a user