jjx-web/pages/index/self-support/quote.vue

<template>
    <view>
        <top-bar></top-bar>
        <common-header></common-header>
        <category-bar></category-bar>

        <view class="page-nav">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>
                    <navigator style="display: inline-block;" url="/pages/self-support/self-support">金久信自营</navigator>
                </el-breadcrumb-item>
                <el-breadcrumb-item>填写报价信息</el-breadcrumb-item>
            </el-breadcrumb>
        </view>

        <view class="page-main">
            <quote-remain-num v-if="reloaded"/>
            <vk-data-form
                ref="form1"
                v-model="form1.data"
                :action="form1.props.action"
                :columns="form1.props.columns"
                :rules="form1.props.rules"
                :form-type="form1.props.formType"
                :loading.sync="form1.props.loading"
                :auto-close="false"
                :show-cancel="false"
                label-width="160px"
                @success="onFormSuccess"
            >
                <template v-slot:desc>
                    <span>{{ sheet.desc }}</span>
                </template>
                <template v-slot:amount>
                    <el-input v-model="form1.data.amount" placeholder="请输入货款总价" @change="formatNumber"></el-input>
                </template>
                <template v-slot:sheetFile="{ row, column, index }">
                    <p v-for="(item, index) in sheet.files" :key="index" class="text-main">
                        <a :href="item" target="_blank">预览:文件{{index + 1}}</a>
                    </p>
                </template>
            </vk-data-form>
        </view>
        <common-footer></common-footer>
    </view>
</template>

<script>
export default {
    data() {
        return {
            reloaded: false,
            // 表单相关开始-----------------------------------------------------------
            form1: {
                // 表单请求数据，此处可以设置默认值
                data: {
                    // radio: 1,
                    // checkbox : [1,2]
                    sheetId: null,
                    amount: null,
                },
                // 表单属性
                props: {
                    // 表单请求地址
                    action: "client/selfSupport/kh/addQuote",
                    // 表单字段显示规则
                    columns: [
                        {key: "sheetFile", title: "询价文件", type: "html"},
                        {key: "desc", title: "产品描述", type: "html"},
                        {key: "amount", title: "货款总价(人民币:元)", type: "html"},
                        {key: "files", title: "附件", type: "file", accept: '.pdf'},
                        {key: "remark", title: "报价单详情", type: "textarea"},
                    ],
                    // 表单验证规则
                    rules: {
                        amount: [
                            {required: true, message: "货款总价不能为空", trigger: "change,blur"},
                        ]
                    },
                    // add 代表添加 update 代表修改
                    formType: "",
                    // 表单是否在请求中
                    loading: false,
                    // 是否显示表单1 的弹窗
                    show: false
                }
            },
            // 表单相关结束-----------------------------------------------------------
            sheet: null
        };
    },
    onLoad(options = {}) {
        console.log(options)
        const {
            id
        } = options
        if (!id) {
            vk.navigateTo('/pages/self-support/self-support');
            return
        }

        this.enquiryId = id
        this.form1.data.sheetId = id
        this.getEnquiryDetail()
    },
    computed: {
        totalPriceStr() {
            if (this.totalPrice == 0) {
                return "零元"
            }
            return vk.myfn.convertCurrency(this.totalPrice / 100)
        }
    },
    methods: {
        onFormSuccess() {
            vk.redirectTo({url: `/pages/index/index`})
        },
        // 提交报价单
        async submit() {

            const data = await vk.userCenter.getCurrentUserInfo();
            const {userInfo} = data
            if (userInfo.remainQuoteNum === 0 || !userInfo.remainQuoteNum) {

            }

            // this.$confirm(`今日报价次数${userInfo.quoteTimes || 0}, 是否继续?`, '提示', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning',
            //     center: true
            // }).then(res => {
            //
            // })

            vk.callFunction({
                url: 'client/enquiry/quote/kh/addQuote',
                title: '请求中...',
                // data: {
                //     sheet: this.sheet,
                //     totalPrice: this.totalPrice
                // },
                success: (data) => {
                    this.$message({
                        message: "报价成功",
                        type: 'success'
                    })

                }
            });


        },
        /**
         * 获取询价单详情
         */
        getEnquiryDetail() {
            vk.callFunction({
                url: 'client/selfSupport/kh/getDetail',
                title: '请求中...',
                data: {
                    _id: this.enquiryId
                },
                success: (res) => {
                    this.sheet = res
                }
            });
        },
        formatNumber(e){
            this.form1.data.amount = parseFloat(this.form1.data.amount).toFixed(2)
        }
    },
    onShow() {
        this.reloaded = false
        setTimeout(() => {
            this.reloaded = true
        }, 500)
    }
}
</script>

<style lang="scss" scoped>
.page-main {
    width: 1200px;
    margin: 20px auto;
    background-color: #FFFFFF;
    padding: 20px;
}

.description {
    margin-bottom: 40px;
    width: 800px;
}

.quote {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quote-form {
    width: 260px;
}

.form-footer {
    height: 40px;
    line-height: 40px;
    background: #fff;
    padding-top: 0;
    text-align: center;
    display: block;
}
</style>