GuangYuYuan-shanghu/src/pages/order/businessFormal.vue

<template>
    <view class="lifePhotosEdit">

        <view class="u-cell-group">
            <!-- <Upload :maxCount="1" @fileList="onUpload($event, 'cImgList')" /> -->
            <Upload :maxCount="maxCount" :width="76" :height="76" @fileList="onUpload"
                :fileList="fileList">
                <view class="upload-block" slot="content">

                    <view class="icon-bg">
                        <image src="/static/login/cameraIcon.png" mode="widthFix" style="width: 52rpx;height: 52rpx;">
                        </image>
                        <view style="font-weight: 400;font-size: 26rpx;color: #C9CDD4;margin-top: -13rpx;">上传</view>

                    </view>

                </view>
            </Upload>
            <view class="tagText">请上传到达服务场所后的职业正装大小不超过 2MB 格式为 jpg/png 格式图片</view>



            <view class="footer-bar">
                <u-button :customStyle="{
                    padding: '24rpx 48rpx',
                    color: '#fff',
                    background: 'var(--theme-color-gradient)',
                    width: '654rpx',
                    height: '88rpx',
                    background: '#333335',
                    borderRadius: '60rpx 60rpx 60rpx 60rpx',
                }" @click="onSubmit">确认</u-button>
            </view>
        </view>
    </view>
</template>

<script>
import { startService } from '@/api/order.js'
import clUpload from '@/components/cl-upload/cl-upload/cl-upload.vue'
import Upload from '@/components/upload/index.vue';
import { baseUrl } from '@/common/config.js'

export default {
    components: { Upload, clUpload },

    data() {
        return {
            headers: {
                Authorization: `tf: ${uni.getStorageSync('access-token')}`,
            },
            orderId: '',
            fileList: [],
            fieldName: '',
            title: '',
            mediaType: 'all', // 默认为图片模式，上传第一个文件后确定类型
            uploadApi: baseUrl + '/common/upload', // 默认使用图片上传接口
        }
    },
    computed: {
        maxCount() {
            return 9
        },
    },

    onLoad(query) {
        if (query.orderId) {
            this.orderId = query.orderId
        }

    },
    onReady() {

    },
    onShow() {
    },
    methods: {

        // 处理媒体类型取消事件
        onCancel() {
            this.uploadApi = baseUrl + '/common/uploads'
            this.mediaType = 'all'
        },

        // upload事件
        onUpload(e) {
            this.fileList = e
        },
        goBack() {
            uni.navigateBack()
        },
        onSubmit() {
            console.log(this.fileList, 'fileList')
            if (this.fileList.length == 0) {
                uni.showToast({ title: '请至少上传1张', icon: 'none' });
                return
            }
            startService({
                orderId: this.orderId,
                imageUrls: this.fileList.map(item => item.url)
            }).then(res => {
                if (res.data.code === 200) {
                    uni.showToast({ title: res.data.msg, icon: 'none' });
                    setTimeout(() => {
                        let str = uni.$u.queryParams({
                            id:  this.orderId
                        });
                        uni.navigateTo({
                            url: `/pages/order/order_detail${str}`
                        });
                    }, 1000);

                }else{
                    uni.showToast({ title: res.data.msg, icon: 'none' });
                }
            })
        }

    }
}
</script>

<style scoped lang="scss">
.lifePhotosEdit {
    height: 100vh;
    background-color: #F7F8FA;

    .tagText {
        margin-top: 32rpx;
        font-weight: 400;
        font-size: 26rpx;
        color: #86909C;
    }

    .checkBox {
        padding: 30rpx 32rpx 24rpx 32rpx;
        height: 134rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;

        //color: #FF7D00;
        .checkStatus {
            font-weight: 500;
            font-size: 30rpx;
            text-align: left;
            display: flex;
            align-items: center;

        }

        .contactCustomer {
            width: 144rpx;
            height: 44rpx;
            border-radius: 24rpx 24rpx 24rpx 24rpx;

            font-weight: 400;
            font-size: 26rpx;
            text-align: center;

        }

        .text {
            margin-top: 8rpx;
            font-weight: 400;
            font-size: 26rpx;
            text-align: left;
        }
    }

    ::v-deep .u-cell-group {
        padding: 32rpx;
        background-color: #fff;

        .upload-block {
            width: 160rpx;
            height: 160rpx;
            background-color: #F7F8FA;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 12rpx;
        }

        .u-upload__wrap {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 14rpx;
        }

        .u-upload__button {
            margin: 0 !important;
        }

        .u-upload__wrap__preview {
            margin: 0 !important;
        }

        .u-upload__success {
            display: none;
        }
    }
}

::v-deep .u-upload__success {
    display: none;
}

::v-deep .u-upload__wrap__preview__image {
    border-radius: 12rpx !important;
}

::v-deep .u-upload__deletable {
    border-top-right-radius: 12rpx;
    border-bottom-left-radius: 12rpx;

}

::v-deep .u-upload__deletable__icon {
    position: static !important;
    -webkit-transform: scale(0.8) !important;

}

.media-area {
    margin: 20rpx 0 20rpx;
    justify-content: space-between;
    position: relative;
    width: 340upx;
    height: 240upx;

    .icon-cuo {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        right: 0;
        top: 0;
        color: #ffffff !important;
        z-index: 999;
        border-bottom-left-radius: 12rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }



    .video-container {
        width: 340upx;
        height: 240upx;
        border-radius: 12rpx;
    }
}
</style>