epmet-work-h5-chengyang/src/views/assistanceDetail/index.vue

<template>
    <div class='pages'>
        <section>
            <div class="card  m-top12">
                <div class="m-top5 flex flex-center">
                    <img src="@/assets/images/icon/address.png" class="small_img m-right7">
                    {{ detail.serviceTargetName || '--' }} {{ detail.serviceTargetMobile }}<br>
                </div>
                <div class="opacity5 font-size13 m-top5" style="margin-left: 29px;">{{ detail.serviceTargetAddress }}
                </div>
                <div class="m-top5  flex flex-center">
                    <img src="@/assets/images/icon/time.png" class="small_img m-right7">
                    <div>
                        {{ detail.serviceStartTime || '--' }}
                    </div>
                </div>
                <div class="m-top5 ">
                    <div class="flex flex-center3">
                        <img src="@/assets/images/icon/content.png" style="vertical-align: top;"
                            class="small_img m-right7">
                        <div class="van-multi-ellipsis--l2">{{ detail.content }}</div>
                    </div>
                </div>
            </div>
            <div class="card m-top12" style="padding: 5px;">
                    <van-cell title="服务类型" :value="sourceName" />
                    <van-cell title="需求分类" :value="detail.categoryName" />
                    <van-cell title="上报人" :value="detail.serviceTargetName + detail.serviceTargetMobile" />
                    <van-cell title="上报时间" :value="detail.reportTime" />
            </div>
        </section>
        <div class="bto_btn">
            <van-button size="small" type="info" class="m-left12 rounded-corner m-top5-bottom" v-if="selfObj.processStatus === 10" @click="showRole = true">接单</van-button>
        </div>
        <van-dialog v-model="showRole" title="请选择接单身份" show-cancel-button @confirm="receiveService">
            <van-radio-group v-model="serviceOrgType">
                <van-radio :name="item.serviceOrgType" v-for="(item) in roleList" :key="item.id"
                    @click="handelChangeRole(item.serviceOrgId)">{{ item.serviceOrgName
                    }}</van-radio>
            </van-radio-group>
        </van-dialog>
        <van-dialog v-model="showScope" title="" show-cancel-button @confirm="receiveService">
            <p>服务时间</p>
            <span @click="showStart = true, showPopup = true" class="font-size13">{{ serviceTimeStart || '开始时间'
                }}</span><span class="tag-date">至</span><span @click="showEnd = true, showPopup = true"
                class="font-size13">{{ serviceTimeEnd || '结束时间' }}</span>
            <p>服务范围</p>
            <span class="font-size13" @click="showTree = true, showPopup = true">{{ serviceScopeName || '请选择范围'
                }}</span>
            <p>接单身份</p>
            <van-radio-group v-model="serviceOrgType">
                <van-radio :name="item.serviceOrgType" v-for="(item) in roleList" :key="item.id"
                    @click="handelChangeRole(item.serviceOrgId)">{{ item.serviceOrgName
                    }}</van-radio>
            </van-radio-group>
        </van-dialog>
        <van-popup v-model="showPopup" position="bottom">
            <van-datetime-picker v-if="showStart" v-model="serviceTimeStart" type="datetime" title="开始时间"
                @confirm="handelCLickConfirmStart" @cancel="showPopup = false" :min-date="minDate" />
            <van-datetime-picker v-if="showEnd" v-model="serviceTimeEnd" @confirm="handelCLickConfirmEnd"
                @cancel="showPopup = false" type="datetime" title="结束时间" :min-date="minDate" />
            <van-cascader v-if="showTree" v-model="cascaderValue" title="请选择范围" :options="treeOptions"
                @close="showTree = false, showPopup = false" @finish="onFinish"
                :field-names="{ text: 'objectName', value: 'objectId' }" />
        </van-popup>
    </div>
</template>

<script>
import {receiveService,getListMyIdentities,getServiceScopeTree } from '@/api/service'
export default {
    data() {
        return {
            detail: null,
            typeList:['公共服务','共性需求','政策找人','服务找人','个性需求','温暖找人','技能找人','岗位找人'],
            id:null,
            showPopup: false,
            showStart: false,
            showEnd: false,
            showTree: false,
            showScope: false,
            minDate: new Date(),
            treeOptions: null,
            cascaderValue: null,
            serviceScopeName: null,
            serviceTimeStart: null,
            serviceTimeEnd: null,
            roleList: [],
            serviceOrgType: null,
            serviceOrgId: null,
            showRole: false,

        };
    },
    created() {
        this.getListMyIdentities()
        this.getServiceScopeTree()
    },
    mounted() {
        this.detail = this.$route.params.detail;
        this.selfObj = this.$route.params.selfObj;
        this.source = this.selfObj.source;
        this.id = this.selfObj.id;
        this.sourceName = this.typeList[this.source]
    },
    methods: {
        handelChangeRole(val) {
            this.serviceOrgId = val;
        },
        onFinish(value) {
            this.showTree = false;
            this.showPopup = false;
            this.serviceScopeList = value.selectedOptions.map(item => ({ objectType: item.objectType, objectId: item.objectId, objectName: item.objectName }))
            this.serviceScopeName = value.selectedOptions.map(item => item.objectName).join('-')
        },
           //提交接单
           async receiveService() {
            let parm = {
                ...this.selfObj,
                id: this.id,
            }
            if (this.showScope) {
                parm.serviceScopeList = this.serviceScopeList;
                parm.serviceTimeStart = this.serviceTimeStart;
                parm.serviceTimeEnd = this.serviceTimeEnd;
                parm.serviceOrgType = this.serviceOrgType;
                parm.serviceOrgId = this.serviceOrgId;
            } else if (this.showRole) {
                parm.serviceOrgType = this.serviceOrgType;
                parm.serviceOrgId = this.serviceOrgId;
            }
            console.log(parm);
            let { data, code, msg } = await receiveService(parm)
            if (code === 0) {
                this.$toast.success('接单成功')
                this.showRole = false;
                this.showScope = false;
                this.$router.back()
            }
        },
        async getListMyIdentities() {
            let { data, code, msg } = await getListMyIdentities()
            if (code === 0) {
                this.roleList = data;
            }
        },
        async getServiceScopeTree() {
            let { data, code, msg } = await getServiceScopeTree({ id: this.serverId })
            if (code === 0) {
                this.treeOptions = [data];
            }
        },
    },
    components: {},
    computed: {},
    watch: {},
}
</script>

<style lang='less' scoped>
.pages{
    padding: 0 10px;
    box-sizing: border-box;
}
:deep(.van-cell__value){
    text-align:left; 
}
:deep(.van-cell__title){
    max-width: 80px;
}
:deep(.van-button--small){
    padding: 12px 30px;
}
</style>