119 lines
2.7 KiB
Vue
119 lines
2.7 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="img-grid">
|
||
<view
|
||
v-if="tempImageList.length>0"
|
||
v-for="(img, index) in tempImageList"
|
||
:key="index"
|
||
class="img-item"
|
||
@click="preview(index)"
|
||
>
|
||
<image :src="img" mode="aspectFill" class="img" />
|
||
<view class="del" @click.stop="remove(index)">×</view>
|
||
</view>
|
||
<view v-if="tempImageList.length < maxImages" class="img-item add" @click="beforeAddImages">
|
||
<view class="plus">＋</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { pathToBase64} from "image-tools";
|
||
import { getCameraPermission } from "@/utils/permission.js";
|
||
import isAndroid from "@/utils/platform.js";
|
||
const uuid=ref('');
|
||
const answer_uuid=ref('');
|
||
const maxImages = 6;
|
||
const imgList = ref([]);
|
||
const isLock=ref(false);
|
||
const tempImageList = ref([]);
|
||
const beforeAddImages=()=>{
|
||
addImages();
|
||
};
|
||
const addImages=()=>{
|
||
console.log('执行选择图片')
|
||
uni.chooseImage({
|
||
count:6,
|
||
sizeType: ['original', 'compressed'],
|
||
sourceType: ['album','camera'],
|
||
success: (res)=>{
|
||
uni.showToast({
|
||
title: '选择图片成功',
|
||
icon: 'none'
|
||
})
|
||
//console.log(res.tempFilePaths)
|
||
// tempImageList.value = [...tempImageList.value, ...res.tempFilePaths];
|
||
// for (let i = 0; i < res.tempFilePaths.length; i++) {
|
||
// pathToBase64(res.tempFilePaths[i])
|
||
// .then((base64) => {
|
||
// console.log('转base64成功')
|
||
// imgList.value.push(base64.split(',')[1]);
|
||
// })
|
||
// .catch((error) => {
|
||
// console.log('转base64失败')
|
||
// console.error(error);
|
||
// });
|
||
// }
|
||
// console.log(tempImageList.value)
|
||
// console.log(imgList.value)
|
||
},
|
||
fail: (err)=>{
|
||
console.log(err)
|
||
uni.showToast({
|
||
title: '选择图片失败:'+err.errMsg,
|
||
icon: 'none'
|
||
})
|
||
//console.log('选择图片失败:'+err.errMsg)
|
||
}
|
||
})
|
||
}
|
||
|
||
function preview(index){
|
||
uni.previewImage({
|
||
urls:tempImageList.value,
|
||
current: index
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.content{
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.img-grid{
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 16rpx;
|
||
}
|
||
.img-item{
|
||
position: relative;
|
||
width:150rpx;
|
||
height: 150rpx;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
background: #f0f0f0;
|
||
}
|
||
.img{ width: 100%; height: 100%; }
|
||
.add{ display:flex; align-items:center; justify-content:center;}
|
||
.plus{ font-size: 80rpx; color:#c0c0c0; line-height: 1; }
|
||
.del{
|
||
position: absolute;
|
||
top: 8rpx;
|
||
right: 8rpx;
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
border-radius: 22rpx;
|
||
background: rgba(0,0,0,.5);
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 44rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
</style> |