删除错误的图片剪切、错误的数字动画、新增app权限检测与打开设置
parent
071fa55dbb
commit
8fbaf73ea6
|
|
@ -1,46 +0,0 @@
|
||||||
let lastTime = 0
|
|
||||||
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
|
|
||||||
|
|
||||||
let requestAnimationFrame
|
|
||||||
let cancelAnimationFrame
|
|
||||||
|
|
||||||
const isServer = typeof window === 'undefined'
|
|
||||||
if (isServer) {
|
|
||||||
requestAnimationFrame = function() {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
cancelAnimationFrame = function() {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
requestAnimationFrame = window.requestAnimationFrame
|
|
||||||
cancelAnimationFrame = window.cancelAnimationFrame
|
|
||||||
let prefix
|
|
||||||
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
|
|
||||||
for (let i = 0; i < prefixes.length; i++) {
|
|
||||||
if (requestAnimationFrame && cancelAnimationFrame) { break }
|
|
||||||
prefix = prefixes[i]
|
|
||||||
requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
|
|
||||||
cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
|
|
||||||
if (!requestAnimationFrame || !cancelAnimationFrame) {
|
|
||||||
requestAnimationFrame = function(callback) {
|
|
||||||
const currTime = new Date().getTime()
|
|
||||||
// 为了使setTimteout的尽可能的接近每秒60帧的效果
|
|
||||||
const timeToCall = Math.max(0, 16 - (currTime - lastTime))
|
|
||||||
const id = window.setTimeout(() => {
|
|
||||||
callback(currTime + timeToCall)
|
|
||||||
}, timeToCall)
|
|
||||||
lastTime = currTime + timeToCall
|
|
||||||
return id
|
|
||||||
}
|
|
||||||
|
|
||||||
cancelAnimationFrame = function(id) {
|
|
||||||
window.clearTimeout(id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export { requestAnimationFrame, cancelAnimationFrame }
|
|
||||||
|
|
@ -1,191 +0,0 @@
|
||||||
<template>
|
|
||||||
<span>
|
|
||||||
{{displayValue}}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
startVal: {
|
|
||||||
type: Number,
|
|
||||||
required: false,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
endVal: {
|
|
||||||
type: Number,
|
|
||||||
required: false,
|
|
||||||
default: 2017
|
|
||||||
},
|
|
||||||
duration: {
|
|
||||||
type: Number,
|
|
||||||
required: false,
|
|
||||||
default: 3000
|
|
||||||
},
|
|
||||||
autoplay: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
decimals: {
|
|
||||||
type: Number,
|
|
||||||
required: false,
|
|
||||||
default: 0,
|
|
||||||
validator(value) {
|
|
||||||
return value >= 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
decimal: {
|
|
||||||
type: String,
|
|
||||||
required: false,
|
|
||||||
default: '.'
|
|
||||||
},
|
|
||||||
separator: {
|
|
||||||
type: String,
|
|
||||||
required: false,
|
|
||||||
default: ','
|
|
||||||
},
|
|
||||||
prefix: {
|
|
||||||
type: String,
|
|
||||||
required: false,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
suffix: {
|
|
||||||
type: String,
|
|
||||||
required: false,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
useEasing: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
easingFn: {
|
|
||||||
type: Function,
|
|
||||||
default(t, b, c, d) {
|
|
||||||
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
localStartVal: this.startVal,
|
|
||||||
displayValue: this.formatNumber(this.startVal),
|
|
||||||
printVal: null,
|
|
||||||
paused: false,
|
|
||||||
localDuration: this.duration,
|
|
||||||
startTime: null,
|
|
||||||
timestamp: null,
|
|
||||||
remaining: null,
|
|
||||||
rAF: null
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
countDown() {
|
|
||||||
return this.startVal > this.endVal
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
startVal() {
|
|
||||||
if (this.autoplay) {
|
|
||||||
this.start();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
endVal() {
|
|
||||||
if (this.autoplay) {
|
|
||||||
this.start();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
if (this.autoplay) {
|
|
||||||
this.start();
|
|
||||||
}
|
|
||||||
this.$emit('mountedCallback')
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
start() {
|
|
||||||
this.localStartVal = this.startVal;
|
|
||||||
this.startTime = null;
|
|
||||||
this.localDuration = this.duration;
|
|
||||||
this.paused = false;
|
|
||||||
this.rAF = requestAnimationFrame(this.count);
|
|
||||||
},
|
|
||||||
pauseResume() {
|
|
||||||
if (this.paused) {
|
|
||||||
this.resume();
|
|
||||||
this.paused = false;
|
|
||||||
} else {
|
|
||||||
this.pause();
|
|
||||||
this.paused = true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
pause() {
|
|
||||||
cancelAnimationFrame(this.rAF);
|
|
||||||
},
|
|
||||||
resume() {
|
|
||||||
this.startTime = null;
|
|
||||||
this.localDuration = +this.remaining;
|
|
||||||
this.localStartVal = +this.printVal;
|
|
||||||
requestAnimationFrame(this.count);
|
|
||||||
},
|
|
||||||
reset() {
|
|
||||||
this.startTime = null;
|
|
||||||
cancelAnimationFrame(this.rAF);
|
|
||||||
this.displayValue = this.formatNumber(this.startVal);
|
|
||||||
},
|
|
||||||
count(timestamp) {
|
|
||||||
if (!this.startTime) this.startTime = timestamp;
|
|
||||||
this.timestamp = timestamp;
|
|
||||||
const progress = timestamp - this.startTime;
|
|
||||||
this.remaining = this.localDuration - progress;
|
|
||||||
|
|
||||||
if (this.useEasing) {
|
|
||||||
if (this.countDown) {
|
|
||||||
this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration)
|
|
||||||
} else {
|
|
||||||
this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (this.countDown) {
|
|
||||||
this.printVal = this.localStartVal - ((this.localStartVal - this.endVal) * (progress / this.localDuration));
|
|
||||||
} else {
|
|
||||||
this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (this.countDown) {
|
|
||||||
this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;
|
|
||||||
} else {
|
|
||||||
this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.displayValue = this.formatNumber(this.printVal)
|
|
||||||
if (progress < this.localDuration) {
|
|
||||||
this.rAF = requestAnimationFrame(this.count);
|
|
||||||
} else {
|
|
||||||
this.$emit('callback');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
isNumber(val) {
|
|
||||||
return !isNaN(parseFloat(val))
|
|
||||||
},
|
|
||||||
formatNumber(num) {
|
|
||||||
num = num.toFixed(this.decimals);
|
|
||||||
num += '';
|
|
||||||
const x = num.split('.');
|
|
||||||
let x1 = x[0];
|
|
||||||
const x2 = x.length > 1 ? this.decimal + x[1] : '';
|
|
||||||
const rgx = /(\d+)(\d{3})/;
|
|
||||||
if (this.separator && !this.isNumber(this.separator)) {
|
|
||||||
while (rgx.test(x1)) {
|
|
||||||
x1 = x1.replace(rgx, '$1' + this.separator + '$2');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return this.prefix + x1 + x2 + this.suffix;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
destroyed() {
|
|
||||||
cancelAnimationFrame(this.rAF)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
<template>
|
||||||
|
<view class="segmented-control" :class="styleType" :style="wrapStyle">
|
||||||
|
<view v-for="(item, index) in values" class="segmented-control-item" :class="styleType" :key="index" :style="index === currentIndex ? activeStyle : itemStyle" @click="onClick(index)">
|
||||||
|
{{item}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'uni-segmented-control',
|
||||||
|
props: {
|
||||||
|
current: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
values: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
activeColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#007aff'
|
||||||
|
},
|
||||||
|
styleType: {
|
||||||
|
type: String,
|
||||||
|
default: 'button'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentIndex: this.current
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
current(val) {
|
||||||
|
if (val !== this.currentIndex) {
|
||||||
|
this.currentIndex = val;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
wrapStyle() {
|
||||||
|
let styleString = '';
|
||||||
|
switch (this.styleType) {
|
||||||
|
case 'text':
|
||||||
|
styleString = `border:0;`;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
styleString = `border-color: ${this.activeColor}`;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return styleString;
|
||||||
|
},
|
||||||
|
itemStyle() {
|
||||||
|
let styleString = '';
|
||||||
|
switch (this.styleType) {
|
||||||
|
case 'text':
|
||||||
|
styleString = `color:#000;border-left:0;`;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
styleString = `color:${this.activeColor};border-color:${this.activeColor};`;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return styleString;
|
||||||
|
},
|
||||||
|
activeStyle() {
|
||||||
|
let styleString = '';
|
||||||
|
switch (this.styleType) {
|
||||||
|
case 'text':
|
||||||
|
styleString = `color:${this.activeColor};border-left:0;border-bottom-style:solid;`;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
styleString = `color:#fff;border-color:${this.activeColor};background-color:${this.activeColor}`;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return styleString;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onClick(index) {
|
||||||
|
if (this.currentIndex !== index) {
|
||||||
|
this.currentIndex = index;
|
||||||
|
this.$emit('clickItem', index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.segmented-control {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
width: 75%;
|
||||||
|
font-size: 28upx;
|
||||||
|
border-radius: 10upx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control.button {
|
||||||
|
border: 2upx solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control.text {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.segmented-control-item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60upx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control-item.button {
|
||||||
|
border-left: 1upx solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control-item.text {
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.segmented-control-item:first-child {
|
||||||
|
border-left-width: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,272 @@
|
||||||
|
/**
|
||||||
|
* 本模块封装了Android、iOS的应用权限判断、打开应用权限设置界面、以及位置系统服务是否开启
|
||||||
|
*/
|
||||||
|
|
||||||
|
var isIos
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
isIos = (plus.os.name == "iOS")
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// 判断推送权限是否开启
|
||||||
|
function judgeIosPermissionPush() {
|
||||||
|
var result = false;
|
||||||
|
var UIApplication = plus.ios.import("UIApplication");
|
||||||
|
var app = UIApplication.sharedApplication();
|
||||||
|
var enabledTypes = 0;
|
||||||
|
if (app.currentUserNotificationSettings) {
|
||||||
|
var settings = app.currentUserNotificationSettings();
|
||||||
|
enabledTypes = settings.plusGetAttribute("types");
|
||||||
|
console.log("enabledTypes1:" + enabledTypes);
|
||||||
|
if (enabledTypes == 0) {
|
||||||
|
console.log("推送权限没有开启");
|
||||||
|
} else {
|
||||||
|
result = true;
|
||||||
|
console.log("已经开启推送功能!")
|
||||||
|
}
|
||||||
|
plus.ios.deleteObject(settings);
|
||||||
|
} else {
|
||||||
|
enabledTypes = app.enabledRemoteNotificationTypes();
|
||||||
|
if (enabledTypes == 0) {
|
||||||
|
console.log("推送权限没有开启!");
|
||||||
|
} else {
|
||||||
|
result = true;
|
||||||
|
console.log("已经开启推送功能!")
|
||||||
|
}
|
||||||
|
console.log("enabledTypes2:" + enabledTypes);
|
||||||
|
}
|
||||||
|
plus.ios.deleteObject(app);
|
||||||
|
plus.ios.deleteObject(UIApplication);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断定位权限是否开启
|
||||||
|
function judgeIosPermissionLocation() {
|
||||||
|
var result = false;
|
||||||
|
var cllocationManger = plus.ios.import("CLLocationManager");
|
||||||
|
var status = cllocationManger.authorizationStatus();
|
||||||
|
result = (status != 2)
|
||||||
|
console.log("定位权限开启：" + result);
|
||||||
|
// 以下代码判断了手机设备的定位是否关闭，推荐另行使用方法 checkSystemEnableLocation
|
||||||
|
/* var enable = cllocationManger.locationServicesEnabled();
|
||||||
|
var status = cllocationManger.authorizationStatus();
|
||||||
|
console.log("enable:" + enable);
|
||||||
|
console.log("status:" + status);
|
||||||
|
if (enable && status != 2) {
|
||||||
|
result = true;
|
||||||
|
console.log("手机定位服务已开启且已授予定位权限");
|
||||||
|
} else {
|
||||||
|
console.log("手机系统的定位没有打开或未给予定位权限");
|
||||||
|
} */
|
||||||
|
plus.ios.deleteObject(cllocationManger);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断麦克风权限是否开启
|
||||||
|
function judgeIosPermissionRecord() {
|
||||||
|
var result = false;
|
||||||
|
var avaudiosession = plus.ios.import("AVAudioSession");
|
||||||
|
var avaudio = avaudiosession.sharedInstance();
|
||||||
|
var permissionStatus = avaudio.recordPermission();
|
||||||
|
console.log("permissionStatus:" + permissionStatus);
|
||||||
|
if (permissionStatus == 1684369017 || permissionStatus == 1970168948) {
|
||||||
|
console.log("麦克风权限没有开启");
|
||||||
|
} else {
|
||||||
|
result = true;
|
||||||
|
console.log("麦克风权限已经开启");
|
||||||
|
}
|
||||||
|
plus.ios.deleteObject(avaudiosession);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断相机权限是否开启
|
||||||
|
function judgeIosPermissionCamera() {
|
||||||
|
var result = false;
|
||||||
|
var AVCaptureDevice = plus.ios.import("AVCaptureDevice");
|
||||||
|
var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');
|
||||||
|
console.log("authStatus:" + authStatus);
|
||||||
|
if (authStatus == 3) {
|
||||||
|
result = true;
|
||||||
|
console.log("相机权限已经开启");
|
||||||
|
} else {
|
||||||
|
console.log("相机权限没有开启");
|
||||||
|
}
|
||||||
|
plus.ios.deleteObject(AVCaptureDevice);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断相册权限是否开启
|
||||||
|
function judgeIosPermissionPhotoLibrary() {
|
||||||
|
var result = false;
|
||||||
|
var PHPhotoLibrary = plus.ios.import("PHPhotoLibrary");
|
||||||
|
var authStatus = PHPhotoLibrary.authorizationStatus();
|
||||||
|
console.log("authStatus:" + authStatus);
|
||||||
|
if (authStatus == 3) {
|
||||||
|
result = true;
|
||||||
|
console.log("相册权限已经开启");
|
||||||
|
} else {
|
||||||
|
console.log("相册权限没有开启");
|
||||||
|
}
|
||||||
|
plus.ios.deleteObject(PHPhotoLibrary);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断通讯录权限是否开启
|
||||||
|
function judgeIosPermissionContact() {
|
||||||
|
var result = false;
|
||||||
|
var CNContactStore = plus.ios.import("CNContactStore");
|
||||||
|
var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);
|
||||||
|
if (cnAuthStatus == 3) {
|
||||||
|
result = true;
|
||||||
|
console.log("通讯录权限已经开启");
|
||||||
|
} else {
|
||||||
|
console.log("通讯录权限没有开启");
|
||||||
|
}
|
||||||
|
plus.ios.deleteObject(CNContactStore);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断日历权限是否开启
|
||||||
|
function judgeIosPermissionCalendar() {
|
||||||
|
var result = false;
|
||||||
|
var EKEventStore = plus.ios.import("EKEventStore");
|
||||||
|
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);
|
||||||
|
if (ekAuthStatus == 3) {
|
||||||
|
result = true;
|
||||||
|
console.log("日历权限已经开启");
|
||||||
|
} else {
|
||||||
|
console.log("日历权限没有开启");
|
||||||
|
}
|
||||||
|
plus.ios.deleteObject(EKEventStore);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断备忘录权限是否开启
|
||||||
|
function judgeIosPermissionMemo() {
|
||||||
|
var result = false;
|
||||||
|
var EKEventStore = plus.ios.import("EKEventStore");
|
||||||
|
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);
|
||||||
|
if (ekAuthStatus == 3) {
|
||||||
|
result = true;
|
||||||
|
console.log("备忘录权限已经开启");
|
||||||
|
} else {
|
||||||
|
console.log("备忘录权限没有开启");
|
||||||
|
}
|
||||||
|
plus.ios.deleteObject(EKEventStore);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Android权限查询
|
||||||
|
function requestAndroidPermission(permissionID) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
plus.android.requestPermissions(
|
||||||
|
[permissionID], // 理论上支持多个权限同时查询，但实际上本函数封装只处理了一个权限的情况。有需要的可自行扩展封装
|
||||||
|
function(resultObj) {
|
||||||
|
var result = 0;
|
||||||
|
for (var i = 0; i < resultObj.granted.length; i++) {
|
||||||
|
var grantedPermission = resultObj.granted[i];
|
||||||
|
console.log('已获取的权限：' + grantedPermission);
|
||||||
|
result = 1
|
||||||
|
}
|
||||||
|
for (var i = 0; i < resultObj.deniedPresent.length; i++) {
|
||||||
|
var deniedPresentPermission = resultObj.deniedPresent[i];
|
||||||
|
console.log('拒绝本次申请的权限：' + deniedPresentPermission);
|
||||||
|
result = 0
|
||||||
|
}
|
||||||
|
for (var i = 0; i < resultObj.deniedAlways.length; i++) {
|
||||||
|
var deniedAlwaysPermission = resultObj.deniedAlways[i];
|
||||||
|
console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
|
||||||
|
result = -1
|
||||||
|
}
|
||||||
|
resolve(result);
|
||||||
|
// 若所需权限被拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限
|
||||||
|
// if (result != 1) {
|
||||||
|
// gotoAppPermissionSetting()
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
function(error) {
|
||||||
|
console.log('申请权限错误：' + error.code + " = " + error.message);
|
||||||
|
resolve({
|
||||||
|
code: error.code,
|
||||||
|
message: error.message
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用一个方法，根据参数判断权限
|
||||||
|
function judgeIosPermission(permissionID) {
|
||||||
|
if (permissionID == "location") {
|
||||||
|
return judgeIosPermissionLocation()
|
||||||
|
} else if (permissionID == "camera") {
|
||||||
|
return judgeIosPermissionCamera()
|
||||||
|
} else if (permissionID == "photoLibrary") {
|
||||||
|
return judgeIosPermissionPhotoLibrary()
|
||||||
|
} else if (permissionID == "record") {
|
||||||
|
return judgeIosPermissionRecord()
|
||||||
|
} else if (permissionID == "push") {
|
||||||
|
return judgeIosPermissionPush()
|
||||||
|
} else if (permissionID == "contact") {
|
||||||
|
return judgeIosPermissionContact()
|
||||||
|
} else if (permissionID == "calendar") {
|
||||||
|
return judgeIosPermissionCalendar()
|
||||||
|
} else if (permissionID == "memo") {
|
||||||
|
return judgeIosPermissionMemo()
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 跳转到**应用**的权限页面
|
||||||
|
function gotoAppPermissionSetting() {
|
||||||
|
if (isIos) {
|
||||||
|
var UIApplication = plus.ios.import("UIApplication");
|
||||||
|
var application2 = UIApplication.sharedApplication();
|
||||||
|
var NSURL2 = plus.ios.import("NSURL");
|
||||||
|
// var setting2 = NSURL2.URLWithString("prefs:root=LOCATION_SERVICES");
|
||||||
|
var setting2 = NSURL2.URLWithString("app-settings:");
|
||||||
|
application2.openURL(setting2);
|
||||||
|
|
||||||
|
plus.ios.deleteObject(setting2);
|
||||||
|
plus.ios.deleteObject(NSURL2);
|
||||||
|
plus.ios.deleteObject(application2);
|
||||||
|
} else {
|
||||||
|
// console.log(plus.device.vendor);
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查系统的设备服务是否开启
|
||||||
|
// var checkSystemEnableLocation = async function () {
|
||||||
|
function checkSystemEnableLocation() {
|
||||||
|
if (isIos) {
|
||||||
|
var result = false;
|
||||||
|
var cllocationManger = plus.ios.import("CLLocationManager");
|
||||||
|
var result = cllocationManger.locationServicesEnabled();
|
||||||
|
console.log("系统定位开启:" + result);
|
||||||
|
plus.ios.deleteObject(cllocationManger);
|
||||||
|
return result;
|
||||||
|
} else {
|
||||||
|
var context = plus.android.importClass("android.content.Context");
|
||||||
|
var locationManager = plus.android.importClass("android.location.LocationManager");
|
||||||
|
var main = plus.android.runtimeMainActivity();
|
||||||
|
var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
|
||||||
|
var result = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER);
|
||||||
|
console.log("系统定位开启:" + result);
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
judgeIosPermission: judgeIosPermission,
|
||||||
|
requestAndroidPermission: requestAndroidPermission,
|
||||||
|
checkSystemEnableLocation: checkSystemEnableLocation,
|
||||||
|
gotoAppPermissionSetting: gotoAppPermissionSetting
|
||||||
|
}
|
||||||
27
pages.json
27
pages.json
|
|
@ -88,24 +88,6 @@
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
,{
|
|
||||||
"path" : "picture-cut/picture-cut",
|
|
||||||
"style" :
|
|
||||||
{
|
|
||||||
"navigationBarTitleText": "",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
,{
|
|
||||||
"path" : "count-to/count-to",
|
|
||||||
"style" :
|
|
||||||
{
|
|
||||||
"navigationBarTitleText": "",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{ //B包
|
{ //B包
|
||||||
|
|
@ -158,6 +140,15 @@
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "permission/permission",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -95,7 +95,7 @@
|
||||||
],
|
],
|
||||||
gridList:[
|
gridList:[
|
||||||
{imgsrc:'/static/public/icon-my-information.png',title:'个人信息'},
|
{imgsrc:'/static/public/icon-my-information.png',title:'个人信息'},
|
||||||
{imgsrc:'/static/public/icon-my-certificates.png',title:'电子证件'},
|
{imgsrc:'/static/public/icon-my-certificates.png',title:'地址选择'},
|
||||||
{imgsrc:'/static/public/icon-my-service.png',title:'服务范围'},
|
{imgsrc:'/static/public/icon-my-service.png',title:'服务范围'},
|
||||||
{imgsrc:'/static/public/icon-my-evaluate.png',title:'我要评价'},
|
{imgsrc:'/static/public/icon-my-evaluate.png',title:'我要评价'},
|
||||||
{imgsrc:'/static/public/icon-my-account.png',title:'我的账户'},
|
{imgsrc:'/static/public/icon-my-account.png',title:'我的账户'},
|
||||||
|
|
@ -158,7 +158,7 @@
|
||||||
chooseGridEv(index){
|
chooseGridEv(index){
|
||||||
let urls = [
|
let urls = [
|
||||||
'/pagesB/personal-information/personal-information',
|
'/pagesB/personal-information/personal-information',
|
||||||
'/pagesA/picture-cut/picture-cut',
|
'/pagesA/my-address/my-address',
|
||||||
'/pagesB/service-range/service-range',
|
'/pagesB/service-range/service-range',
|
||||||
'/pagesB/i-want-evaluate/i-want-evaluate',
|
'/pagesB/i-want-evaluate/i-want-evaluate',
|
||||||
'/pagesB/my-account/my-account',
|
'/pagesB/my-account/my-account',
|
||||||
|
|
|
||||||
|
|
@ -1,126 +0,0 @@
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<view>
|
|
||||||
<vueCountTo ref='example1' :start-val="startVal1" :end-val="endVal1" :duration="4000"></vueCountTo>
|
|
||||||
<view @click='start1'>start</view>
|
|
||||||
<view @click='changeExampleEndVal'>change end-val</view>
|
|
||||||
<view @click='incrementalUpdate'>incremental update</view>
|
|
||||||
</view>
|
|
||||||
<view>
|
|
||||||
<vueCountTo ref="example2" :start-val="2017" :end-val="0" :duration="8000"></vueCountTo>
|
|
||||||
<view @click="start2">start</view>
|
|
||||||
</view>
|
|
||||||
<view>
|
|
||||||
<vueCountTo ref="example3" :start-val="_startVal" :end-val="_endVal" :duration="_duration"
|
|
||||||
:decimals="_decimals" :separator="_separator" :prefix="_prefix" :suffix="_suffix" :autoplay="false">
|
|
||||||
</vueCountTo>
|
|
||||||
<view>
|
|
||||||
<label for="startValInput">startVal: <input type="number" v-model.number='setStartVal'
|
|
||||||
name='startValInput' /></label>
|
|
||||||
<label for="endValInput">endVal: <input type="number" v-model.number='setEndVal'
|
|
||||||
name='endVaInput' /></label>
|
|
||||||
<label for="durationInput">duration: <input type="number" v-model.number='setDuration'
|
|
||||||
name='durationInput' /></label>
|
|
||||||
<view @click='start3'>start</view>
|
|
||||||
<view @click='pauseResume'>pause/resume</view>
|
|
||||||
<label for="decimalsInput">decimals: <input type="number" v-model.number='setDecimals' name='decimalsInput' /></label>
|
|
||||||
<label for="separatorInput">separator: <input v-model='setSeparator' name='separatorInput' /></label>
|
|
||||||
<label for="prefixInput">prefix: <input v-model='setPrefix' name='prefixInput' /></label>
|
|
||||||
<label for="suffixInput">suffix: <input v-model='setSuffix' name='suffixInput' /></label>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import vueCountTo from '@/components/count-animate/count-one/vue-countTo.vue';
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
vueCountTo
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
setStartVal: 0,
|
|
||||||
setEndVal: 2017,
|
|
||||||
setDuration: 4000,
|
|
||||||
setDecimals: 0,
|
|
||||||
setSeparator: ',',
|
|
||||||
setSuffix: ' rmb',
|
|
||||||
setPrefix: '¥ ',
|
|
||||||
startVal1: 0,
|
|
||||||
endVal1: 2017
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
_startVal() {
|
|
||||||
if (this.setStartVal) {
|
|
||||||
return this.setStartVal
|
|
||||||
} else {
|
|
||||||
return 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
_endVal() {
|
|
||||||
if (this.setEndVal) {
|
|
||||||
return this.setEndVal
|
|
||||||
} else {
|
|
||||||
return 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
_duration() {
|
|
||||||
if (this.setDuration) {
|
|
||||||
return this.setDuration
|
|
||||||
} else {
|
|
||||||
return 100
|
|
||||||
}
|
|
||||||
},
|
|
||||||
_decimals() {
|
|
||||||
if (this.setDecimals) {
|
|
||||||
if (this.setDecimals < 0 || this.setDecimals > 20) {
|
|
||||||
alert('digits argument must be between 0 and 20')
|
|
||||||
return 0
|
|
||||||
}
|
|
||||||
return this.setDecimals
|
|
||||||
} else {
|
|
||||||
return 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
_separator() {
|
|
||||||
return this.setSeparator
|
|
||||||
},
|
|
||||||
_suffix() {
|
|
||||||
return this.setSuffix
|
|
||||||
},
|
|
||||||
_prefix() {
|
|
||||||
return this.setPrefix
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changeExampleEndVal() {
|
|
||||||
this.endVal1 = this.endVal1 + 1000
|
|
||||||
},
|
|
||||||
incrementalUpdate() {
|
|
||||||
this.startVal1 = this.endVal1
|
|
||||||
this.endVal1 = this.endVal1 + 1000
|
|
||||||
},
|
|
||||||
callback() {
|
|
||||||
console.log('callback')
|
|
||||||
},
|
|
||||||
start1() {
|
|
||||||
this.$refs.example1.start();
|
|
||||||
},
|
|
||||||
start2() {
|
|
||||||
this.$refs.example2.start();
|
|
||||||
},
|
|
||||||
start3() {
|
|
||||||
this.$refs.example3.start();
|
|
||||||
},
|
|
||||||
pauseResume() {
|
|
||||||
this.$refs.example3.pauseResume();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -64,8 +64,6 @@
|
||||||
import addressTwo from '@/components/choose-address/address-two/address-two.vue';
|
import addressTwo from '@/components/choose-address/address-two/address-two.vue';
|
||||||
import addressThree from '@/components/choose-address/address-three/address-three.vue';
|
import addressThree from '@/components/choose-address/address-three/address-three.vue';
|
||||||
import addressFour from '@/components/choose-address/address-four/address-four.vue';
|
import addressFour from '@/components/choose-address/address-four/address-four.vue';
|
||||||
import yayaMap from '@/jsFile/map/yaya-map.js';
|
|
||||||
import yayaTime from '@/jsFile/time/yaya-time.js';
|
|
||||||
import statusContainer from '@/components/containers/status-container.vue';
|
import statusContainer from '@/components/containers/status-container.vue';
|
||||||
export default {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
|
|
@ -100,8 +98,6 @@
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getDistrict();
|
this.getDistrict();
|
||||||
yayaMap.getAddressH5();
|
|
||||||
yayaTime.weekDate();
|
|
||||||
},
|
},
|
||||||
computed:{
|
computed:{
|
||||||
regionName(){
|
regionName(){
|
||||||
|
|
|
||||||
|
|
@ -1,806 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="wrapper">
|
|
||||||
<view class="model" v-show="model">
|
|
||||||
<view class="model-show" @click="model = false">
|
|
||||||
<img :src="modelSrc" alt="" @click="model = false">
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="content">
|
|
||||||
<h1><a class="title" href="https://github.com/xyxiao001/vue-cropper" target="_blank">vue-cropper</a></h1>
|
|
||||||
<iframe
|
|
||||||
src="https://ghbtns.com/github-btn.html?user=xyxiao001&repo=vue-cropper&type=star&count=true&size=large"
|
|
||||||
frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
|
||||||
<view class="show-info">
|
|
||||||
<h2>install</h2>
|
|
||||||
<codes>
|
|
||||||
<view slot="body">{{ code0 }}</view>
|
|
||||||
</codes>
|
|
||||||
</view>
|
|
||||||
<view class="show-info">
|
|
||||||
<h2>example1 基本例子 无限制</h2>
|
|
||||||
<view class="test test1">
|
|
||||||
<vueCropper ref="cropper" :img="option.img" :outputSize="option.size"
|
|
||||||
:outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove"
|
|
||||||
:canMoveBox="option.canMoveBox" :fixedBox="option.fixedBox" :original="option.original"
|
|
||||||
:autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth"
|
|
||||||
:autoCropHeight="option.autoCropHeight" :centerBox="option.centerBox" :high="option.high"
|
|
||||||
:infoTrue="option.infoTrue" :maxImgSize="option.maxImgSize" @realTime="realTime"
|
|
||||||
@imgLoad="imgLoad" @cropMoving="cropMoving" :enlarge="option.enlarge" :mode="option.mode"
|
|
||||||
:limitMinSize="option.limitMinSize"></vueCropper>
|
|
||||||
</view>
|
|
||||||
<view class="test-button">
|
|
||||||
<button @click="changeImg" class="btn">changeImg</button>
|
|
||||||
<label class="btn" for="uploads">upload</label>
|
|
||||||
<input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);"
|
|
||||||
accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)"
|
|
||||||
ref="uploadImg">
|
|
||||||
<button @click="startCrop" v-if="!crap" class="btn">start</button>
|
|
||||||
<button @click="stopCrop" v-else class="btn">stop</button>
|
|
||||||
<button @click="clearCrop" class="btn">clear</button>
|
|
||||||
<button @click="refreshCrop" class="btn">refresh</button>
|
|
||||||
<button @click="changeScale(1)" class="btn">+</button>
|
|
||||||
<button @click="changeScale(-1)" class="btn">-</button>
|
|
||||||
<button @click="rotateLeft" class="btn">rotateLeft</button>
|
|
||||||
<button @click="rotateRight" class="btn">rotateRight</button>
|
|
||||||
<button @click="finish('base64')" class="btn">preview(base64)</button>
|
|
||||||
<button @click="finish('blob')" class="btn">preview(blob)</button>
|
|
||||||
<button @click="() => option.img = ''" class="btn">清除图片</button>
|
|
||||||
<a @click="down('base64')" class="btn">download(base64)</a>
|
|
||||||
<a @click="down('blob')" class="btn">download(blob)</a>
|
|
||||||
<a :href="downImg" download="demo.png" ref="downloadDom"></a>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="pre">
|
|
||||||
<!-- <section class="pre-item">
|
|
||||||
<p>固定大小 固定宽度100px</p>
|
|
||||||
<section v-html="previews.html"></section>
|
|
||||||
</section> -->
|
|
||||||
|
|
||||||
<section class="pre-item">
|
|
||||||
<p>截图框大小</p>
|
|
||||||
<view class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
|
|
||||||
'margin': '5px'}">
|
|
||||||
<view :style="previews.view">
|
|
||||||
<img :src="previews.url" :style="previews.img">
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="pre-item">
|
|
||||||
<p>中等大小</p>
|
|
||||||
<view :style="previewStyle1">
|
|
||||||
<view :style="previews.view">
|
|
||||||
<img :src="previews.url" :style="previews.img">
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="pre-item">
|
|
||||||
<p>迷你大小</p>
|
|
||||||
<view :style="previewStyle2">
|
|
||||||
<view :style="previews.view">
|
|
||||||
<img :src="previews.url" :style="previews.img">
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="pre-item" title="zoom: (100 / previews.w)">
|
|
||||||
<p>固定为100宽度</p>
|
|
||||||
<view :style="previewStyle3">
|
|
||||||
<view :style="previews.view">
|
|
||||||
<img :src="previews.url" :style="previews.img">
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<section class="pre-item" title="zoom: (100 / previews.h)">
|
|
||||||
<p>固定为100高度</p>
|
|
||||||
<view :style="previewStyle4">
|
|
||||||
<view :style="previews.view">
|
|
||||||
<img :src="previews.url" :style="previews.img">
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</section>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
|
|
||||||
<view style="display:block; width: 100%;">
|
|
||||||
<label class="c-item">
|
|
||||||
<span>图片默认渲染方式</span>
|
|
||||||
<select v-model="option.mode">
|
|
||||||
<option value="contain">contain</option>
|
|
||||||
<option value="cover">cover</option>
|
|
||||||
<option value="400px auto">400px auto</option>
|
|
||||||
<option value="auto 400px">auto 400px</option>
|
|
||||||
<option value="50%">50%</option>
|
|
||||||
<option value="auto 50%">auto 50%</option>
|
|
||||||
</select>
|
|
||||||
<section>
|
|
||||||
类似css background属性设置 设置不符合规范不生效， 参照文档说明
|
|
||||||
</section>
|
|
||||||
</label>
|
|
||||||
<!-- <label class="c-item">
|
|
||||||
<span>截图框最小限制 </span>
|
|
||||||
<input type="text" v-model="option.limitMinSize">
|
|
||||||
</label> -->
|
|
||||||
<label class="c-item">
|
|
||||||
<span>上传时图片最大大小(默认会压缩尺寸到这个大小)</span>
|
|
||||||
<input type="nubmer" v-model="option.maxImgSize">
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>上传图片是否显示原始宽高 (针对大图 可以铺满)</span>
|
|
||||||
<input type="checkbox" v-model="option.original">
|
|
||||||
<span>original: {{ option.original}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>是否根据dpr生成适合屏幕的高清图片</span>
|
|
||||||
<input type="checkbox" v-model="option.high">
|
|
||||||
<span>high: {{ option.high}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>是否输出原图比例的截图</span>
|
|
||||||
<input type="checkbox" v-model="option.full">
|
|
||||||
<span>full: {{ option.full}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>截图信息展示是否是真实的输出宽高</span>
|
|
||||||
<input type="checkbox" v-model="option.infoTrue">
|
|
||||||
<span>infoTrue: {{ option.infoTrue}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>能否拖动图片</span>
|
|
||||||
<input type="checkbox" v-model="option.canMove">
|
|
||||||
<span>canMove: {{ option.canMove}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>能否拖动截图框</span>
|
|
||||||
<input type="checkbox" v-model="option.canMoveBox">
|
|
||||||
<span>canMoveBox: {{ option.canMoveBox}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>截图框固定大小</span>
|
|
||||||
<input type="checkbox" v-model="option.fixedBox">
|
|
||||||
<span>fixedBox: {{ option.fixedBox}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>是否自动生成截图框</span>
|
|
||||||
<input type="checkbox" v-model="option.autoCrop">
|
|
||||||
<span>autoCrop: {{ option.autoCrop}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>自动生成截图框的宽高</span>
|
|
||||||
<span>宽度: </span><input type="number" v-model="option.autoCropWidth">
|
|
||||||
<span>高度: </span><input type="number" v-model="option.autoCropHeight">
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>截图框是否限制在图片里(只有在自动生成截图框时才能生效)</span>
|
|
||||||
<input type="checkbox" v-model="option.centerBox">
|
|
||||||
<span>centerBox: {{ option.centerBox}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>是否按照截图框比例输出 默认为1 </span>
|
|
||||||
<input type="number" v-model="option.enlarge">
|
|
||||||
</label>
|
|
||||||
<p>输出图片格式</p>
|
|
||||||
<label class="c-item">
|
|
||||||
<label>jpg <input type="radio" name="type" value="jpeg" v-model="option.outputType"></label>
|
|
||||||
<label>png <input type="radio" name="type" value="png" v-model="option.outputType"></label>
|
|
||||||
<label>webp <input type="radio" name="type" value="webp" v-model="option.outputType"></label>
|
|
||||||
</label>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<codes>
|
|
||||||
<view slot="body">{{ code1 }}</view>
|
|
||||||
</codes>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import VueCropper from "@/components/picture-cut/vue-cropper/vue-cropper.vue";
|
|
||||||
// import { VueCropper } from '../test'
|
|
||||||
|
|
||||||
import codes from "@/components/picture-cut/code.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data: function() {
|
|
||||||
return {
|
|
||||||
model: false,
|
|
||||||
modelSrc: "",
|
|
||||||
crap: false,
|
|
||||||
previews: {},
|
|
||||||
lists: [
|
|
||||||
// {
|
|
||||||
// img: 'https://fengyuanchen.github.io/cropper/images/picture.jpg'
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
img: "http://cdn.xyxiao.cn/Landscape_1.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
img: "http://cdn.xyxiao.cn/Landscape_2.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
img: "http://cdn.xyxiao.cn/Landscape_3.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
img: "http://cdn.xyxiao.cn/Landscape_4.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
img: "http://cdn.xyxiao.cn/Portrait_1.jpg"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
img: "http://cdn.xyxiao.cn/Portrait_2.jpg"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
option: {
|
|
||||||
img: "",
|
|
||||||
size: 1,
|
|
||||||
full: false,
|
|
||||||
outputType: "png",
|
|
||||||
canMove: true,
|
|
||||||
fixedBox: false,
|
|
||||||
original: false,
|
|
||||||
canMoveBox: true,
|
|
||||||
autoCrop: true,
|
|
||||||
// 只有自动截图开启 宽度高度才生效
|
|
||||||
autoCropWidth: 200,
|
|
||||||
autoCropHeight: 150,
|
|
||||||
centerBox: false,
|
|
||||||
high: false,
|
|
||||||
cropData: {},
|
|
||||||
enlarge: 1,
|
|
||||||
mode: 'contain',
|
|
||||||
maxImgSize: 3000,
|
|
||||||
limitMinSize: [100, 120]
|
|
||||||
},
|
|
||||||
example2: {
|
|
||||||
img: "http://cdn.xyxiao.cn/Landscape_2.jpg",
|
|
||||||
info: true,
|
|
||||||
size: 1,
|
|
||||||
outputType: "jpeg",
|
|
||||||
canScale: true,
|
|
||||||
autoCrop: true,
|
|
||||||
// 只有自动截图开启 宽度高度才生效
|
|
||||||
autoCropWidth: 300,
|
|
||||||
autoCropHeight: 250,
|
|
||||||
fixed: true,
|
|
||||||
// 真实的输出宽高
|
|
||||||
infoTrue: true,
|
|
||||||
fixedNumber: [4, 3]
|
|
||||||
},
|
|
||||||
example3: {
|
|
||||||
img: "http://cdn.xyxiao.cn/Landscape_1.jpg",
|
|
||||||
autoCrop: true,
|
|
||||||
autoCropWidth: 200,
|
|
||||||
autoCropHeight: 200,
|
|
||||||
fixedBox: true
|
|
||||||
},
|
|
||||||
downImg: "#",
|
|
||||||
previewStyle1: {},
|
|
||||||
previewStyle2: {},
|
|
||||||
previewStyle3: {},
|
|
||||||
previewStyle4: {},
|
|
||||||
code0: '',
|
|
||||||
code1: '',
|
|
||||||
code2: '',
|
|
||||||
code3: '',
|
|
||||||
preview3: '',
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changeImg() {
|
|
||||||
this.option.img = this.lists[~~(Math.random() * this.lists.length)].img;
|
|
||||||
},
|
|
||||||
startCrop() {
|
|
||||||
// start
|
|
||||||
this.crap = true;
|
|
||||||
this.$refs.cropper.startCrop();
|
|
||||||
},
|
|
||||||
stopCrop() {
|
|
||||||
// stop
|
|
||||||
this.crap = false;
|
|
||||||
this.$refs.cropper.stopCrop();
|
|
||||||
},
|
|
||||||
clearCrop() {
|
|
||||||
// clear
|
|
||||||
this.$refs.cropper.clearCrop();
|
|
||||||
},
|
|
||||||
refreshCrop() {
|
|
||||||
// clear
|
|
||||||
this.$refs.cropper.refresh();
|
|
||||||
},
|
|
||||||
changeScale(num) {
|
|
||||||
num = num || 1;
|
|
||||||
this.$refs.cropper.changeScale(num);
|
|
||||||
},
|
|
||||||
rotateLeft() {
|
|
||||||
this.$refs.cropper.rotateLeft();
|
|
||||||
},
|
|
||||||
rotateRight() {
|
|
||||||
this.$refs.cropper.rotateRight();
|
|
||||||
},
|
|
||||||
finish(type) {
|
|
||||||
// 输出
|
|
||||||
// var test = window.open('about:blank')
|
|
||||||
// test.document.body.innerHTML = '图片生成中..'
|
|
||||||
if (type === "blob") {
|
|
||||||
this.$refs.cropper.getCropBlob(data => {
|
|
||||||
var img = window.URL.createObjectURL(data);
|
|
||||||
this.model = true;
|
|
||||||
this.modelSrc = img;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.$refs.cropper.getCropData(data => {
|
|
||||||
this.model = true;
|
|
||||||
this.modelSrc = data;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 实时预览函数
|
|
||||||
realTime(data) {
|
|
||||||
var previews = data;
|
|
||||||
var h = 0.5;
|
|
||||||
var w = 0.2;
|
|
||||||
|
|
||||||
this.previewStyle1 = {
|
|
||||||
width: previews.w + "px",
|
|
||||||
height: previews.h + "px",
|
|
||||||
overflow: "hidden",
|
|
||||||
margin: "0",
|
|
||||||
zoom: h
|
|
||||||
};
|
|
||||||
|
|
||||||
this.previewStyle2 = {
|
|
||||||
width: previews.w + "px",
|
|
||||||
height: previews.h + "px",
|
|
||||||
overflow: "hidden",
|
|
||||||
margin: "0",
|
|
||||||
zoom: w
|
|
||||||
};
|
|
||||||
|
|
||||||
this.previewStyle3 = {
|
|
||||||
width: previews.w + "px",
|
|
||||||
height: previews.h + "px",
|
|
||||||
overflow: "hidden",
|
|
||||||
margin: "0",
|
|
||||||
zoom: (100 / previews.w)
|
|
||||||
};
|
|
||||||
|
|
||||||
this.previewStyle4 = {
|
|
||||||
width: previews.w + "px",
|
|
||||||
height: previews.h + "px",
|
|
||||||
overflow: "hidden",
|
|
||||||
margin: "0",
|
|
||||||
zoom: (100 / previews.h)
|
|
||||||
};
|
|
||||||
|
|
||||||
this.previews = data;
|
|
||||||
},
|
|
||||||
|
|
||||||
finish2(type) {
|
|
||||||
this.$refs.cropper2.getCropData(data => {
|
|
||||||
this.model = true;
|
|
||||||
this.modelSrc = data;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
finish3(type) {
|
|
||||||
this.$refs.cropper3.getCropData(data => {
|
|
||||||
this.model = true;
|
|
||||||
this.modelSrc = data;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
down(type) {
|
|
||||||
// event.preventDefault()
|
|
||||||
// 输出
|
|
||||||
if (type === "blob") {
|
|
||||||
this.$refs.cropper.getCropBlob(data => {
|
|
||||||
this.downImg = window.URL.createObjectURL(data);
|
|
||||||
if (window.navigator.msSaveBlob) {
|
|
||||||
var blobObject = new Blob([data]);
|
|
||||||
window.navigator.msSaveBlob(blobObject, "demo.png");
|
|
||||||
} else {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.downloadDom.click();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.$refs.cropper.getCropData(data => {
|
|
||||||
this.downImg = data;
|
|
||||||
if (window.navigator.msSaveBlob) {
|
|
||||||
var blobObject = new Blob([data]);
|
|
||||||
window.navigator.msSaveBlob(blobObject, "demo.png");
|
|
||||||
} else {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.downloadDom.click();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
uploadImg(e, num) {
|
|
||||||
//上传图片
|
|
||||||
// this.option.img
|
|
||||||
var file = e.target.files[0];
|
|
||||||
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
|
|
||||||
alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
var reader = new FileReader();
|
|
||||||
reader.onload = e => {
|
|
||||||
let data;
|
|
||||||
if (typeof e.target.result === "object") {
|
|
||||||
// 把Array Buffer转化为blob 如果是base64不需要
|
|
||||||
data = window.URL.createObjectURL(new Blob([e.target.result]));
|
|
||||||
} else {
|
|
||||||
data = e.target.result;
|
|
||||||
}
|
|
||||||
if (num === 1) {
|
|
||||||
this.option.img = data;
|
|
||||||
} else if (num === 2) {
|
|
||||||
this.example2.img = data;
|
|
||||||
}
|
|
||||||
this.$refs.uploadImg.value = ''
|
|
||||||
};
|
|
||||||
// 转化为base64
|
|
||||||
// reader.readAsDataURL(file)
|
|
||||||
// 转化为blob
|
|
||||||
reader.readAsArrayBuffer(file);
|
|
||||||
},
|
|
||||||
imgLoad(msg) {
|
|
||||||
console.log(msg);
|
|
||||||
},
|
|
||||||
|
|
||||||
cropMoving(data) {
|
|
||||||
this.option.cropData = data;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
VueCropper,
|
|
||||||
codes
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.changeImg();
|
|
||||||
// hljs.configure({useBR: true})
|
|
||||||
var list = [].slice.call(document.querySelectorAll("pre code"));
|
|
||||||
list.forEach((val, index) => {
|
|
||||||
hljs.highlightBlock(val);
|
|
||||||
});
|
|
||||||
// console.log(this.$refs.cropper)
|
|
||||||
this.code0 = `
|
|
||||||
npm install vue-cropper
|
|
||||||
// 组件内使用
|
|
||||||
import { VueCropper } from 'vue-cropper'
|
|
||||||
components: {
|
|
||||||
VueCropper,
|
|
||||||
},
|
|
||||||
|
|
||||||
// main.js里面使用
|
|
||||||
import VueCropper from 'vue-cropper'
|
|
||||||
|
|
||||||
Vue.use(VueCropper)
|
|
||||||
|
|
||||||
// cdn方式使用
|
|
||||||
<script src="vuecropper.js">\<\/script>
|
|
||||||
Vue.use(window['vue-cropper'])
|
|
||||||
|
|
||||||
<vueCropper
|
|
||||||
ref="cropper"
|
|
||||||
:img="option.img"
|
|
||||||
:outputSize="option.size"
|
|
||||||
:outputType="option.outputType"
|
|
||||||
></vueCropper>
|
|
||||||
`
|
|
||||||
this.code1 = `
|
|
||||||
<view class="show-info">
|
|
||||||
<h2>example1 基本例子 无限制</h2>
|
|
||||||
<view class="test test1">
|
|
||||||
<vueCropper
|
|
||||||
ref="cropper"
|
|
||||||
:img="option.img"
|
|
||||||
:outputSize="option.size"
|
|
||||||
:outputType="option.outputType"
|
|
||||||
:info="true"
|
|
||||||
:full="option.full"
|
|
||||||
:canMove="option.canMove"
|
|
||||||
:canMoveBox="option.canMoveBox"
|
|
||||||
:fixedBox="option.fixedBox"
|
|
||||||
:original="option.original"
|
|
||||||
:autoCrop="option.autoCrop"
|
|
||||||
:autoCropWidth="option.autoCropWidth"
|
|
||||||
:autoCropHeight="option.autoCropHeight"
|
|
||||||
:centerBox="option.centerBox"
|
|
||||||
:high="option.high"
|
|
||||||
:infoTrue="option.infoTrue"
|
|
||||||
@realTime="realTime"
|
|
||||||
@imgLoad="imgLoad"
|
|
||||||
@cropMoving="cropMoving"
|
|
||||||
:enlarge="option.enlarge"
|
|
||||||
></vueCropper>
|
|
||||||
</view>
|
|
||||||
<view class="test-button">
|
|
||||||
<button @click="changeImg" class="btn">changeImg</button>
|
|
||||||
<label class="btn" for="uploads">upload</label>
|
|
||||||
<input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">
|
|
||||||
<button @click="startCrop" v-if="!crap" class="btn">start</button>
|
|
||||||
<button @click="stopCrop" v-else class="btn">stop</button>
|
|
||||||
<button @click="clearCrop" class="btn">clear</button>
|
|
||||||
<button @click="refreshCrop" class="btn">refresh</button>
|
|
||||||
<button @click="changeScale(1)" class="btn">+</button>
|
|
||||||
<button @click="changeScale(-1)" class="btn">-</button>
|
|
||||||
<button @click="rotateLeft" class="btn">rotateLeft</button>
|
|
||||||
<button @click="rotateRight" class="btn">rotateRight</button>
|
|
||||||
<button @click="finish('base64')" class="btn">preview(base64)</button>
|
|
||||||
<button @click="finish('blob')" class="btn">preview(blob)</button>
|
|
||||||
<a @click="down('base64')" class="btn">download(base64)</a>
|
|
||||||
<a @click="down('blob')" class="btn">download(blob)</a>
|
|
||||||
<a :href="downImg" download="demo.png" ref="downloadDom"></a>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<p>截图框大小</p>
|
|
||||||
<view class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
|
|
||||||
'margin': '5px'}">
|
|
||||||
<view :style="previews.view">
|
|
||||||
<img :src="previews.url" :style="previews.img">
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<p>中等大小</p>
|
|
||||||
<view :style="previewStyle1">
|
|
||||||
<view :style="previews.view">
|
|
||||||
<img :src="previews.url" :style="previews.img">
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<p>迷你大小</p>
|
|
||||||
<view :style="previewStyle2">
|
|
||||||
<view :style="previews.view">
|
|
||||||
<img :src="previews.url" :style="previews.img">
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
|
|
||||||
<view style="display:block; width: 100%;">
|
|
||||||
<label class="c-item">
|
|
||||||
<span>上传图片是否显示原始宽高 (针对大图 可以铺满)</span>
|
|
||||||
<input type="checkbox" v-model="option.original">
|
|
||||||
<span>original: {{ option.original}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>是否根据dpr生成适合屏幕的高清图片</span>
|
|
||||||
<input type="checkbox" v-model="option.high">
|
|
||||||
<span>high: {{ option.high}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>是否输出原图比例的截图</span>
|
|
||||||
<input type="checkbox" v-model="option.full">
|
|
||||||
<span>full: {{ option.full}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>截图信息展示是否是真实的输出宽高</span>
|
|
||||||
<input type="checkbox" v-model="option.infoTrue">
|
|
||||||
<span>infoTrue: {{ option.infoTrue}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>能否拖动图片</span>
|
|
||||||
<input type="checkbox" v-model="option.canMove">
|
|
||||||
<span>canMove: {{ option.canMove}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>能否拖动截图框</span>
|
|
||||||
<input type="checkbox" v-model="option.canMoveBox">
|
|
||||||
<span>canMoveBox: {{ option.canMoveBox}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>截图框固定大小</span>
|
|
||||||
<input type="checkbox" v-model="option.fixedBox">
|
|
||||||
<span>fixedBox: {{ option.fixedBox}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>是否自动生成截图框</span>
|
|
||||||
<input type="checkbox" v-model="option.autoCrop">
|
|
||||||
<span>autoCrop: {{ option.autoCrop}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>截图框是否限制在图片里(只有在自动生成截图框时才能生效)</span>
|
|
||||||
<input type="checkbox" v-model="option.centerBox">
|
|
||||||
<span>centerBox: {{ option.centerBox}}</span>
|
|
||||||
</label>
|
|
||||||
<label class="c-item">
|
|
||||||
<span>是否按照截图框比例输出 默认为1 </span>
|
|
||||||
<input type="number" v-model="option.enlarge">
|
|
||||||
</label>
|
|
||||||
<p>输出图片格式</p>
|
|
||||||
<label class="c-item">
|
|
||||||
<label>jpg <input type="radio" name="type" value="jpeg" v-model="option.outputType"></label>
|
|
||||||
<label>png <input type="radio" name="type" value="png" v-model="option.outputType"></label>
|
|
||||||
<label>webp <input type="radio" name="type" value="webp" v-model="option.outputType"></label>
|
|
||||||
</label>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<codes>
|
|
||||||
<view slot="body">{{ code1 }}</view>
|
|
||||||
</codes>
|
|
||||||
</view>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
margin: auto;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin-bottom: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.test-button {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-block;
|
|
||||||
line-height: 1;
|
|
||||||
white-space: nowrap;
|
|
||||||
cursor: pointer;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #c0ccda;
|
|
||||||
color: #1f2d3d;
|
|
||||||
text-align: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
outline: none;
|
|
||||||
margin: 20px 10px 0px 0px;
|
|
||||||
padding: 9px 15px;
|
|
||||||
font-size: 14px;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #50bfff;
|
|
||||||
border-color: #50bfff;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
text-decoration: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.des {
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
code.language-html {
|
|
||||||
padding: 10px 20px;
|
|
||||||
margin: 10px 0px;
|
|
||||||
display: block;
|
|
||||||
background-color: #333;
|
|
||||||
color: #fff;
|
|
||||||
overflow-x: auto;
|
|
||||||
font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo,
|
|
||||||
Lucida, Sans, Type, Writer, Ubuntu, Mono;
|
|
||||||
border-radius: 5px;
|
|
||||||
white-space: pre;
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-info {
|
|
||||||
margin-bottom: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-info h2 {
|
|
||||||
line-height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*.title, .title:hover, .title-focus, .title:visited {
|
|
||||||
color: black;
|
|
||||||
}*/
|
|
||||||
|
|
||||||
.title {
|
|
||||||
display: block;
|
|
||||||
text-decoration: none;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1.5;
|
|
||||||
margin: 20px 0px;
|
|
||||||
background-image: -webkit-linear-gradient(left,
|
|
||||||
#3498db,
|
|
||||||
#f47920 10%,
|
|
||||||
#d71345 20%,
|
|
||||||
#f7acbc 30%,
|
|
||||||
#ffd400 40%,
|
|
||||||
#3498db 50%,
|
|
||||||
#f47920 60%,
|
|
||||||
#d71345 70%,
|
|
||||||
#f7acbc 80%,
|
|
||||||
#ffd400 90%,
|
|
||||||
#3498db);
|
|
||||||
color: transparent;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-size: 200% 100%;
|
|
||||||
animation: slide 5s infinite linear;
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.test {
|
|
||||||
height: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.model {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 10;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
overflow: auto;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.model-show {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.model img {
|
|
||||||
display: block;
|
|
||||||
margin: auto;
|
|
||||||
max-width: 80%;
|
|
||||||
width: auto;
|
|
||||||
user-select: none;
|
|
||||||
background-position: 0px 0px, 10px 10px;
|
|
||||||
background-size: 20px 20px;
|
|
||||||
background-image: linear-gradient(45deg,
|
|
||||||
#eee 25%,
|
|
||||||
transparent 25%,
|
|
||||||
transparent 75%,
|
|
||||||
#eee 75%,
|
|
||||||
#eee 100%),
|
|
||||||
linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-item {
|
|
||||||
display: block;
|
|
||||||
padding: 10px 0;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pre {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pre-item {
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slide {
|
|
||||||
0% {
|
|
||||||
background-position: 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
background-position: -100% 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 1000px) {
|
|
||||||
.content {
|
|
||||||
max-width: 90%;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.test {
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -0,0 +1,182 @@
|
||||||
|
<template>
|
||||||
|
<view class="rootview">
|
||||||
|
<button @click="gotoAppPermissionSetting">打开App权限设置界面</button>
|
||||||
|
|
||||||
|
<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" active-color="#4cd964"></uni-segmented-control>
|
||||||
|
<view>
|
||||||
|
<view v-show="current === 0">
|
||||||
|
<view class="uni-divider">
|
||||||
|
<view class="uni-divider__content">iOS应用权限检查</view>
|
||||||
|
<view class="uni-divider__line"></view>
|
||||||
|
</view>
|
||||||
|
<button :disabled="!isIos" @click="judgeIosPermission('location')">位置权限</button>
|
||||||
|
<button :disabled="!isIos" @click="judgeIosPermission('camera')">摄像头权限</button>
|
||||||
|
<button :disabled="!isIos" @click="judgeIosPermission('photoLibrary')">相册权限</button>
|
||||||
|
<button :disabled="!isIos" @click="judgeIosPermission('record')">麦克风权限</button>
|
||||||
|
<button :disabled="!isIos" @click="judgeIosPermission('push')">推送权限</button>
|
||||||
|
<button :disabled="!isIos" @click="judgeIosPermission('contact')">通讯录权限</button>
|
||||||
|
<button :disabled="!isIos" @click="judgeIosPermission('calendar')">日历权限</button>
|
||||||
|
<button :disabled="!isIos" @click="judgeIosPermission('memo')">备忘录权限</button>
|
||||||
|
|
||||||
|
<view class="uni-divider">
|
||||||
|
<view class="uni-divider__content">iOS的设备状态监测</view>
|
||||||
|
<view class="uni-divider__line"></view>
|
||||||
|
</view>
|
||||||
|
<view class="commontitle">与手机相关，与应用无关</view>
|
||||||
|
<button :disabled="!isIos" @click="checkSystemLocationStatus">检查设备的位置服务是否开启</button>
|
||||||
|
</view>
|
||||||
|
<view v-show="current === 1">
|
||||||
|
<view class="uni-divider">
|
||||||
|
<view class="uni-divider__content">Android应用权限检查</view>
|
||||||
|
<view class="uni-divider__line"></view>
|
||||||
|
</view>
|
||||||
|
<view class="commontitle">除非同意或永久拒绝，否则会弹框</view>
|
||||||
|
<button :disabled="isIos" @click="requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION')">位置权限</button>
|
||||||
|
<button :disabled="isIos" @click="requestAndroidPermission('android.permission.ACCESS_COARSE_LOCATION')">模糊位置权限(蓝牙\ble依赖)</button>
|
||||||
|
<button :disabled="isIos" @click="requestAndroidPermission('android.permission.CAMERA')">摄像头权限</button>
|
||||||
|
<button :disabled="isIos" @click="requestAndroidPermission('android.permission.READ_EXTERNAL_STORAGE')">外部存储(含相册)读取权限</button>
|
||||||
|
<button :disabled="isIos" @click="requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE')">外部存储(含相册)写入权限</button>
|
||||||
|
<button :disabled="isIos" @click="requestAndroidPermission('android.permission.RECORD_AUDIO')">麦克风权限</button>
|
||||||
|
<button :disabled="isIos" @click="requestAndroidPermission('android.permission.READ_CONTACTS')">通讯录读取权限</button>
|
||||||
|
<button :disabled="isIos" @click="requestAndroidPermission('android.permission.WRITE_CONTACTS')">通讯录写入权限</button>
|
||||||
|
<button :disabled="isIos" @click="requestAndroidPermission('android.permission.READ_CALENDAR')">日历读取权限</button>
|
||||||
|
<button :disabled="isIos" @click="requestAndroidPermission('android.permission.WRITE_CALENDAR')">日历写入权限</button>
|
||||||
|
<button :disabled="isIos" @click="requestAndroidPermission('android.permission.READ_SMS')">短信读取权限</button>
|
||||||
|
<button :disabled="isIos" @click="requestAndroidPermission('android.permission.SEND_SMS')">短信发送权限</button>
|
||||||
|
<button :disabled="isIos" @click="requestAndroidPermission('android.permission.RECEIVE_SMS')">接收新短信权限</button>
|
||||||
|
<button :disabled="isIos" @click="requestAndroidPermission('android.permission.READ_PHONE_STATE')">获取手机识别码等信息的权限</button>
|
||||||
|
<button :disabled="isIos" @click="requestAndroidPermission('android.permission.CALL_PHONE')">拨打电话权限</button>
|
||||||
|
<button :disabled="isIos" @click="requestAndroidPermission('android.permission.READ_CALL_LOG')">获取通话记录权限</button>
|
||||||
|
|
||||||
|
<view class="uni-divider">
|
||||||
|
<view class="uni-divider__content">Android的设备状态监测</view>
|
||||||
|
<view class="uni-divider__line"></view>
|
||||||
|
</view>
|
||||||
|
<view class="commontitle">与手机相关，与应用无关</view>
|
||||||
|
<button :disabled="isIos" @click="checkSystemLocationStatus">检查设备的位置服务是否开启</button>
|
||||||
|
<button :disabled="isIos" @click="gotoAndroidPermissionSetting">打开Android网络设置界面</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import permision from "@/js_sdk/wa-permission/permission.js"
|
||||||
|
import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
uniSegmentedControl
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isIos: true,
|
||||||
|
items: ['iOS', 'Android'],
|
||||||
|
current: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
this.isIos = (plus.os.name == "iOS")
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onClickItem(index) {
|
||||||
|
if (this.current !== index) {
|
||||||
|
this.current = index;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
judgeIosPermission: function(permisionID) {
|
||||||
|
var result = permision.judgeIosPermission(permisionID)
|
||||||
|
console.log(result);
|
||||||
|
var strStatus = (result) ? "已" : "未"
|
||||||
|
uni.showModal({
|
||||||
|
content: permisionID + '权限' + strStatus + "获得授权",
|
||||||
|
showCancel: false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async requestAndroidPermission(permisionID) {
|
||||||
|
var result = await permision.requestAndroidPermission(permisionID)
|
||||||
|
var strStatus
|
||||||
|
if (result == 1) {
|
||||||
|
strStatus = "已获得授权"
|
||||||
|
} else if (result == 0) {
|
||||||
|
strStatus = "未获得授权"
|
||||||
|
} else {
|
||||||
|
strStatus = "被永久拒绝权限"
|
||||||
|
}
|
||||||
|
uni.showModal({
|
||||||
|
content: permisionID + strStatus,
|
||||||
|
showCancel: false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
gotoAppPermissionSetting: function() {
|
||||||
|
permision.gotoAppPermissionSetting()
|
||||||
|
},
|
||||||
|
checkSystemLocationStatus: function() {
|
||||||
|
uni.showModal({
|
||||||
|
content: '本机的位置服务开启状态：' + permision.checkSystemEnableLocation(),
|
||||||
|
showCancel: false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
gotoAndroidPermissionSetting: function() {
|
||||||
|
var main = plus.android.runtimeMainActivity(); //获取activity
|
||||||
|
var Intent = plus.android.importClass('android.content.Intent');
|
||||||
|
var Settings = plus.android.importClass('android.provider.Settings');
|
||||||
|
var intent = new Intent(Settings.ACTION_WIRELESS_SETTINGS); //可设置http://ask.dcloud.net.cn/question/14732这里所有Action字段
|
||||||
|
main.startActivity(intent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
page {
|
||||||
|
background-color: #F4F5F6;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: 15px;
|
||||||
|
color: #007AFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rootview {
|
||||||
|
padding: 0 15px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分界线 */
|
||||||
|
.uni-divider {
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-divider__content {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #999999;
|
||||||
|
padding: 0 10px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 101;
|
||||||
|
background: #F4F5F6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-divider__line {
|
||||||
|
background-color: #CCCCCC;
|
||||||
|
height: 1px;
|
||||||
|
width: 99%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 100;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
transform: translateY(50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.commontitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999999;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -23,34 +23,10 @@
|
||||||
<view class="col9">{{cacheSize}}</view>
|
<view class="col9">{{cacheSize}}</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
<view class="bacf pad30 disjbac mar-s20 bbot">
|
<view class="bacf pad30 disjbac mar-s20 bbot" @tap="chooseEv(index)" v-for="(item,index) in dataList" :key="index">
|
||||||
<view>上门服务条款</view>
|
<view>{{item.title}}</view>
|
||||||
<view class="disac col9">
|
<view class="disac col9">
|
||||||
V3.0<i class="icon icon-next col9 mar-z20" style="font-size: 26rpx;"></i>
|
<i class="icon icon-next col9 mar-z20" style="font-size: 26rpx;"></i>
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="bacf pad30 disjbac bbot">
|
|
||||||
<view>用户服务协议</view>
|
|
||||||
<view class="disac col9">
|
|
||||||
V1.1<i class="icon icon-next col9 mar-z20" style="font-size: 26rpx;"></i>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="bacf pad30 disjbac bbot">
|
|
||||||
<view>飞猴云服务隐私政策</view>
|
|
||||||
<view class="disac col9">
|
|
||||||
V1.2<i class="icon icon-next col9 mar-z20" style="font-size: 26rpx;"></i>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="bacf pad30 disjbac bbot">
|
|
||||||
<view>技术服务合作协议</view>
|
|
||||||
<view class="disac col9">
|
|
||||||
V1.1<i class="icon icon-next col9 mar-z20" style="font-size: 26rpx;"></i>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="bacf pad30 disjbac bbot">
|
|
||||||
<view>关于飞猴云服务</view>
|
|
||||||
<view class="disac col9">
|
|
||||||
V1.1<i class="icon icon-next col9 mar-z20" style="font-size: 26rpx;"></i>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- #ifdef APP-PLUS -->
|
<!-- #ifdef APP-PLUS -->
|
||||||
|
|
@ -75,6 +51,9 @@
|
||||||
voiceStatus:false,//是否开启语音提醒
|
voiceStatus:false,//是否开启语音提醒
|
||||||
newsStatus:false,//是否开启接受新消息通知
|
newsStatus:false,//是否开启接受新消息通知
|
||||||
cacheSize:'754.72 KB',//缓存数据大小
|
cacheSize:'754.72 KB',//缓存数据大小
|
||||||
|
dataList:[
|
||||||
|
{title:'ios/android的权限判断和提示'},
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
@ -130,6 +109,14 @@
|
||||||
// 检测版本事件
|
// 检测版本事件
|
||||||
checkEdition(){
|
checkEdition(){
|
||||||
console.log('检测版本事件');
|
console.log('检测版本事件');
|
||||||
|
},
|
||||||
|
chooseEv(index){
|
||||||
|
let arr = [
|
||||||
|
'/pagesB/permission/permission',
|
||||||
|
]
|
||||||
|
uni.navigateTo({
|
||||||
|
url:arr[index]
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue