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">美元指数很强，之后是怎么看？问题来点字数但我也不知道打点什么就来点废话文学好了，差不多凑到50字就行哩</veiw>
            <!-- <textarea
               v-model="message" 
               placeholder="发布一条友善的评论" 
               auto-height
               :show-confirm-bar="false"
               :cursor-spacing="20"
               :maxlength="50"
               class="item-title"
            /> -->
            <view class="row">提问人：打到我</view>
            <view class="row">提问时间：2022.03.23  17:22:22</view>
            <view class="item-bottom row flex">
               <view class="flex">
                  回答者：
                  <view class="select-wrapper" @click="">
                     <input type="text" placeholder="请选择研究员" disabled class="ipt">
                     <van-icon name="play" color="#999" style="transform: rotate(90deg);position: absolute;right: 20rpx;top: 30%;"/>
                  </view>
               </view>
               <view class="status blue-color">待分配</view>
            </view>
            
         <!-- </template> -->
         
         <!-- 评论item -->
    <!--     <template v-else>
            <veiw class="item-title">美元指数很强，之后是怎么看？问题来点字数但我也不知道打点什么就来点废话文学好了，差不多凑到50字就行哩</veiw>
            <view class="row">评论人：打到我</view>
            <view class="row">客户信息：dwqjwijwi</view>
            <view class="row">评论时间：2022.03.23  17:22:22</view>
         </template> -->
      </view>
      <view class="action-bot flex">
         <text class="red-color" @click="actionHandle('del')">删除</text>
         <!-- <text>编辑</text> -->
         <text class="blue-color" @click="actionHandle('send')">分配</text>
         <text class="blue-color" @click="actionHandle('hot')">精选</text>
         
      </view>
      
      
      <!-- 选择研究员 -->
      <van-popup :show="isResearcherPicker" position="bottom">
      	<view class="select-rs-header">
      		<text class="cancel" @click="cancelResearcher">取消</text>
      		<text class="ensure" @click="confirmResearcher">确认</text>
      	</view>
      	<van-tree-select 
      		:items="researcherList" 
      		:main-active-index="rs_picker.firstindex" 
      		:active-id="rs_picker.id"
      		@click-nav="clickFirstHandle" 
      		@click-item="clickItemHandle" 
      	/>
      </van-popup>
   </view>
</template>

<script>
   export default {
      props: {
         type: String,
         status: String,
         item: Object
      },
      data() {
         return {
            message: '带我去大青蛙多无群多无'
         };
      },
      methods: {
         
         /* 操作*/
         actionHandle(key) {
            const actionmap = {
               'del': this.delHandle,
               'send': this.sendQuestionHandle,
               'hot': this.setHotHandle
            }
            actionmap[key]()
         },
         
         /* 删除 */
         delHandle() {
            wx.showModal({
               title: "",
               content: "确认删除吗？",
               confirmColor: "#EE3636",
               cancelColor: '#333',
               success: function() {
                  // const { code } = await delComment({ comment_id });
                  // if( code !== 200 ) return
                           
                  // wx.showToast({title: '删除成功'});
               }
            })
         },
         
         /* 分配研究员 */
         sendQuestionHandle() {
            
         },
         
         /* 设置精选 */
         setHotHandle() {
            
         }
      }
   }
</script>

<style lang="scss" scoped>
.blue-color {
   color: #3385FF;
}
.red-color {
   color: #D63535;
}
.flex {
   display: flex;
   align-items: center;
}
.question-item {
   background: #fff;
   padding: 20rpx 0 0;
   border-radius: 8rpx;
   font-size: 28rpx;
   margin-bottom: 20rpx;
   .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>