文件上传完善

wjt

2024-06-21 44fe1eda9e4106ae105030fb548688812ba1d1e2

文件上传完善

 policy/components/mine.vue

@@ -2,7 +2,8 @@
    <view class="page-mine-box">
        <view class="top-box">
            <view class="user-news">
                <u-avatar :src="src"></u-avatar>
                <!-- <u-avatar :src="src"></u-avatar> -->
                <image src="/static/policy/header.png" mode="widthFix"></image>
                <view class="user-info">
                    <view class="user-name">
                        <view class="inckname">刘小雅</view>
@@ -22,7 +23,8 @@
            </view>
            <view class="show-phone-number" @click="goChangePhone">
                <view class="set-flex">
                    <u-icon name="phone" size="22"></u-icon>
                    <!-- <u-icon name="phone" size="22"></u-icon> -->
                    <image src="/static/policy/phone.png" mode="widthFix"></image>
                    <text class="change" >修改手机号</text>
                </view>
                <u-icon name="arrow-right"></u-icon>
@@ -38,7 +40,7 @@
    export default {
        data(){
            return {
                src: ''
                src: '/static/policy/header.png'
            }
        },
        methods: {
@@ -64,6 +66,12 @@
                display: flex;
                justify-content: flex-start;
                align-items: center;
                image{
                    width: 108rpx;
                    height: 108rpx;
                    background-color: white;
                    border-radius: 50%;
                }
                .user-info{
                    margin-left: 24rpx;
                    color: white;
@@ -71,6 +79,7 @@
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin-bottom: 24rpx;
                        .direc{
                            width: 2rpx ;
                            height: 20rpx;
@@ -112,6 +121,10 @@
                margin-left: 20rpx;
                color: #202D44FF;
            }
            image{
                width: 44rpx;
                height: 44rpx;
            }
        }
        .logout{
            text-align: center;
@@ -127,5 +140,8 @@
            position: fixed;
            bottom: 180rpx;
        }
        .inckname{
            font-size: 36rpx;
        }
    }
</style>

 policy/components/upload.vue

New file
@@ -0,0 +1,94 @@
<template>
    <view>
        <view class="grid-box">
            <view class="image-box" v-for="(item,index) in imageList" :key="index">
                <image :src="item" mode="aspectFit"></image>
                <image src="/static/policy/close.png" mode="widthFix" @click="delImage(index)" class="close"></image>
            </view>
            <view class="cam-box" @click="upload" v-if="imageList.length < max">
                <image src="/static/policy/carmea.png" mode="widthFix"></image>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            max: {
                type: Number,
                default: 9
            },
            maxSize: {
                type: Number,
                default: 2 * 1024 * 1024
            }
        },
        data() {
            return {
                imageList: []
            }
        },
        methods: {
            upload() {
                uni.chooseImage({
                    count: 9 - this.imageList.length,
                    success: val => {
                        const value = val.tempFiles.every(item => item.size < this.maxSize)
                        if(!value){
                            uni.showToast({
                                title: '照片尺寸过大',
                                icon: 'none'
                            })
                            return
                        }
                        this.imageList.push(val.tempFilePaths[0])
                    }
                })
            },
            delImage(index) {
                this.imageList.splice(index,1)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .cam-box{
        background-color: #F4F4F4;
        border-radius: 10rpx;
        width: 200rpx;
        height: 200rpx;
        text-align: center;
        line-height: 200rpx;
        image{
            width: 28rpx;
            height: 28rpx;
        }
    }
    .grid-box{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20rpx;
    }
    .image-box{
        width: 200rpx;
        height: 200rpx;
        border-radius: 10rpx;
        position: relative;
        image{
            width: 100%;
            height: 100%;
            border: 2rpx solid #F4F4F4;
            border-radius: 10rpx;
        }
        .close{
            width: 44rpx;
            height: 44rpx;
            position: absolute;
            top: -20rpx;
            right: -20rpx;
            border: none;
        }
    }
</style>

 policy/reportDetails/reportDetails.scss

@@ -63,4 +63,12 @@
            color: white;
            padding: 20rpx 0;
        }
    }
    .show-hint{
        color: #FE7B32;
        padding: 14rpx 16rpx;
        font-size: 24rpx;
        background: #fea0320d;
        border-radius: 8rpx;
        margin: 24rpx 0;
    }

 policy/reportDetails/reportDetails.vue

@@ -32,27 +32,34 @@
            <view class="form-input">
                <view class="form-input-item">
                    <view class="form-label require">执法结果</view>
                    <u-textarea count v-model="form.reasoon" maxlength="500"></u-textarea>
                    <u-textarea placeholder="请输入..." count v-model="form.reasoon" maxlength="500"></u-textarea>
                </view>
				
                <view class="form-input-item">
                    <view class="form-label require">执法照片</view>
                    <view>
                        <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
                            :maxCount="10"></u-upload>
                        <view class="show-hint">可上传9张图，单张不得超过10m</view>
                    </view>
                    <view>
                        <uploadImage></uploadImage>
                    </view>
                </view>
            </view>
        </view>
        <view class="down">
            <view class="button">
                上报记录
                上报结果
            </view>
        </view>
    </view>
</template>

<script>
    import uploadImage from '@/policy/components/upload.vue'
    export default {
        components: {
            uploadImage
        },
        data() {
            return {
                form: {
@@ -106,6 +113,7 @@
                    });
                })
            },
			
        }
    }
</script>

 policy/reportPage/reportPage.vue

@@ -104,7 +104,7 @@
        methods: {
            goReport() {
                uni.navigateTo({
                    url: `/policy/reportRecord/reportRecord`
                    url: `/policy/reportDetails/reportDetails`
                })
            },
            goRecord() {

 static/policy/carmea.png

 static/policy/close.png

 static/policy/header.png

 static/policy/phone.png