adweb3-web/src/views/adweb/enquiry/modules/enquiryDetail.vue

<template>
  <a-modal
    :title="title"
    :width="width"
    v-model:open="modalVisible"
    centered
    :closable="true"
    :keyboard="false"
    :maskClosable="false"
  >
    <template slot="footer">
      <a-popconfirm
        title="您确定要删除这个询盘吗"
        ok-text="是"
        cancel-text="否"
        @confirm="handleDel"
        v-if="showDelBtn"
      >
        <a-button>删除</a-button>
      </a-popconfirm>
      <a-button type="primary" @click="handleCancel">关闭</a-button>
    </template>

    <div class="wrap">
      <a-spin :spinning="spinning" tip="正在修改询盘分类">
        <p><span>咨询时间：</span>{{ filter_Null_format(record.recordCtime) }}</p>
        <p><span>公司：</span>{{ filter_Null_format(record.formCompany) }}</p>
        <p><span>姓名：</span>{{ filter_Null_format(record.contact)}}</p>
        <p><span>邮箱：</span><a :href="'mailto:'+record.fromEmail">{{filter_Null_format(record.fromEmail)}}</a></p>
        <p><span>电话：</span>{{ filter_Null_format(record.phone)}}</p>
        <p><span>whatsApp：</span>{{filter_Null_format(record.whatsApp)}}</p>
        <p><span>客户IP：</span>{{ filter_Null_format(record.customerIp) }}</p>
        <p style="display: none"><span>来源IP：</span>{{ filter_Null_format(record.fromIp) }}</p>
        <p><span>来源国家/地区：</span>{{ filter_Null_format(record.countryName) }}</p>
        <template v-if="record.cartItems != null">
          <p><span>感兴趣的产品：</span>
            <div class="product-list">
              <template v-for="item in record.cartItems">
                数量：{{ item.quantity }}, 产品： <a :href="item.productLink" target="_blank">{{ item.productTitle }}</a><br/>
              </template>
            </div>
          </p>
        </template>

        <p><span>来源页：</span>
          <template v-if="!record.fromPage">-</template>
          <template v-else-if="record.fromPage.indexOf('http') < 0">-</template>
          <template v-else-if="record.fromPage.indexOf('http') === 0">
            <template v-if="record.fromPage.lastIndexOf('/') <= 7">
              <a v-if="edition === 1" :href="record.fromPage" target="_blank"
                 style="text-decoration: underline">Home</a>
              <span v-else>Home</span>
            </template>
            <template v-else>
              <a v-if="edition === 1" :href="record.fromPage" target="_blank"
                 style="text-decoration: underline">{{ record.fromPage.substring(record.fromPage.lastIndexOf('/') + 1) }}</a>
              <span v-else>{{ record.fromPage.substring(record.fromPage.lastIndexOf('/') + 1) }}</span>
            </template>
          </template>
          <template v-else-if="record.fromPage.indexOf('http') > 0">
            <a v-if="edition === 1" :href="record.fromPage.substring(record.fromPage.indexOf('http'))" target="_blank"
               style="text-decoration: underline">{{ record.fromPage.substring(0, record.fromPage.indexOf('http')) }}</a>
            <span v-else>{{ record.fromPage.substring(0, record.fromPage.indexOf('http')) }}</span>
          </template>
          <template v-else>-</template>
        </p>
        <p v-if="userEffectiveOption != undefined"><span>询盘分类：</span>
          <a-radio-group v-model:value="modelUserEffective" @change="onChangeUserEffect">
            <a-radio v-for="item in userEffectiveOption" :key="item.value" :value="parseInt(item.value)" >
              {{item.label}}
            </a-radio>
          </a-radio-group>
        </p>
        <p class="translate">
          <span>详细内容：</span>
          <a-spin tips="翻译中" :spinning="translateStatus">
            <span style="flex: auto;" >
              <div v-html="record.context" v-if="translateContent == ''">
              </div>
              <div v-html="translateContent">
              </div>
                  <!-- {{translateContent == '' ?  record.context : translateContent}} -->
                  <i @click="enquiryTransContent">
                   <img v-if="translateContent == '' " src="../../.././../assets/enquiry/translate1.svg" />
                  </i>
                  <i @click="backToEcglish">
                   <img v-if="translateContent != '' " src="../../.././../assets/enquiry/translate2.svg" />
                  </i>
               </span>
          </a-spin>
        </p>
        <p v-if="record.userEffective == 0 && (userRole.indexOf('admin') > -1 || userRole.indexOf('adweb_admin') > -1 || userRole.indexOf('adweb_seo_manager') > -1 || userRole.indexOf('adweb_site_manager') > -1)"><span>疑似原因：</span>{{  filter_Null_format(record.effectiveReason) }}</p>
        <div class="info" v-if="record.specialFieldList && record.specialFieldList.length > 0">
          <a-descriptions title="扩展信息" bordered :column=1  class="slef_desc">
            <a-descriptions-item :label="item.field" v-for="item in record.specialFieldList">
              {{  filter_Null_format(item.value) }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </a-spin>
    </div>
    <a-modal
      :title="wasteEnquiryTitle"
      :width="width"
      v-model="wasteEnquiryVisible"
      centered
      :closable="true"
      :keyboard="false"
      :maskClosable="false"
      @cancel="wasteEnquiryCancel"
    >
      <template slot="footer">
        <a-button @click="wasteEnquiryCancel">关闭</a-button>
        <a-button type="primary" @click="wasteEnquiryOk">确认</a-button>
      </template>

      <div class="wrap">
        <div class="ant-alert ant-alert-info" style="color: #e74c3c;padding: 5px 8px;">
          <span>&nbsp&nbsp&nbsp&nbsp当垃圾询盘类型选择确认后，对应类型的内容便会加入对应黑名单中，同时获取询盘时会把此内容的询盘当作垃圾询盘处理，请谨慎操作。</span>
        </div>
        <p><span>垃圾询盘类型：</span>
          <a-radio-group v-model="wasteEnquiryType" @change="onChangeWasteEnquiry">
            <a-radio v-for="item in wasteEnquiryOption" :key="item.value" :value="item.value" >
              {{item.label}}
            </a-radio>
          </a-radio-group>
        </p>
        <p v-if="wasteEnquiryType == 'keyword'">
          <span>关键词：</span>
          <span style="flex: auto">
            详细内容：{{record.context}}
             <i>
               <a-textarea v-model="wasteEnquirySeason" :placeholder="wasteEnquiryPlaceholder" :auto-size="{ minRows: 3 }" />
             </i>
          </span>
        </p>
        <p v-if="wasteEnquiryType == 'other'">
          <span>原因：</span>
          <a-textarea v-model="wasteEnquirySeason" :placeholder="wasteEnquiryPlaceholder" :auto-size="{ minRows: 3 }" />
        </p>
      </div>
    </a-modal>
  </a-modal>
</template>

<script>

import {getAction, postAction, postActionForm} from '/@/api/manage/manage'
import Qs from 'qs'

import {useUserStore} from "@/store/modules/user";


export default {
  name: 'enquiryDetail',
  data () {
    return {
      title:"询盘详情",
      width:900,
      modalVisible: false,
      record:{},
      spinning:false,
      value:1,
      translateStatus:false,
      translateContent:'',
      modelUserEffective:2,
      edition: 1,
      userRole: '',
      wasteEnquiryTitle:"垃圾询盘类型",
      wasteEnquiryVisible: false,
      wasteEnquiryOption:[{label:'关键词',value:'keyword'},{label:'邮箱',value:'email'},{label:'IP',value:'ip'},{label:'其他',value:'other'}],
      wasteEnquirySeason:'',
      wasteEnquiryType:'',
      wasteEnquiryPlaceholder:''
    }
  },

  props:{
    userEffectiveOption: Array,
    showDelBtn:{
      default: false,
      type: Boolean,
      //目前只支持询盘列表通过询盘详情删除询盘，其他地方不展示删除按钮
    }
  },

  mounted() {
    this.userRole = useUserStore().roleList;
  },

  methods: {
    init (record) {
      this.translateContent = ''
      this.modalVisible=true
      this.record = record
      this.modelUserEffective = record.userEffective

      record.cartItems = JSON.parse(record.cartItems);
    },

    filter_Null_format(value) {

      if(value === '' || value === null || value === undefined){
        return  '--'
      }else{
        return value
      }
    },

    handleCancel () {
      this.$emit('close');
      this.translateContent = ''
      this.modalVisible = false;
    },

    async handleDel() {
      //目前该方法只在询盘列表使用
      await getAction('/adweb/adwebEnquiry/delBatch', {id: this.record.id}).then((res) => {
        if (res.success) {
          this.$message.success(`删除询盘成功！`)
        } else {
          if (res.code == 403) {
            this.$message.warning(res.message)
          } else {
            this.$message.error('删除失败！')
          }
        }
      })
      //当删除之后，调用父组件中的重新刷新
      this.$emit('reload');
      this.modalVisible = false;
    },

    onChangeUserEffect(e){
      let that = this
      if(e.target.value == '0'){
        that.wasteEnquiryVisible = true
      }else{
        that.submitUserEffect();
      }
    },

    //翻译
    enquiryTransContent(r) {
      let that = this;
      that.translateStatus = true;
      // 创建一个表单数据
      const formData = new FormData();
      formData.append('id', that.record.id);
      formData.append('query', that.translateContent === '' ?  that.record.context : that.translateContent);

      let recordId = that.record.id;
      postActionForm('/adweb/adwebEnquiry/enquiryTrans', formData, 1000 * 60 * 2).then(function(res) {
        that.translateStatus = false
        if (res.code === 200) {
          let beforeList = res.result;
          if(beforeList == null){
            that.$message.error("该内容暂不支持翻译")
            return;
          }
          if (beforeList.length > 0) {
            that.translateContent = beforeList
          }
        } else {
          that.$message.error("该内容暂不支持翻译")
        }
      }).catch(function(err) {
        console.log(err)
      })
    },

    backToEcglish(){
      this.translateContent = ''
    },

    wasteEnquiryOk(){
      let that = this;
      if(that.wasteEnquiryType == 'keyword'){
        let season = that.wasteEnquirySeason.trim();
        if(season == null || season == ""){
          that.$message.warning("关键词不能为空")
          that.wasteEnquirySeason = null;
          return;
        }
      }
      if(that.wasteEnquiryType == 'other'){
        let season = that.wasteEnquirySeason.trim();
        if(season == null || season == ""){
          that.$message.warning("原因不能为空")
          that.wasteEnquirySeason = null;
          return;
        }
      }
      that.wasteEnquiryVisible = false;
      that.submitUserEffect();
    },
    wasteEnquiryCancel(){
      let that = this;
      that.wasteEnquiryVisible = false;
      that.modelUserEffective = that.record.userEffective;
      that.wasteEnquiryType = "";
      that.wasteEnquirySeason = "";
      that.wasteEnquiryPlaceholder = "";
    },
    onChangeWasteEnquiry(e){
      let that = this;
      that.wasteEnquirySeason = "";
      that.wasteEnquiryType = e.target.value;
      if(that.wasteEnquiryType == 'email'){
        that.wasteEnquirySeason = that.record.fromEmail;
      }
      if(that.wasteEnquiryType == 'ip'){
        that.wasteEnquirySeason = that.record.customerIp;
      }
      if(that.wasteEnquiryType == 'keyword'){
        that.wasteEnquiryPlaceholder = "请输入关键词";
      }
      if(that.wasteEnquiryType == 'other'){
        that.wasteEnquiryPlaceholder = "请输入原因";
      }
    },

    submitUserEffect(){
      let that = this;
      this.spinning = true
      let d = {
        id: that.record.id,
        siteId: that.record.siteId,
        siteCode: that.record.siteCode,
        userEffective: that.modelUserEffective,
        wasteEnquiryType: that.wasteEnquiryType,
        wasteEnquirySeason: that.wasteEnquirySeason
      }
      postAction('/adweb/adwebEnquiry/update/user/effective', Qs.stringify(d)).then(function(res) {
        that.spinning = false
        if (res.code == 200) {
          that.$message.success('分类修改成功！');
          that.$emit('ok')
          that.record.userEffective = that.modelUserEffective
          if(that.wasteEnquiryType == "ip"){
            that.record.effectiveReason = "人工操作-ip-" + that.wasteEnquirySeason
          }else if(that.wasteEnquiryType == "email"){
            that.record.effectiveReason = "人工操作-邮箱-" + that.wasteEnquirySeason
          }else if(that.wasteEnquiryType == "keyword"){
            that.record.effectiveReason = "人工操作-关键词-" + that.wasteEnquirySeason
          }else if(that.wasteEnquiryType == "other"){
            that.record.effectiveReason = "人工操作-其他-" + that.wasteEnquirySeason
          }

        } else {
          if (res.code == 403) {
            that.$message.warning(res.message)
          } else {
            that.$message.error('分类修改失败！')
          }
        }
      }).catch(function(err) {
        console.log(err)
      }).finally(()=>{
        that.wasteEnquiryType = "";
        that.wasteEnquirySeason = "";
        that.wasteEnquiryPlaceholder = "";
      })
    }
  }
}
</script>


<style lang="less" scoped>
.wrap {
  p{
    margin-bottom: 10px;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 10px;
    display: flex;
    color: #000;
    &:last-child{
      border-bottom: none;
    }
    span{
      color: #000;
      flex: 110px 0 0;
    }
  }
  /deep/ .ant-radio-wrapper {
    color: rgba(0, 0, 0, 1);
  }

  .translate{
    img{
      width: 26px;
      cursor: pointer;
    }
  }
  .my-text::first-line {
    white-space: pre-line;
    position: relative; /* 父元素设置为相对定位 */

  }
  .child {
    position: absolute; /* 子元素设置为绝对定位 */
        bottom: 0; /* 将其放置在父元素的底部 */
        left: 0; /* 将其放置在父元素的左侧 */
  }
}

</style>