hongze_yb_xcx/pages-question/components/removeQuestionDig.vue

<template>
    <van-popup 
        :show="show" 
        position="bottom"  
        :close-on-click-overlay="true"
        closeable
        @close="handleClose"
        round
    >
        <view class="remove-question-wrap">
            <view class="title">转移问题</view>
            <view class="main-box">
                <view class="left">
                    <view 
                        :class="['item',index==fIndex&&'active']" 
                        v-for="(item,index) in opts" 
                        :key="item.classify_id" 
                        @click="fIndex=index"
                    >{{item.classify_name}}</view>
                </view>
                <view class="center">
                    <view 
                        :class="['item',index==secIndex&&'active']" 
                        v-for="(item,index) in opts[fIndex].tags" 
                        :key="item.tag_id" 
                        @click="secIndex=index"
                    >{{item.tag_name}}</view>
                </view>
                <view class="right">
                    <view 
                        :class="['item',item.admin_id==adminId&&'active',!item.allow_select&&'disabled']" 
                        v-for="item in opts[fIndex].tags[secIndex].researcher_list" 
                        :key="item.admin_id" 
                        @click="handleSelectAdmin(item)"
                    >{{item.admin_name}}</view>
                </view>
            </view>
            <view class="btn" @click="handleConfirmTrans">确定</view>
              
        </view>
    </van-popup>
      
</template>

<script>
import {apiGetTagTree} from '@/api/common'
import {apiQuestionTransfer} from '@/api/question'
export default {
    props:{
        qid:{
            default:0
        },
        show:{
            type:Boolean,
            default:false
        }
    },
    watch:{
        qid(){
            this.getOpts()
        }
    },
    data() {
        return {
            opts:[],
            fIndex:0,
            secIndex:0,
            adminId:0,//选择的人id
        }
    },
    methods: {
        async getOpts(){
            const res=await apiGetTagTree({
                community_question_id:this.qid||0
            })
            if(res.code===200){
                this.opts=res.data||[]
            }
        },

        // 选择转移人
        handleSelectAdmin(item){
            if(!item.allow_select) return
            this.adminId=item.admin_id
        },
        
        //确认转移
        async handleConfirmTrans(){
            if(!this.adminId){
                uni.showToast({
                    title:"请选择转移人",
                    icon:'none'
                })
                return
            }
            const res=await apiQuestionTransfer({
                community_question_id:Number(this.qid),
                variety_classify_id:
            })
        },


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

}
</script>

<style  lang="scss">
.remove-question-wrap{
    .title{
        padding: 30rpx 0 10rpx 0;
        font-size: 32rpx;
        text-align: center;
    }
    .main-box{
        height: 30vh;
        display: flex;
        .left,.center,.right{
            flex: 1;
            height: 100%;
            overflow-y: auto;
            &::-webkit-scrollbar{
                width: 0;
                height: 0;
                display: none;
            }
            .item{
                padding: 20rpx 10rpx;
                font-size: 32rpx;
            }
            .active{
                color: #E3B377;
            }
            .disabled{
                color: #999;
            }
        }
        .center{
            border-left: 1px solid #ededed;
            border-right: 1px solid #ededed;
        }
    }
    .btn{
        margin-top: 20rpx;
        width: 80%;
        text-align: center;
        background: #333333;
        border-radius: 40px;
        margin-left: auto;
        margin-right: auto;
        color: #E3B377;
        line-height: 80rpx;
        font-size: 32rpx;
    }
}
</style>