crm-xcx/pages-question/components/questionItem.vue

<template>
   <view class="question-item">
      <view class="cont">
         
         <!-- 提问item -->
         <template v-if="type==='question'">
            <veiw class="item-title">{{data.QuestionContent}}</veiw>
            <view class="row">提问人：{{ data.RealName }}</view>
            <view class="row">提问时间：{{ data.CreateTime }}</view>
            <view class="item-bottom row flex">
               <view class="flex">
                  回答者：
                  <view class="select-wrapper" @click="openPicker" v-if="!data.ReplierRealName">
                     <input type="text" placeholder="请选择研究员" disabled class="ipt" v-model="data.select_users.user_name">
                     <van-icon name="play" color="#999" style="transform: rotate(90deg);position: absolute;right: 20rpx;top: 30%;"/>
                  </view>
                  <view v-else> {{data.ReplierRealName}}</view>
               </view>
               <view class="status blue-color">{{statusMap[data.ReplyStatus]}}</view>
            </view>
            
         </template>
         
         <!-- 评论item -->
        <template v-else>
            <veiw class="item-title">{{data.Content}}</veiw>
            <view class="row">所属提问：{{data.QuestionContent}}</view>
            <view class="row">评论人：{{data.UserName}}</view>
            <view class="row">客户信息：{{data.CompanyName}} <text v-if="data.CompanyProductStatus">({{data.CompanyProductStatus}})</text> </view>
            <view class="row">评论时间：{{data.CreateTime}}</view>
         </template>
      </view>
      <view class="action-bot flex">
         <text class="red-color" @click="actionHandle('del')">删除</text>
         <template v-if="data.ReplyStatus === 1 && type === 'question'">
            <text class="blue-color" @click="actionHandle('edit')">编辑</text>
            <text :class="data.select_users.user_id ? 'blue-color' : 'grey-color'" @click="actionHandle('send')" >分配并通知</text>
         </template>
         <text class="blue-color" @click="actionHandle('hot')" v-if="type === 'comment'">{{ data.IsHot ? '取消精选': '精选' }}</text>
         
      </view>
      
   </view>
</template>

<script>
   import * as $api from '@/api/question/index.js'
   export default {
      props: {
         type: String,
         status: String,
         item: Object
      },
      watch: {
         item(newval) {
            this.data = newval;
         },
      },
      data() {
         return {
            data: this.item,
            users_obj: this.select_users,
            statusMap: {
               1: '待分配',
               2: '待回答',
               3: '已回答'
            },
         };
      },
      methods: {
         /* 打开弹窗 */
         openPicker() {
            const { CommunityQuestionId } = this.data;
            this.$emit('open_picker',CommunityQuestionId)
         },
         
         /* 操作*/
         actionHandle(key) {
            const actionmap = {
               'del': this.delHandle,
               'edit': this.editHandle,
               'send': this.sendQuestionHandle,
               'hot': this.setHotHandle
            }
            actionmap[key]()
         },
         
         /* 编辑 */
         editHandle() {
            this.$emit('edit',this.data)
         },
         
         /* 删除 */
         delHandle() {
            wx.showModal({
               title: "",
               content: `${this.type === 'question' ? '提问' : '评论'}删除后不可恢复，确认删除吗`,
               confirmColor: "#EE3636",
               cancelColor: '#333',
               success: async (res) => {
                  if(res.cancel) return
                  
                  const { CommunityQuestionId,CommunityQuestionCommentId } = this.data;
                  const { code } = this.type === 'question' 
                     ? await $api.apiDelQuestion({ QuestionId: CommunityQuestionId })
                     : await $api.apiDelComment({ CommunityQuestionCommentId: CommunityQuestionCommentId });
                  if( code !== 200 ) return
                  
                  wx.showToast({title: '删除成功'});
                  this.$emit('del', this.type === 'question' ? CommunityQuestionId : CommunityQuestionCommentId)
               }
            })
         },
         
         /* 分配研究员 */
         async sendQuestionHandle() {
            console.log(this.data.select_users)
            if(!this.data.select_users) return
            
            const {first_id,second_id,user_id} = this.data.select_users;
            const { code } =  await $api.apiDistribute({
               ResearchGroupFirstId: first_id,
               ResearchGroupSecondId: second_id,
               AdminId: user_id,
               QuestionId: this.data.CommunityQuestionId
            })
            
            if(code !== 200) return
            wx.showToast({title: '分配成功'})
            this.$emit('del', this.data.CommunityQuestionId)
          },  
          
         /* 设置精选 */
         async setHotHandle() {
            const { CommunityQuestionCommentId } = this.data;
            const { code } = await $api.apiSetHotComment({CommunityQuestionCommentId})
            
            if(code !== 200) return
            wx.showToast({title: '设置成功'})
            this.$emit('hot',CommunityQuestionCommentId)
            
         }
      }
   }
</script>

<style lang="scss" scoped>
.blue-color {
   color: #3385FF;
}
.red-color {
   color: #D63535;
}
.grey-color {
    color: #999;
}

.flex {
   display: flex;
   align-items: center;
}
.question-item {
   background: #fff;
   padding: 20rpx 0 0;
   border-radius: 8rpx;
   font-size: 28rpx;
   margin-bottom: 20rpx;
   color: #666;
   .cont {
      padding: 0 20rpx;
   }
   .item-title {
      color: #333;
      font-size: 32rpx;
   }
   .row {
      margin: 15rpx 0;
   }
   .item-bottom {
      justify-content: space-between;
      .select-wrapper {
         width: 250rpx;
         border: 1px solid #F1F2F6;
         padding: 0 40rpx 0 20rpx;
         position: relative;
         .ipt {
            height: 80rpx;
            line-height: 80rpx;
         }
      }
   }
   .action-bot {
      border-top: 1px solid #EAEAEA;
      margin-top: 30rpx;
      text {
         padding: 24rpx 0;
         flex: 1;
         text-align: center;
         border-right: 1px solid #EAEAEA;
         &:last-child { border: none; }
      }
   }
}
</style>