epmet-work-uni/components/Supervision/Supervision.vue

<template>
    <view>
        <wux-popup position="bottom" :visible="visible" @close="close" closable>
            <view class="popup-container">
                <view class="title">催办督办</view>
                <view scroll-y class="popup-content">
                    <view class="items">
                        <view class="label">当前办理部门：</view>
                        <view class="value">{{ detail.gridName || detail.gridName || '' }}</view>
                    </view>

                    <view class="items">
                        <view class="label">转入该部门时间：</view>
                        <view class="value">{{ detail.happenTime || detail.serviceStartTime || '' }}</view>
                    </view>

                    <view class="items">
                        <view class="label">联系人：</view>
                        <view class="value">{{ detail.name || detail.demandUserName || '' }}</view>
                    </view>

                    <view class="items">
                        <view class="label">联系电话：</view>
                        <view class="value">{{ detail.mobile || detail.demandUserMobile || '' }}</view>
                    </view>

                    <view class="items">
                        <view class="label">状态：</view>
                        <view class="value">{{ detail.statusName }}</view>
                    </view>

                    <view class="items">
                        <view class="label">催办说明：</view>
                    </view>

                    <view class="items">
                        <textarea class="textarea" placeholder-class="textarea-placeholder" placeholder="请填写催办说明，不超过500字。" v-model="content" />
                    </view>
                </view>

                <view class="bottom-btn">
                    <view class="btn btn-gray" @tap="close">取消</view>
                    <view class="btn btn-blue" @tap="sure">确定</view>
                </view>
            </view>
        </wux-popup>
    </view>
</template>

<script>
// import wuxPopup from '../dist/popup/index';
import { urgent_supervision } from '../../utils/statisticsApi';
export default {
    components: {
        wuxPopup
    },
    data() {
        return {
            content: ''
        };
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        detail: {
            type: Object,
            default: () => {}
        },
        // event services
        type: {
            type: String,
            default: ''
        },
        id: {
            type: String,
            default: ''
        }
    },
    methods: {
        close() {
            this.$emit('close');
        },
        sure() {
            console.log(this.id, this.id, 'this.data.id');
            urgent_supervision({
                type: this.type,
                eventid: this.id,
                serviceId: this.id,
                content: this.content
            }).then(({ data, code, msg }) => {
                if (code == 0) {
                    uni.showToast({
                        title: '提交成功'
                    });
                    this.close();
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: msg
                    });
                }
            });
        }
    },
    created: function () {}
};
</script>
<style>
.wux-popup__content {
    background: none !important;
}
.wux-popup__content .wux-popup__hd {
    padding: 0 !important;
}
.wux-popup__bd {
    padding: 0 !important;
}
.popup-container {
    padding: 32rpx 20rpx 50rpx;
    background: linear-gradient(180deg, #dbeeff 0%, #f4faff 100%);
    border-radius: 30rpx 30rpx 0px 0px;
}

.title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333333;
    display: flex;
    align-items: center;
    margin-bottom: 39rpx;
    position: relative;
}

.title:before {
    content: '';
    display: block;
    width: 10rpx;
    height: 28rpx;
    background: #3a80e7;
    border-radius: 4rpx;
    margin-right: 20rpx;
}

.popup-content {
    border-radius: 20px;
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 30rpx;
    height: auto !important;
}

.items {
    display: flex;
    align-items: flex-start;
    text-align: left;
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    margin-bottom: 29rpx;
    position: relative;
}

.items .label {
    white-space: nowrap;
}

.textarea {
    width: 100%;
    height: 340rpx;
    background: #f7f7f7;
    border-radius: 20rpx;
    padding: 27rpx 31rpx;
}
.textarea-placeholder {
    font-size: 32rpx;
    font-weight: 500;
    color: #c1c1c1;
    line-height: 42rpx;
}

.bottom-btn {
    background: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 99rpx 20rpx;
    /*padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);*/
    width: 100%;
    box-sizing: border-box;
    z-index: 999;
    position: static;
}
.btn {
    width: 240rpx;
    height: 76rpx;
    border-radius: 38rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
}
.btn-blue {
    background: linear-gradient(87deg, #81b5fb 0%, #3e92ff 100%);
}
.btn-gray {
    background: #d9d9d9;
}
</style>