|
|
@@ -0,0 +1,165 @@
|
|
|
+<template>
|
|
|
+ <view style="flex:1">
|
|
|
+ <!--
|
|
|
+ <camera style="width: 100%; height: 300px;" :resolution="'high'" :mode="'scanCode'" @scancode="handleScanCode">
|
|
|
+ </camera> -->
|
|
|
+ <swiper class="swiper-box my-swiper" :current="swiperDotIndex" :indicator-dots="true" >
|
|
|
+ <swiper-item v-for="item in data" >
|
|
|
+ <view class="swiper-item" @tap="previewSingleImage(item.image)">
|
|
|
+ <image class="my-image" :src="item.image" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+
|
|
|
+ <view class="camera-scan-code-back-wrap">
|
|
|
+ <button class="btn block bg-blue lg round" @click="chooseImage">
|
|
|
+ 浏览相册
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="camera-scan-code-back-wrap">
|
|
|
+ <button class="btn block bg-blue lg round" @click="saveImage">
|
|
|
+ 保存图片
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="camera-scan-code-back-wrap">
|
|
|
+ <button type="default" class="btn bg-blue round" @click="navigateBack">返回拍照</button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ type CameraScanCodeResult = {
|
|
|
+ type : string | null;
|
|
|
+ result : string | null;
|
|
|
+ }
|
|
|
+ type ImageItem={
|
|
|
+ image:string,
|
|
|
+ name:string
|
|
|
+ }
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ result: null as CameraScanCodeResult | null,
|
|
|
+ swiperDotIndex: 0 as number,
|
|
|
+ data: [{
|
|
|
+ image: '/static/images/banner/banner01.png',
|
|
|
+ name: 'banner01.png'
|
|
|
+ },
|
|
|
+ ] as ImageItem[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ let path = options?.['path'] ?? ''
|
|
|
+ console.log(path)
|
|
|
+ if(path!=''){
|
|
|
+ this.data = []
|
|
|
+ this.data.push({image:path, name:''})
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ navigateBack() {
|
|
|
+ uni.navigateBack()
|
|
|
+ },
|
|
|
+ chooseImage() {
|
|
|
+ uni.chooseImage({
|
|
|
+ success: (res) => {
|
|
|
+ //this.data = res.tempFilePaths; // 获取选中的图片路径
|
|
|
+ this.data = []
|
|
|
+ for(let i=0; i<res.tempFilePaths.length; i++){
|
|
|
+ this.data.push({image: res.tempFilePaths[i], name:''})
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.error('选择图片失败', err);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ saveImage() {
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 1, // 默认9
|
|
|
+ sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
|
|
|
+ sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
|
|
|
+ success: (chooseImageRes) => {
|
|
|
+ const tempFilePaths = chooseImageRes.tempFilePaths; // 临时文件路径
|
|
|
+ const tempFiles = chooseImageRes.tempFiles; // 临时文件信息
|
|
|
+
|
|
|
+ //保存图片信息到数据库
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ previewSingleImage(imageUrl:string) {
|
|
|
+ uni.previewImage({
|
|
|
+ urls: [imageUrl], // 需要预览的图片链接列表
|
|
|
+ current: 0, // 当前显示图片的索引
|
|
|
+ indicator: 'number', // 图片指示器样式
|
|
|
+ loop: false // 是否可循环预览
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleScanCode(ev : UniCameraScanCodeEvent) {
|
|
|
+ const deatil = ev.detail;
|
|
|
+ this.result = {
|
|
|
+ type: deatil.type,
|
|
|
+ result: deatil.result
|
|
|
+ } as CameraScanCodeResult
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .camera-scan-code-back-wrap {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .camera-scan-code-table {
|
|
|
+ background-color: white;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ .camera-scan-code-table-pair {
|
|
|
+ height: 60rpx;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .camera-scan-code-table-pair-label {
|
|
|
+ flex-grow: 1;
|
|
|
+ margin-left: 15px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .camera-scan-code-table-pair-value{
|
|
|
+ flex-grow: 2;
|
|
|
+
|
|
|
+ }
|
|
|
+ .camera-scan-code-table-top-line {
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper {
|
|
|
+ height: 300rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-box {
|
|
|
+ height: 150px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-item {
|
|
|
+ /* #ifndef APP-NVUE */
|
|
|
+ display: flex;
|
|
|
+ /* #endif */
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #fff;
|
|
|
+ height: 300rpx;
|
|
|
+ line-height: 300rpx;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ margin-top: 30px;
|
|
|
+ height: 45px;
|
|
|
+ }
|
|
|
+</style>
|
