judicial-hy / 0.200103

<template>
  <div class='questiondetail' v-if='lists[0]'>
    <div class='head-title'>
      {{lists[0] ? lists[0].consultant_Title : ''}}
      <div class="img-box" v-if='imgfiles.length>0' style='padding-top: 20rpx;'>
        <img v-for="(item,i) in imgfiles" :key="i" @tap='previewImg(i)' :src="imgLoaded[i]?item:'/static/imgs/img.png'" @error='hideImg(i)' mode='aspectFill'>
      </div>
      <div class='foot'>
        <span>咨询者：{{wx_name}}</span>
        <div v-for='(tag, j) in tags' :key='j' class='tags'>{{tag? tag: ''}}</div>
      </div>
    </div>
    <div class='list-item' v-for='(item,i) in lists' :key='i'>
      <div class='para-title'><div/>{{'第'+sequence[i]+'次提问'}}</div>
      <div class='text' style='margin-top: 25rpx;'>{{item.consultant_Content}}</div>
      <!-- <div class='img-box'><img v-for='(img,j) in item.imgfiles' :key='j' :src='img'></div> -->
      <div class='time'>{{item.consultant_Date}}</div>
      <div v-if='item.is_Replay==1'>
        <div class='head'><img class='photo' :src='rootAvatar+item.pic' mode='aspectFill'>{{item.name}}律师的回答
          <!-- <img class='new' src='/static/imgs/new.png'> -->
        </div>
        <div class='text' style='margin-bottom: 25rpx;'>{{item.consultant_Reply}}</div>
        <div class='time'>{{item.replay_Date}}</div>
      </div>
      <form v-if='i+1==lists.length && item.is_Replay!=1' @submit='commit'>
        <div class='textarea'>
          <textarea placeholder='请输入您要回答的内容' name='text' :value='text' @input='text=service.Input($event)' maxlength=10000 />
          <div>{{text.length}}/10000</div>
        </div>
        <div class='commit'>
          <button form-type='submit' hover-class='fade' :disabled='commiting'>提交</button>
        </div>
      </form>
    </div>
  </div>
  <div v-else class='LoadingMask'>
    <img src="/static/imgs/loading.png">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        cwxid: '',
        sysNewsId: '',
        text: '',
        sequence: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],
        lists: [],
        imgfiles: [],
        imgLoaded: [],
        tags:[],
        wx_name:'',
        commiting: false
      }
    },
    methods: {
      hideImg(i) {
        this.$set(this.imgLoaded, i, false)
      },
      previewImg(i) {
        wx.previewImage({
          urls: this.imgfiles,
          current: this.imgfiles[i]
        })
      },
      getLawyerPic(liid){
        return new Promise( resolve => {
          wx.request({
            url: this.rootUrl + '/law/lawyer/' + liid,
            success: res => {
              resolve(res.data[0].pic_Name)
            }
          })
        })
      },
      Timer(orginIndex,key){
        return new Promise(resolve =>{
          console.log('timer')
          setTimeout(()=>{
            if(this.lists[orginIndex][key]) resolve(this.lists[orginIndex][key])
            else this.Timer(orginIndex, key).then(e=>resolve(e))
          },50)
        })
      },
      loadConversations() {
        wx.request({
          url: this.rootUrl + '/conwx/singleqalaw/' + this.cwxid,
          data: { sysNewsId: this.sysNewsId },
          success: res => {
            this.lists = res.data.lists
            console.log(res.data.lists)
            this.imgfiles = res.data.pics.map(v=> this.rootAvatar + v.pic_Name)
            this.imgLoaded = new Array(this.imgfiles.length).fill(true)

            const map = {}

            this.lists.forEach((v,i) => {
              if(map[v.liid]) {
                this.Timer(map[v.liid],'pic').then(pic => this.$set(this.lists[i],'pic',pic))
              }
              else if(v.liid) {
                map[v.liid] = i.toString()
                this.getLawyerPic(v.liid).then(pic => this.$set(this.lists[i],'pic',pic))
              }
              v.consultant_Date = this.service.correctTime(v.consultant_Date,'full')
              if(v.replay_Date) v.replay_Date = this.service.correctTime(v.replay_Date,'full')
            })
            console.log(this.lists[0].cate_Name)
            try {
              this.tags = this.lists[0].cate_Name.split(',')
            }catch (e) {
              this.tags = this.lists[0].cate_Name
            }
            this.text = ''
            this.wx_name = this.lists[0].wx_name
            this.commiting = false
          },
          fail: res => {
            console.log(res)
          }
        })
      },
      commit(e, type='first') {
        if(this.commiting){
          return
        }
        let inputs = this.service.filter(e.mp.detail.value)
        if(!inputs.allowed){
          return
        }else{
          inputs = inputs.obj
        }
        if(!this.service.checkEmptyInput([inputs.text],['回答内容'])){
          return
        }
        if(!this.service.checkBadWords([inputs.text],['回答内容'])){
          return
        }
        if(type=='first'){
          wx.showModal({
            title:'',
            content: '确定要发布吗?',
            success: res => {
              if (res.confirm){
                this.execCommit(e, inputs)
              }
            }
          })
        }else{
          this.execCommit(e, inputs)
        }
      },
      execCommit(e,inputs){
        wx.showLoading({ title: '正在上传' })
        this.commiting = true
        wx.request({
          url: this.rootUrl + '/qa/replyqa',
          method: 'POST',
          header: { 'content-type': 'application/x-www-form-urlencoded' },
          data: {
            QAID: this.lists[this.lists.length - 1].qaid,
            Consultant_Reply: inputs.text,
            sessionID: wx.getStorageSync('sessionID')
          },
          success: res => {
            if(res.statusCode=='500'){
              this.service.getUnionId(this.rootAvatar,this.rootUrl).then(res=>{
                console.log(res)
                this.commiting = false
                this.commit(e, 'again')
              })
            }else{
              if (res.data == 1) {
                wx.showToast({ title: '发送成功' })
                this.loadConversations()
              }else{
                wx.hideLoading()
                wx.showToast({title:'上传失败 请检查上传内容',icon: 'none'})
                this.commiting = false
              }
            }
          },
          fail: res => {
            console.log(res)
            wx.hideLoading()
            wx.showToast({title:'上传失败',icon: 'none'})
            this.commiting = false
          }
        })
      }
    },
    onLoad() {
      this.cwxid = this.$root.$mp.query.cwxid
      if(this.$root.$mp.query.sysNewsId !== null && this.$root.$mp.query.sysNewsId !== '' && this.$root.$mp.query.sysNewsId !== undefined){
        this.sysNewsId = this.$root.$mp.query.sysNewsId
      }
      this.loadConversations()
    },
    onUnload(){
      this.cwxid = ''
      this.sysNewsId = ''
      this.text = ''
      this.lists = []
      this.imgfiles = []
      this.imgLoaded = []
      this.tags = []
      this.wx_name = ''
    }
  }
</script>
<style lang="stylus" scoped>
  .questiondetail
    position absolute
    Height_Width(100%)
    Background()
    BorderBox()
    > .list-item
      background white
      .text
        margin 10rpx 30rpx 0 30rpx
        text-align justify
        word-wrap break-word
        Font(28rpx, 45rpx)
      .time
        margin-top 20rpx
        padding 0 0 20rpx 30rpx
        Font(28rpx)
        color grey
  .head-title
    padding 25rpx
    Flex(flex, space-between, , column)
    Font(32rpx, 40rpx, bold)
    background white
    .foot
      Flex(flex,flex-end,center)
      color #777
      span
        Font(28rpx)
        margin 0 auto 0 0
      .tags
        Font(26rpx, 40rpx)
        border-radius 6rpx
        border 1rpx solid themeColor
        color themeColor
        padding 0 10rpx
        margin-left 15rpx
  .head
    Flex(flex, , center)
    padding 10rpx 30rpx
    font-size 30rpx
    color themeColor
    background white
    .photo
      Height_Width(86rpx)
      margin-right 20rpx
      border-radius 50%
      background-color #eee
    .new
      Height_Width(35rpx)
      margin-left 20rpx
  .textarea
    margin 0 40rpx
    padding-top 30rpx
    font-size 30rpx
    textarea
      height 400rpx
      width calc(100% - 20rpx)
      line-height 50rpx
      border-radius 10rpx
      border 1rpx solid #EEE
      background white
    div
      text-align right
      line-height 60rpx
  .ask
    Background()
    .commit
      padding-top 0
      height 110rpx
  .wait-reply
    Font(28rpx, 70rpx)
    text-align center
    color grey
    Background()
  .para-title
    line-height 80rpx
    color themeColor
    Border(1rpx, 0, 0, 0)
</style>