jjx-wap-sign-only/pages/junk/apply.vue

<template>
    <view class="wrap">
        <!-- 吸顶 -->
        <u-sticky offset-top="0" customNavHeight="0">
            <!-- 顶部 -->
            <uititle title="提交报价"></uititle>
        </u-sticky>
        <quote-remain-num v-if="reloaded"  :amount="sheet.quoteAmount" type="old" :id="formData.sheetId"/>
        <view class="layout layout-title m-top-20">填写报价信息</view>
        <view class="layout layout-publish m-top-20 bg-white">
            <view class="card-title m-top-30">报价信息</view>
            <view class="group flex align-center m-top-30">
                <view class="lb need m-right-20">总价(人民币:元):</view>
                <view class="vl flex-1">
                    <u--input
                        placeholder="请输入内容"
                        border="surround"
                        v-model="formData.totalPrice"
                        suffixIcon="元"
                        suffixIconStyle="font-size: 24rpx;color: #909399"
                    ></u--input>
                </view>
            </view>
            <view class="group flex align-center m-top-30">
                <view class="lb m-right-20">报价单详情:</view>
                <view class="vl flex-1">
                    <u--input
                        placeholder="请输入报价单详情"
                        border="surround"
                        v-model="formData.remark"
                        suffixIconStyle="font-size: 24rpx;color: #909399"
                    ></u--input>
                </view>
            </view>
            <view class="card-title m-top-30">附件信息</view>
            <view class="group m-top-20">
                <view class="lb m-right-20">附件内容:</view>
                <view class="flex justify-between align-center m-top-20">
                    <view class="lbx flex-1">仅支持PDF</view>
<!--                    <view class="download">报价单样板下载</view>-->
                </view>
                <view class="m-top-30">
                    <u-upload
                        accept="file"
                        :fileList="formData.files"
                        @afterRead="afterRead"
                        @delete="deletePic"
                        name="1"
                        multiple
                        :maxCount="10"
                    ></u-upload>
                </view>
            </view>
            <u-button class="public-btn m-top-30" text="提交报价" @click="addCoop"></u-button>
        </view>
    </view>
</template>

<script>
import uititle from '@/components/common/title'
import dayjs from "dayjs";
import QuoteRemainNum from "@/components/quote-remain-num/quote-remain-num.vue";
import md5 from "js-md5";

export default {
    components: {
        QuoteRemainNum,
        uititle,
    },
    data() {
        return {
            current: 0,
            radioEnum: [
                {value: 0, name: '是',},
                {value: 0, name: '否',}
            ],
            formData: {
                sheetId: null,
                totalPrice: null,
                files: [],
                remark: '',
            },
            reloaded: false,
            sheet: null,
        };
    },
    methods: {
        getDetail() {
            this.reloaded = false
            vk.callFunction({
                url: 'client/old/pub/getDetail',
                title: '请求中...',
                data: {
                    id: this.formData.sheetId
                },
                success: (res) => {
                    this.sheet = res
                    this.reloaded = true
                }
            }).catch(err => {
                if (err.code === -1) {
                    setTimeout(() => {
                        vk.navigateBack()
                    }, 1500)
                }
            })
        },
        addCoop() {
            if (!this.formData.totalPrice) return this.$message.error('请填写金额')
            if (this.formData.files.length > 0) this.formData.files = this.formData.files.map(item => item.url)
            vk.callFunction({
                url: 'client/old/kh/addQuote',
                data: this.formData
            })
            this.$message.success('提交成功')
            uni.navigateBack()
        },
        afterRead({file}) {
            for (let i = 0; i < file.length; i++) {
                const item = file[i]
                if (item.type !== 'application/pdf') {
                    uni.showToast({
                        title: '请上传PDF文件',
                        icon: 'none'
                    })
                    return
                }
                uniCloud.uploadFile({
                    filePath: item.url,
                    cloudPath: dayjs().format('YYYY/MM/DD') + '/' + md5(item.name + Date.now().toString()) + '.pdf',
                    success: ({fileID}) => {
                        uniCloud.getTempFileURL({
                            fileList: [fileID]
                        }).then(res => {
                            this.formData.files.push({
                                url: res.fileList[0].tempFileURL,
                                name: item.name
                            })
                        })
                    }
                })
            }
        },
        deletePic({index}) {
            this.formData.files.splice(index, 1)
        },
    },
    onLoad({id}) {
        this.formData.sheetId = id
        this.getDetail()
    },
    onShow() {
        this.reloaded = false
        setTimeout(() => {
            this.reloaded = true
        }, 500)
    }
}
</script>

<style lang="scss">
.layout-title {
    padding: 20rpx 30rpx;
    font-size: 28rpx;
    font-weight: 600;
    line-height: 44rpx;
    color: #A92924;
}

.card-title {
    position: relative;
    padding-left: 20rpx;
    font-size: 26rpx;
    font-weight: 600;
    line-height: 48rpx;
    color: #A92924;

    &:before {
        position: absolute;
        left: 0;
        top: 50%;
        z-index: 9;
        margin-top: -14rpx;
        content: '';
        width: 4rpx;
        height: 28rpx;
        background: #A92924;
    }
}

.public-btn {
    width: 80%;
    margin-top: 60rpx;
    color: #ffffff;
    background: #A92924;
}

.layout-publish {
    margin: 20rpx 30rpx;
    padding: 50rpx 30rpx;
    border-radius: 18rpx;
}

.tag-title {
    font-size: 26rpx;
    line-height: 40rpx;
    color: #000000;

    .limit {
        font-size: 24rpx;
        color: #999999;
    }
}

.tag-box {
    padding: 20rpx 0;

    .item {
        padding: 6rpx 10rpx;
        font-size: 24rpx;
        line-height: 32rpx;
        color: #555555;
    }

    .active {
        color: #A92924;
    }
}

.lb, .fix {
    position: relative;
    font-size: 26rpx;
    line-height: 40rpx;
    color: #666666;
}

.lbx {
    font-size: 24rpx;
    color: #999999;
}

.download {
    padding: 8rpx 20rpx;
    font-size: 24rpx;
    line-height: 36rpx;
    color: #A92924;
    border: 1px solid #A92924;
}

.need::before {
    position: absolute;
    left: -16rpx;
    top: 50%;
    z-index: 9;
    margin-top: -12rpx;
    content: '*';
    color: #A92924;
    font-size: 32rpx;
    line-height: 1;
}
</style>