<template>
<!-- #ifdef APP -->
<scroll-view class="page-scroll-view">
<!-- #endif -->
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<view class="uni-list">
<view class="uni-list-cell cell-pd">
<text class="uni-list-cell-left uni-label">
图片来源
</text>
<view class="uni-list-cell-right" @click="chooseImageSource">
<text class="click-t">{{sourceType[sourceTypeIndex]}}</text>
</view>
</view>
<view class="uni-list-cell cell-pd">
<text class="uni-list-cell-left uni-label">
图片质量
</text>
<view class="uni-list-cell-right" @click="chooseImageType">
<text class="click-t">{{sizeType[sizeTypeIndex]}}</text>
</view>
</view>
<view class="uni-list-cell cell-pd">
<text class="uni-list-cell-left uni-label">
数量限制
</text>
<view class="uni-list-cell-right">
<input class="click-t" :value="count" type="number" :maxlength="1" @blur="chooseImageCount" />
</view>
</view>
<!-- #ifdef APP-ANDROID || APP-IOS -->
<view class="uni-list-cell cell-pd">
<text class="uni-list-cell-left uni-label">
屏幕方向
</text>
<view class="uni-list-cell-right" @click="chooseOrientationType">
<text class="click-t">{{orientationType[orientationTypeIndex]}}</text>
</view>
</view>
<!-- #endif -->
<!-- #ifdef APP-ANDROID -->
<view class="uni-list-cell cell-pd">
<text class="uni-list-cell-left uni-label">
相册模式
</text>
<view class="uni-list-cell-right" @click="albumModeChange">
<text class="click-t">{{albumModeType[albumModeTypeIndex]}}</text>
</view>
</view>
<!-- #endif -->
<view class="uni-list-cell cell-pd">
<text class="uni-list-cell-left uni-label">
图像裁剪
</text>
<view class="uni-list-cell-right">
<switch :checked="isCrop" @change="switchCrop"></switch>
</view>
</view>
<view ref="cropOptionNode" class="crop-option"
:style="{'height':isCrop?'200px':'0px','margin-bottom':isCrop?'11px':'0px'}">
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left item_width">
图片质量(%)
</view>
<view class="uni-list-cell-right">
<input :value="cropPercent" @confirm="cropPercentConfim" type="number" maxlength="-1" />
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left item_width">
裁剪宽度(px)
</view>
<view class="uni-list-cell-right">
<input :value="cropWidth" @confirm="cropWidthConfim" type="number" maxlength="-1" />
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left item_width">
裁剪高度(px)
</view>
<view class="uni-list-cell-right">
<input :value="cropHeight" @confirm="cropHeightConfim" type="number" maxlength="-1" />
</view>
</view>
<view class="uni-list-cell cell-pd">
<view class="uni-list-cell-left item_width">
保留原宽高
</view>
<view class="uni-list-cell-right">
<switch :checked="cropResize" @change="cropResizeChange"></switch>
</view>
</view>
</view>
</view>
<view class="uni-list list-pd" style="padding: 15px;">
<view class="uni-flex" style="margin-bottom: 10px;">
<view class="uni-list-cell-left">点击可预览选好的图片</view>
<view style="margin-left: auto;">
<text class="click-t">{{imageList.length}}/{{count}}</text>
</view>
</view>
<view class="uni-flex" style="flex-wrap: wrap;">
<view v-for="(image,index) in imageList" :key="index" class="uni-uploader__input-box" style="border: 0;">
<image style="width: 104px; height: 104px;" :src="image" :data-src="image" @tap="previewImage(index)">
</image>
<image src="/static/plus.png" class="image-remove" @click="removeImage(index)"></image>
</view>
<image class="uni-uploader__input-box" @tap="chooseImage" src="/static/plus.png"></image>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
var sourceTypeArray = [
['camera'],
['album'],
['camera', 'album']
]
var sizeTypeArray = [
['compressed'],
['original'],
['compressed', 'original']
]
var orientationTypeArray = [
'portrait',
'landscape',
'auto'
]
var albumModeTypeArray = [
"custom",
"system"
]
export default {
data() {
return {
title: 'chooseImage',
imageList: [] as Array<string>,
sourceTypeIndex: 2,
sourceType: ['拍照', '相册', '拍照或相册'],
sizeTypeIndex: 2,
sizeType: ['压缩', '原图', '压缩或原图'],
orientationTypeIndex: 0,
orientationType: ['竖屏', '横屏', '自动'],
albumModeTypeIndex:0,
albumModeType:["自定义相册","系统相册"],
count: 9,
isCrop: false,
cropPercent: 80,
cropWidth: 100,
cropHeight: 100,
cropResize: false
}
},
onHide() {
console.log("Page Hide");
},
onUnload() {
this.imageList = [];
this.sourceTypeIndex = 2
this.sourceType = ['拍照', '相册', '拍照或相册']
this.sizeTypeIndex = 2
this.sizeType = ['压缩', '原图', '压缩或原图']
this.orientationTypeIndex = 0
this.orientationType = ['竖屏', '横屏', '自动']
},
methods: {
cropHeightConfim(e : InputConfirmEvent) {
let value = parseInt(e.detail.value)
if (value > 0) {
this.cropHeight = value
} else {
uni.showToast({
position: "bottom",
title: "裁剪高度需要大于0"
})
}
},
cropWidthConfim(e : InputConfirmEvent) {
let value = parseInt(e.detail.value)
if (value > 0) {
this.cropWidth = value
} else {
uni.showToast({
position: "bottom",
title: "裁剪宽度需要大于0"
})
}
},
cropPercentConfim(e : InputConfirmEvent) {
let value = parseInt(e.detail.value)
if (value > 0 && value <= 100) {
this.cropPercent = value
} else {
uni.showToast({
position: "bottom",
title: "请输入0~100之间的值"
})
}
},
albumModeChange(){
uni.showActionSheet({
itemList: this.albumModeType,
success: (e) => {
this.albumModeTypeIndex = e.tapIndex
}
})
},
cropResizeChange(e : UniSwitchChangeEvent) {
this.cropResize = e.detail.value
},
switchCrop(e : UniSwitchChangeEvent) {
this.isCrop = e.detail.value
},
removeImage(index : number) {
this.imageList.splice(index, 1)
},
chooseImageSource() {
uni.showActionSheet({
itemList: ['拍照', '相册', '拍照或相册'],
success: (e) => {
this.sourceTypeIndex = e.tapIndex
}
})
},
chooseImageType() {
uni.showActionSheet({
itemList: ['压缩', '原图', '压缩或原图'],
success: (e) => {
this.sizeTypeIndex = e.tapIndex
}
})
},
chooseOrientationType(){
uni.showActionSheet({
itemList: ['竖屏', '横屏', '自动'],
success: (e) => {
this.orientationTypeIndex = e.tapIndex
}
})
},
chooseImageCount(event : InputBlurEvent) {
let count = parseInt(event.detail.value)
if (count < 0) {
uni.showToast({
position: "bottom",
title: "图片数量应该大于0"
})
return
}
this.count = count
},
chooseImage: function () {
if (this.imageList.length >= this.count) {
uni.showToast({
position: "bottom",
title: `已经有 ${this.count} 张图片了，请删除部分图片之后重新选择`
})
return
}
uni.chooseImage({
sourceType: sourceTypeArray[this.sourceTypeIndex],
sizeType: sizeTypeArray[this.sizeTypeIndex],
crop: this.isCrop ? { "quality": this.cropPercent, "width": this.cropWidth, "height": this.cropHeight, "resize": this.cropResize } as ChooseImageCropOptions : null,
count: this.count - this.imageList.length,
// #ifdef APP
pageOrientation: orientationTypeArray[this.orientationTypeIndex],
// #endif
// #ifdef APP-ANDROID
albumMode: albumModeTypeArray[this.albumModeTypeIndex],
// #endif
success: (res) => {
this.imageList = this.imageList.concat(res.tempFilePaths);
console.log("this.imageList: ",this.imageList)
},
fail: (err) => {
console.log("err: ", JSON.stringify(err));
uni.showToast({
title:"choose image error.code:" + err.errCode+";message:"+err.errMsg,
position:"bottom"
})
}
})
},
previewImage: function (index : number) {
uni.previewImage({
current: index,
urls: this.imageList
})
}
}
}
</script>
<style>
.cell-pd {
padding: 11px 15px;
}
.click-t {
color: darkgray;
}
.list-pd {
margin-top: 25px;
}
.uni-uploader__input-box {
margin: 5px;
width: 104px;
height: 104px;
border: 1px solid #D9D9D9;
}
.uni-uploader__input {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.image-remove {
transform: rotate(45deg);
width: 25px;
height: 25px;
position: absolute;
top: 0;
right: 0;
border-radius: 13px;
background-color: rgba(200, 200, 200, 0.8);
}
.item_width {
width: 130px;
}
.crop-option {
margin-left: 11px;
margin-right: 11px;
border-radius: 11px;
background-color: #eee;
transition-property: height, margin-bottom;
transition-duration: 200ms;
}
</style>
