crm-xcx/pages-approve/activity/addRoadShowQuestion.vue

<template>
  <view class="add-roadshow-question-page">
    <van-field
      :value="industry"
      is-link
      readonly
      clickable
      name="picker"
      label="客户行业"
      placeholder="选择客户行业"
      @click.native="showSelectIndustry = true"
    />
    <van-field
      :value="type"
      is-link
      readonly
      clickable
      name="picker"
      label="客户类型"
      placeholder="选择客户类型"
      @click.native="showSelectType = true"
    />
    <view class="list-wrap">
      <view class="list-item" v-for="item,index in list" :key="index">
        <van-field
          :value="item.question"
          placeholder="请输入内容"
          clearable
          :error-message="item.questionErrorMessage"
          @change="bindInputHandle('question',index, $event)"
        >
          <view class="label-box" slot="label">
            <image 
              class="del-icon" 
              src="../static/del.png" 
              mode="aspectFit|aspectFill|widthFix"
              v-if="list.length>2"
              @click="handleDelItem(index)"
            />
            <view style="flex: 1;">{{ 'Q'+(index+1) }}</view>
          </view>
        </van-field>
        <van-field
          type="textarea"
          :value="item.answer"
          :label="'A'+(index+1)"
          placeholder="请输入内容"
          :autosize="{
            minHeight:80
          }"
          clearable
          :error-message="item.answerErrorMessage"
          @change="bindInputHandle('answer',index, $event)"
        >
          <view class="label-box" slot="label">
            <view>{{ 'A'+(index+1) }}</view>
          </view>
        </van-field>
      </view>
    </view>
    <view class="add-btn" @click="handleAddItem">
      <image class="icon" src="../static/add.png" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
      <view>添加更多</view>
    </view>
    
    <view class="fix-bottom-wrap btns-wrap flex">
      <button class="refuse-btn" @click="handleActions('cancel')">取消</button>
			<button class="pass-btn" @click="handleActions('accept')">提交</button>
		</view>

    <!-- 选择客户行业 -->
    <van-popup 
      :show="showSelectIndustry" 
      position="bottom">
      <van-picker 
        show-toolbar 
        title="客户行业"
        :columns="industryOpts"
        @confirm="confirmSelectIndustry" 
        @cancel="showSelectIndustry = false" 
      />
    </van-popup>
    <!-- 选择客户类型 -->
    <van-popup 
      :show="showSelectType" 
      position="bottom">
      <van-picker 
        show-toolbar 
        title="客户类型"
        :columns="customTypeOpts"
        @confirm="confirmSelectType" 
        @cancel="showSelectType = false" 
      />
    </van-popup>
  </view>
</template>

<script>
import { roadShowQuestionAdd } from '@/api/roadshow/index.js'

export default {
  data () {
    return {
      industryOpts:[
        {
          value:'黑色',
          text:'黑色'
        },
        {
          value:'有色',
          text:'有色'
        },
        {
          value:'能化',
          text:'能化'
        },
        {
          value:'综合',
          text:'综合'
        },
        {
          value:'金融',
          text:'金融'
        },
        {
          value:'农产品',
          text:'农产品'
        }
      ],
      customTypeOpts:[ 
        {
          value:'上游',
          text:'上游'
        },
        {
          value:'中游',
          text:'中游',
        },
        {
          value:'下游',
          text:'下游',
        },
        {
          value:'投资',
          text:'投资',
        }
      ],
      RsCalendarResearcherId:0,
      RsCalendarId:0,
      industry:'',
      showSelectIndustry:false,
      type:'',
      showSelectType:false,
      list:[
        {
          question:'',
          answer:'',
          questionErrorMessage:'',
          answerErrorMessage:'',
        },
        {
          question:'',
          answer:'',
          questionErrorMessage:'',
          answerErrorMessage:'',
        }
      ]
    }
  },
  onLoad(opt){
    this.getOpenerEventChannel().on('data', (data)=> {
      uni.setNavigationBarTitle({
        title:data.companyName+'客户问答',
      });
      this.RsCalendarId=data.RsCalendarId
      this.RsCalendarResearcherId=data.RsCalendarResearcherId
    })
  },
  methods: {
    handleActions(type){
      if(type==='cancel'){
        uni.navigateBack({
          delta: 1
        });
        return
      }
      if(!this.industry){
        uni.showToast({
          title: '选择客户行业',
          icon: 'none',
        });
        return
      }
      if(!this.type){
        uni.showToast({
          title: '选择客户类型',
          icon: 'none',
        });
        return
      }
      let hasError = false;
      let qArr=[]
      this.list.forEach(item => {
        // 检查问题是否为空
        if (!item.question) {
          item.questionErrorMessage = '请输入内容';
          hasError = true;
        } else {
          item.questionErrorMessage = '';
        }

        // 检查答案是否为空或长度不足
        if (!item.answer) {
          item.answerErrorMessage = '请输入内容';
          hasError = true;
        } else if (item.answer.length < 30) {
          item.answerErrorMessage = '字数不少于30字';
          hasError = true;
        } else {
          item.answerErrorMessage = '';
        }

        qArr.push({
          QuestionContent:item.question,
          ReplyContent:item.answer
        })
      });
      if (hasError) {
        uni.showToast({
          title: '请检查问答内容是否填完整',
          icon: 'none',
        });
        return;
      }
      uni.showModal({
        title: '提示',
        content: '客户问答只能提交一次，确认提交吗？ ',
        success: async (modalres) =>{
          if (modalres.confirm) {
            console.log('用户点击确定');
            const res=await roadShowQuestionAdd({
              RsCalendarId:this.RsCalendarId,
              RsCalendarResearcherId:this.RsCalendarResearcherId,
              CompanyIndustry:this.industry,
              CompanyClassify:this.type,
              QuestionList:qArr
            })
            if(res.code===200){
              uni.showToast({
                title:'提交成功',
                icon:'success'
              })
              setTimeout(() => {
                this.handleActions('cancel')
              }, 1000);
            }
          } else if (modalres.cancel) {
            console.log('用户点击取消');
          }
        }
      });

      

    },
    confirmSelectIndustry(e){
      this.industry=e.detail.value.value
      this.showSelectIndustry=false
    },
    confirmSelectType(e){
      this.type=e.detail.value.value
      this.showSelectType=false
    },
    handleDelItem(index){
      this.list.splice(index,1)
    },
    handleAddItem(){
      this.list.push({
        question:'',
        answer:'',
        questionErrorMessage:'',
        answerErrorMessage:'',
      })
    },
    bindInputHandle(type,index,e){
      this.list[index][type]=e.detail
    }
  },
}
</script>

<style lang="scss">
.add-roadshow-question-page{
  .van-field__label{
    text-align: right;
    color: #333;
    width: 120rpx !important;
  }
}
  
</style>
<style lang="scss" scoped>
.add-roadshow-question-page{
  padding-top: 20rpx;
  padding-bottom: 200rpx;
  .list-wrap{
    .list-item{
      margin-top: 10rpx;
      .label-box{
        display: flex;
        justify-content: space-between;
        text-align: right;
        align-items: center;
        width: 120rpx;

      }
      .del-icon{
        width: 36rpx;
        height: 36rpx;
      }
    }
  }
  .add-btn{
    background-color: #fff;
    height: 85rpx;
    margin-top: 20rpx;
    padding: 0 var(--cell-horizontal-padding,16px);
    display: flex;
    align-items: center;
    color: $uni-color-primary;
    .icon{
      width: 34rpx;
      height: 34rpx;
      margin-right: 10rpx;
    }
  }
  .btns-wrap {
    justify-content: center;

    button {
      width: 260rpx;
      height: 70rpx;
      border-radius: 28px;
      border: none;
      margin: 0 15px;
      font-size: 15px;
      color: #fff;
      line-height: 70rpx;
    }

    .pass-btn {
      background-color: $uni-color-primary;
    }

    .refuse-btn {
      background-color: transparent;
      border: 1px solid $uni-color-primary;
      color: $uni-color-primary;
    }
	}
}
</style>