jobslink-user-clent/pageMy/setUserBase/subPage/mailboxDetail.vue

<template>
    <view class="app_cotainer">
        <u--form
            labelPosition="left"
            :model="model"
            ref="uForm"
        >
            <u-form-item
                label="咨询题目:"
                prop="consultTopic"
                labelWidth="80"
                borderBottom
                ref="item1"
            >
                <u--input v-model="model.consultTopic" :border="isShowBorder" ></u--input>
            </u-form-item>
            <u-form-item
                label="咨询部门:"
                prop="consultDeptName"
                labelWidth="80"
                borderBottom
                ref="item1"
            >
                <u--input v-model="model.consultDeptName" :border="isShowBorder" ></u--input>
            </u-form-item>
            <u-form-item
                label="咨询日期:"
                prop="consultTime"
                labelWidth="80"
                borderBottom
                ref="item1"
                v-if="isSeeDetail"
            >
                <u-datetime-picker
                    :show="show"
                    v-model="model.consultTime"
                    mode="date"
                    @cancel="show = false"
                    @confirm="show = false"
                ></u-datetime-picker>
                <u-button class="picker_flag" @click="show = true">{{model.consultTime && dateFormat(model.consultTime )}}</u-button>
            </u-form-item>
            <u-form-item
                label="咨询内容:"
                prop="consultContent"
                labelWidth="80"
                borderBottom
                ref="item1"
            >
                <u--input v-model="model.consultContent" :border="isShowBorder" ></u--input>
            </u-form-item>
            <view class="reply_info" v-if="isSeeDetail">
                <hr></hr>
                <u-form-item
                    label="答复部门:"
                    prop="replyDeptName"
                    labelWidth="80"
                    borderBottom
                    ref="item1"
                >
                    <u--input v-model="model.replyDeptName" :border="isShowBorder" ></u--input>
                </u-form-item>
                <u-form-item
                    label="答复人员:"
                    prop="replySubmitName"
                    labelWidth="80"
                    borderBottom
                    ref="item1"
                >
                    <u--input v-model="model.replySubmitName" :border="isShowBorder" ></u--input>
                </u-form-item>
                <u-form-item
                    label="答复时间:"
                    prop="DreplyTime"
                    labelWidth="80"
                    borderBottom
                    ref="item1"
                >
                    <u--input v-model="model.DreplyTime" :border="isShowBorder" ></u--input>
                </u-form-item>
                <u-form-item
                    label="答复内容:"
                    prop="replyContent"
                    labelWidth="80"
                    borderBottom
                    ref="item1"
                >
                    <u--input v-model="model.replyContent" :border="isShowBorder"></u--input>
                </u-form-item>
            </view>
           <hr></hr>
           <u-form-item
               label="应答人:"
               prop="replyName"
               labelWidth="80"
               borderBottom
               ref="item1"
           >
               <u--input v-model="model.replyName" :border="isShowBorder" ></u--input>
           </u-form-item>
           <u-form-item
               label="应答电话:"
               prop="replyPhone"
               labelWidth="80"
               borderBottom
               ref="item1"
           >
               <u--input v-model="model.replyPhone" :border="isShowBorder" ></u--input>
           </u-form-item>
        </u--form>
        <view class="btn_add" >
            <u-button type="primary" size="large" text="发送信件" @click="addConsult"></u-button>
        </view>
    </view>
</template>

<script>
    import { consultMailboxInfoQueryById } from '@/api/content.js'
    import { dateFormat } from '@/untils/format.js'
    export default {
        data() {
            return {
                isSeeDetail: null,
                model: {},
                show: false,
                dateFormat
            };
        },
        onLoad({ id }) {
            if(id) {
                this.isSeeDetail = id
                this.getDetail({id})
            }
        },
        computed: {
            isShowBorder() {
                return this.isSeeDetail ? 'none': 'surround'
            }
        },
        methods: {
            async getDetail(params) {
                let resData = await consultMailboxInfoQueryById(params)
                if(resData.data?.code === 200){
                    const { data, msg } = resData.data
                    data.consultTime = new Date('2022-10-22').getTime()
                    console.log(data)
                    this.model = data
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
.app_cotainer{
    padding: 24rpx;
    .picker_flag{
        border: 0;
        height: auto;
        display: flex;
        justify-content: flex-start;
        padding: 0;
    }
    .reply_info{
    }
    .btn_add{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 110rpx;
        background-color: $uni-bg-color-grey;
        padding: 24rpx 24rpx calc(10px + env(safe-area-inset-bottom) / 2) 24rpx;
        text-align: center;
        line-height: 110rpx;
    }
}
</style>