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

<template>
    <view>
        <wux-popup position="bottom" :visible="visible" @close="close" closable>
            <view class="popup-container">
                <view class="title">需求派单</view>
                <scroll-view scroll-y class="popup-content">
                    <view class="card">
                        <view class="items">
                            <view class="label">需求类型：</view>
                            <view class="value">{{ detail.parentCategoryName }}-{{ detail.categoryName }}</view>
                        </view>
                        <view class="items">
                            <view class="label">上报时间：</view>
                            <view class="value">{{ detail.reportTime }}</view>
                        </view>
                        <view class="items">
                            <view class="label">所属网格：</view>
                            <view class="value">{{ detail.gridName }}</view>
                        </view>
                        <view class="items">
                            <view class="label">需求内容：</view>
                            <view class="value">
                                {{ detail.content }}
                            </view>
                        </view>
                    </view>
                    <view class="card">
                        <picker :range="serviceOptions" range-key="label" @change="getServiceuserList">
                            <view class="items">
                                <view class="label label-width">服务方类型：</view>
                                <view :class="'value flex ' + (serviceIndex >= 0 ? '' : 'gray')">
                                    {{ serviceIndex >= 0 ? serviceOptions[serviceIndex].label : '请选择服务方类型' }}
                                </view>
                            </view>
                        </picker>
                        <picker :range="serviceOptiondList" @change="serviceOptiondListChange" range-key="label">
                            <view class="items">
                                <view class="label label-width">服务方：</view>
                                <view :class="'value  flex ' + (serviceOptiondIndex >= 0 ? '' : 'gray')">
                                    {{ serviceOptiondIndex >= 0 ? serviceOptiondList[serviceOptiondIndex].label : '请选择服务方' }}
                                </view>
                            </view>
                        </picker>
                    </view>
                </scroll-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 { commonDemandDetail, demandDetail, dictlist, listServerOrg, userdemandAssign } from '../../utils/statisticsApi';
const config = require('../../utils/config');
export default {
    components: {
        wuxPopup
    },
    data() {
        return {
            agencyId: '',
            loading: true,

            form: {
                serviceType: '',
                serverId: ''
            },

            serviceOptions: [],
            serviceIndex: -1,
            serviceOptiondIndex: -1,
            serviceOptiondList: [],
            label: ''
        };
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        detail: {
            type: Object,
            default: () => {}
        },
        id: {
            type: String,
            default: ''
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready: function () {
            dictlist({
                dictType: 'user_demand_service_type'
            }).then((res) => {
                this.setData({
                    serviceOptions: res.data
                });
            });
        },

        close() {
            this.$emit('close');
        },

        sure() {
            userdemandAssign({
                ...this.form,
                demandRecId: this.detail.demandRecId
            }).then((res) => {
                uni.showToast({
                    icon: 'success',
                    title: '操作成功'
                });
                this.close();
            });
        },

        serviceOptiondListChange(e) {
            this.setData({
                serviceOptiondIndex: e.detail.value,
                'form.serverId': this.serviceOptiondList[e.detail.value].id
            });
        },

        getServiceuserList(e) {
            this.setData({
                serviceIndex: e.detail.value,
                'form.serviceType': this.serviceOptions[e.detail.value].value
            });
            let params = {
                serviceTypeId: this.detail.categoryCode[1],
                //上级ID
                serverOrgType: this.serviceOptions[e.detail.value].value,
                //选的类型
                businessType: 'resi_service'
            };

            // serviceOptiondIndex
            listServerOrg(params).then((res) => {
                this.setData({
                    serviceOptiondList: res.data || []
                });
            });
        }
    },
    created: function () {}
};
</script>
<style>
.wux-popup__content {
    background: none !important;
}

.popup-container {
    padding: 32rpx 20rpx 50rpx;
    background: linear-gradient(180deg, #dbeeff 0%, #f4faff 100%);
    border-radius: 30rpx;
}

.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 {
    max-height: 60vh;
}
.popup-content .card {
    border-radius: 20px;
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 30rpx;
}
.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;
    /*width: 160rpx;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.items .value {
    width: calc(100% - 160rpx);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height: 144rpx;
}

.tel {
    width: 126rpx;
    height: 62rpx;
    position: absolute;
    top: calc(50% - 31rpx);
    right: 0;
}
.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;
}

.gray {
    color: #999;
}
.text-right {
    text-align: right;
}
.flex {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
}

.label-width {
    min-width: 160rpx;
}
</style>