264 lines
7.3 KiB
Vue
264 lines
7.3 KiB
Vue
<template>
|
||
<view>
|
||
<page-head :title="title"></page-head>
|
||
<view class="uni-common-mt">
|
||
<form>
|
||
|
||
<view class="uni-list list-pd">
|
||
<view class="uni-list-cell cell-pd">
|
||
<view class="uni-uploader">
|
||
<view class="uni-uploader-head">
|
||
<view class="uni-uploader-title">选择照片</view>
|
||
<view class="uni-uploader-info">{{imageList.length}}</view>
|
||
</view>
|
||
<view class="uni-uploader-body">
|
||
<view class="uni-uploader__files">
|
||
<block v-for="(image,index) in imageList" :key="index">
|
||
<view class="uni-uploader__file">
|
||
<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
|
||
</view>
|
||
</block>
|
||
<view class="uni-uploader__input-box">
|
||
<view class="uni-uploader__input" @tap="chooseImage"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="uni-list list-pd">
|
||
<view class="uni-list-cell cell-pd">
|
||
<view class="uni-uploader">
|
||
<view class="uni-uploader-head">
|
||
<view class="uni-uploader-title">水印编辑</view>
|
||
</view>
|
||
<view class="uni-uploader-body">
|
||
<canvas canvas-id="canvas" class="canvas" :start="startStatus" :change:start="canvasStart"
|
||
:data-width="canvasWidth" :data-height="canvasWidth"></canvas>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="uni-list-cell">
|
||
<view class="uni-list-cell-left">
|
||
<view class="uni-label">图片质量</view>
|
||
</view>
|
||
<view class="uni-list-cell-right">
|
||
<picker :range="sizeType" @change="sizeTypeChange" :value="sizeTypeIndex" mode="selector">
|
||
<view class="uni-input">{{sizeType[sizeTypeIndex]}}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="uni-list-cell">
|
||
<view class="uni-list-cell-left">
|
||
<view class="uni-label">数量限制</view>
|
||
</view>
|
||
<view class="uni-list-cell-right">
|
||
<picker :range="count" @change="countChange" mode="selector">
|
||
<view class="uni-input">{{count[countIndex]}}</view>
|
||
</picker>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import permision from "@/common/permission.js"
|
||
var sourceType = [
|
||
['camera'],
|
||
['album'],
|
||
['camera', 'album']
|
||
]
|
||
var sizeType = [
|
||
['compressed'],
|
||
['original'],
|
||
['compressed', 'original']
|
||
]
|
||
export default {
|
||
data() {
|
||
return {
|
||
title: 'choose/previewImage',
|
||
imageList: [],
|
||
sourceTypeIndex: 2,
|
||
sourceType: ['拍照', '相册', '拍照或相册'],
|
||
sizeTypeIndex: 2,
|
||
sizeType: ['压缩', '原图', '压缩或原图'],
|
||
countIndex: 8,
|
||
count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||
|
||
// canvas
|
||
canvasWidth: 0,
|
||
startStatus: false,
|
||
}
|
||
},
|
||
onReady: function() {
|
||
this.$nextTick(() => {
|
||
uni.createSelectorQuery().select(".canvas").boundingClientRect(data => {
|
||
this.canvasWidth = data.width
|
||
// #ifdef APP-PLUS || H5
|
||
this.startStatus = true
|
||
// #endif
|
||
// #ifndef APP-PLUS || H5
|
||
ctx = uni.createCanvasContext('canvas')
|
||
this.drawBall()
|
||
// #endif
|
||
}).exec()
|
||
})
|
||
},
|
||
onUnload() {
|
||
this.imageList = [],
|
||
this.sourceTypeIndex = 2,
|
||
this.sourceType = ['拍照', '相册', '拍照或相册'],
|
||
this.sizeTypeIndex = 2,
|
||
this.sizeType = ['压缩', '原图', '压缩或原图'],
|
||
this.countIndex = 8;
|
||
},
|
||
methods: {
|
||
canvasStart(newVal, oldVal, owner, ins) {
|
||
let canvasWidth = ins.getDataset().width,
|
||
canvasHeight = ins.getDataset().height,
|
||
canvasEle = document.querySelectorAll('.canvas>canvas')[0],
|
||
ctx = canvasEle.getContext('2d')
|
||
ctx.fillStyle = "#FF0000"
|
||
console.log("111")
|
||
},
|
||
sourceTypeChange: function(e) {
|
||
this.sourceTypeIndex = parseInt(e.detail.value)
|
||
},
|
||
sizeTypeChange: function(e) {
|
||
this.sizeTypeIndex = parseInt(e.detail.value)
|
||
},
|
||
countChange: function(e) {
|
||
this.countIndex = e.detail.value;
|
||
},
|
||
chooseImage: async function() {
|
||
// #ifdef APP-PLUS
|
||
// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
|
||
if (this.sourceTypeIndex !== 2) {
|
||
let status = await this.checkPermission();
|
||
if (status !== 1) {
|
||
return;
|
||
}
|
||
}
|
||
// #endif
|
||
|
||
if (this.imageList.length === 9) {
|
||
let isContinue = await this.isFullImg();
|
||
console.log("是否继续?", isContinue);
|
||
if (!isContinue) {
|
||
return;
|
||
}
|
||
}
|
||
uni.chooseImage({
|
||
sourceType: sourceType[this.sourceTypeIndex],
|
||
sizeType: sizeType[this.sizeTypeIndex],
|
||
count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
|
||
success: (res) => {
|
||
this.imageList = this.imageList.concat(res.tempFilePaths);
|
||
},
|
||
fail: (err) => {
|
||
// #ifdef APP-PLUS
|
||
if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
|
||
this.checkPermission(err.code);
|
||
}
|
||
// #endif
|
||
// #ifdef MP
|
||
uni.getSetting({
|
||
success: (res) => {
|
||
let authStatus = false;
|
||
switch (this.sourceTypeIndex) {
|
||
case 0:
|
||
authStatus = res.authSetting['scope.camera'];
|
||
break;
|
||
case 1:
|
||
authStatus = res.authSetting['scope.album'];
|
||
break;
|
||
case 2:
|
||
authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
if (!authStatus) {
|
||
uni.showModal({
|
||
title: '授权失败',
|
||
content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.openSetting()
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
// #endif
|
||
}
|
||
})
|
||
},
|
||
isFullImg: function() {
|
||
return new Promise((res) => {
|
||
uni.showModal({
|
||
content: "已经有9张图片了,是否清空现有图片？",
|
||
success: (e) => {
|
||
if (e.confirm) {
|
||
this.imageList = [];
|
||
res(true);
|
||
} else {
|
||
res(false)
|
||
}
|
||
},
|
||
fail: () => {
|
||
res(false)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
previewImage: function(e) {
|
||
var current = e.target.dataset.src
|
||
uni.previewImage({
|
||
current: current,
|
||
urls: this.imageList
|
||
})
|
||
},
|
||
async checkPermission(code) {
|
||
let type = code ? code - 1 : this.sourceTypeIndex;
|
||
let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) :
|
||
await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
|
||
'android.permission.READ_EXTERNAL_STORAGE');
|
||
|
||
if (status === null || status === 1) {
|
||
status = 1;
|
||
} else {
|
||
uni.showModal({
|
||
content: "没有开启权限",
|
||
confirmText: "设置",
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
permision.gotoAppSetting();
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
return status;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.cell-pd {
|
||
padding: 22rpx 30rpx;
|
||
}
|
||
|
||
.list-pd {
|
||
margin-top: 50rpx;
|
||
}
|
||
</style>
|