web/apps/bigmember_pc/src/views/subscribe/components/key/FreeSubConfig.vue

<template>
  <div class="free-subscribe-container">
    <div class="sub-content">
      <div class="item">
        <div class="item-label item-label-required">区域：</div>
        <div
          class="item-value"
          v-loading="!setStatus"
          element-loading-custom-class="prevent-loading"
        >
          <AreaCityCountryCascader
            ref="areaCityCountry"
            showSelected
            showCount
            stopDropdown
            :showCity="false"
            :showCountry="false"
            :areaCount="maxSelectAreaCount"
            :initMap="areaData"
            @hideSelect="onAreaHideSelect"
            @onClick="onAreaSelectClick"
            @change="onAreaCityCountryChange"
            @exceed="onExceedChange"
          >
            <div slot="header"></div>
          </AreaCityCountryCascader>
        </div>
      </div>

      <div class="item">
        <div class="item-label item-label-required">信息类型：</div>
        <div
          class="item-value"
          @click="dialog.infoType = true"
          v-loading="!setStatus"
          element-loading-custom-class="prevent-loading"
        >
          <el-input
            class="custom-long-input"
            v-model="datas.infoTypeStr"
            readonly
            unselectable="on"
          ></el-input>
        </div>
      </div>

      <div class="item">
        <div class="item-label">关键词匹配方式：</div>
        <div
          class="item-value"
          v-loading="!setStatus"
          element-loading-custom-class="prevent-loading"
        >
          <CheckboxGroupSelector
            :sourceList="keywordMatchTypeList"
            keepOne
            @change="onMatchTypeChange"
            v-model="datas.matchType"
          ></CheckboxGroupSelector>
        </div>
      </div>
    </div>
    <!-- 区域选择dialog -->
    <el-dialog
      custom-class="sub-dialog"
      :visible.sync="dialog.area"
      :close-on-click-modal="false"
      :show-close="false"
      center
      width="460px"
    >
      <AreaSelect
        :initCityMap="datas.areaObj"
        @onCancel="dialog.area = false"
        @onConfirm="saveAreaData"
        :showSelectResult="true"
        :showSelectedDetail="false"
        :areaCount="maxSelectAreaCount"
      >
        <template #update-tips
          >超出已购买省份数量，请联系客户成功经理进行升级</template
        >
      </AreaSelect>
    </el-dialog>
    <!-- 采购单位行业dialog -->
    <el-dialog
      custom-class="sub-dialog"
      :visible.sync="dialog.buyClass"
      :close-on-click-modal="false"
      :show-close="false"
      center
      width="460px"
    >
      <BuyClassSelect
        :initCate="datas.buyClassArr"
        :otherMatch="datas.buyclassmatch"
        @onCancel="dialog.buyClass = false"
        @onConfirm="saveBuyClassData"
        @onOtherConfirm="saveOtherBuyClass"
      >
        <div slot="header">选择采购单位类型</div>
      </BuyClassSelect>
    </el-dialog>
    <!-- 信息类型dialog -->
    <el-dialog
      custom-class="sub-dialog info-type-dialog"
      :visible.sync="dialog.infoType"
      :close-on-click-modal="false"
      :show-close="false"
      center
      width="460px"
    >
      <InfoTypeSelect
        :initInfoType="datas.infoTypeArr"
        showDataType="oneLevel"
        @onCancel="dialog.infoType = false"
        @onConfirm="saveInfoTypeData"
      >
        <div slot="header">选择信息类型</div>
      </InfoTypeSelect>
    </el-dialog>
    <el-dialog
      :visible.sync="dialog.areaMap"
      title="超出可选省份数量"
      :show-close="false"
      class="tip-dialog"
      width="380px"
      top="30vh"
      center
    >
      <div>
        可选：<span class="highlight-text">{{ maxSelectAreaCount }}个省</span
        >，如需增加省份数量，您可联系客服升级大会员。
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.stop="goConcatCustomer"
          >联系客服</el-button
        >
        <el-button @click="dialog.areaMap = false">取 消</el-button>
      </div>
    </el-dialog>
    <popupBox
      ref="popupBox"
      text="如需修改区域，请联系企业管理员修改分发设置区域。"
      title="不支持修改区域"
    ></popupBox>
  </div>
</template>
<script>
import {
  Switch,
  Input,
  RadioGroup,
  Radio,
  Button,
  Dialog,
  Checkbox
} from 'element-ui'
import AreaSelect from '@/components/selector/AreaSelector'
import BuyClassSelect from '@/components/selector/BuyerclassSelector'
import InfoTypeSelect from '@/components/selector/InfoTypeSelector'
import popupBox from '@/components/common/popupBox'
import AreaCityCountryCascader from '@/components/selector-cascader/AreaCityCountryCascader'
import CheckboxGroupSelector from '@/components/selector/CheckboxGroupSelector'
import { keywordMatchTypeListOfFree } from '@/assets/js/selector.js'
import AmountRangeSelector from '@/components/selector/AmountRangeSelector.vue'
import {
  setAreaBuyer,
  setUserInfoVip,
  userRule,
  entBaseInfo
} from '@/api/modules'
export default {
  name: 'free-sub-config',
  props: {
    datas: {
      areaStr: String,
      buyClassStr: String,
      infoTypeStr: String,
      projectmatch: Number,
      buyclassmatch: Number,
      mathway: Number,
      areaObj: Object,
      areaCount: Number, // 用户购买了几个省份(单省版本)
      buyClassArr: Array,
      infoTypeArr: Array,
      matchType: Array,
      amount: String
    },
    // 订阅设置开关
    setStatus: {
      type: Boolean,
      default: false
    },
    canSelect: {
      type: Boolean,
      default: true
    }
  },
  components: {
    [Switch.name]: Switch,
    [Input.name]: Input,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    AreaSelect,
    BuyClassSelect,
    InfoTypeSelect,
    popupBox,
    AreaCityCountryCascader,
    CheckboxGroupSelector,
    AmountRangeSelector
  },
  data() {
    return {
      projectSwitch: {
        loading: false,
        disabled: false
      },
      unitSwitch: {
        loading: false,
        disabled: false
      },
      dialog: {
        area: false,
        buyClass: false,
        infoType: false,
        areaMap: false
      },
      areaData: {},
      buyerData: [],
      timeout: null,
      isSetArea: false,
      keywordMatchTypeList: keywordMatchTypeListOfFree,
      switchMode: this.setStatus
    }
  },
  computed: {
    // -1表示可选范围为全国
    maxSelectAreaCount() {
      const { areaCount } = this.datas
      return areaCount || -1
    },
    formatAreaMap() {
      const original = this.areaData
      // if (!original) return ''
      // 原二级数据结构为{福建：['福州', '厦门', '宁德']}
      // 现数据结构为三级 需进行处理
      if (Object.keys(original).length > 0) {
        const obj = {}
        for (const province in original) {
          let cityMap = {}
          if (Array.isArray(original[province])) {
            original[province].forEach((city) => {
              cityMap[city] = []
            })
          } else {
            cityMap = original[province]
          }
          obj[province] = cityMap
        }
        return obj
      } else {
        return original
      }
    }
  },
  watch: {
    'datas.areaObj'(newVal) {
      this.areaData = newVal
      try {
        this.$refs.areaCityCountry.setState('')
        this.$refs.areaCityCountry.setState(newVal)
      } catch (error) {}
    },
    'datas.buyClassArr'(newVal) {
      this.buyerData = newVal
    }
  },
  mounted() {},
  methods: {
    onAmountRangeChange(amount) {
      const { value } = amount
      this.commonSetApi({
        pageType: 'amount',
        matchtype: value
      })
    },
    // 关键词匹配方式选择结果回调(新)
    onMatchTypeChange(data) {
      this.commonSetApi({
        pageType: 'matchmode',
        matchtype: data.toString()
      })
    },
    debounce(fn, delay) {
      if (this.timeout) {
        clearTimeout(this.timeout)
      }
      this.timeout = setTimeout(() => {
        fn()
      }, delay)
    },
    clickErea() {
      this.debounce(() => {
        entBaseInfo({}).then((res) => {
          if (
            res.data.vip_power === 1 ||
            res.data.member_power === 1 ||
            res.data.user_power === 1
          ) {
            // 企业授权
            userRule().then((res_) => {
              if (res_.data) {
                // 设置了区域
                this.$refs.popupBox.isshow = true
              } else {
                this.dialog.area = true
              }
            })
          } else {
            // 非企业授权
            this.dialog.area = true
          }
        })
      }, 200)
    },
    // 切换项目匹配按钮
    switchProjectMatch(event) {
      this.projectSwitch.loading = true
      this.projectSwitch.disabled = true
      this.commonSetApi(
        {
          pageType: 'projectMatch',
          pmindex: event
        },
        () => {
          this.projectSwitch.loading = false
          this.projectSwitch.disabled = false
          this.$message({
            message: event === 1 ? '项目匹配已开启' : '项目匹配已关闭',
            type: 'success'
          })
        }
      )
    },
    // 原关键词匹配方式（弃用）
    async chooseMathWay(state) {
      this.commonSetApi({
        pageType: 'saveSeniorset',
        matchtype: state
      })
    },
    // 保存区域修改数据(已停用)
    saveAreaData(data) {
      setAreaBuyer({
        vSwitch: 'm',
        area: JSON.stringify(data),
        industry: this.buyerData.toString()
      }).then((res) => {
        if (res.data.doSuccess) {
          this.$emit('update')
          this.dialog.area = false
        } else {
          this.$message({
            message: '修改失败',
            type: 'error'
          })
        }
      })
    },
    // 保存采购单位行业数据及匹配未分类行业数据
    saveBuyClassData(data) {
      const { area, district } =
        this.$refs.areaCityCountry.formatProvinceAndCities(this.areaData)
      setAreaBuyer({
        vSwitch: 'm',
        // area: JSON.stringify(this.areaData),
        area: JSON.stringify(area),
        district: JSON.stringify(district),
        industry: data.toString()
      }).then((res) => {
        if (res.data.doSuccess) {
          this.$emit('update')
          this.dialog.buyClass = false
        } else {
          this.$message({
            message: '修改失败',
            type: 'error'
          })
        }
      })
    },
    // 保存未匹配采购单位行业
    saveOtherBuyClass(data) {
      this.commonSetApi({
        pageType: 'other_buyerclass',
        other: data.selected ? 1 : 0
      })
    },
    // 保存信息类型数据
    saveInfoTypeData(data) {
      this.commonSetApi(
        {
          pageType: 'infoType',
          infoTypeArr: data.toString(),
          vSwitch: 'f'
        },
        () => {
          this.dialog.infoType = false
        }
      )
    },
    // 设置接口
    commonSetApi(data, callback) {
      setUserInfoVip(data).then((res) => {
        if (res.flag) {
          this.$emit('update')
          callback && callback()
        } else {
          this.$message({
            message: '修改失败',
            type: 'error'
          })
        }
      })
    },
    // 组件选择地区回调事件（场景：每次选择都需保存）
    onAreaCityCountryChange(data) {
      const { area, district } = data
      console.log(area, district)
    },
    async onAreaSelectClick() {
      if (!this.canSelect) {
        return this.$message({
          message: '修改区域次数已达上限',
          type: 'error'
        })
      }
      this.$refs.areaCityCountry.toggleSelect()
      return false
      const { data } = await entBaseInfo()
      if (
        data.vip_power === 1 ||
        data.member_power === 1 ||
        data.user_power === 1
      ) {
        // 企业授权
        const { data: flag } = await userRule()
        if (flag) {
          this.$refs.popupBox.isshow = true
        } else {
          this.$refs.areaCityCountry.toggleSelect()
        }
      } else {
        this.$refs.areaCityCountry.toggleSelect()
      }
    },
    // 当下拉框隐藏时回调事件（应用场景：每次选择地区时不需要都调用接口，等所有选择完 下拉框隐藏时再调用）
    onAreaHideSelect(data) {
      const { area, district } = data
      if (!data.resultText) {
        this.$refs.areaCityCountry.doReset()
        return false
      }
      setAreaBuyer({
        vSwitch: 'f',
        area: JSON.stringify(area),
        industry: this.buyerData.toString(),
        district: JSON.stringify(district)
      }).then((res) => {
        if (res?.data?.doSuccess) {
          this.$emit('update')
          this.dialog.area = false
        } else {
          if (res.errMsg && res.errMsg.indexOf('已用完') > -1) {
            this.$refs.areaCityCountry.doReset()
          }
          this.$message({
            message: res.errMsg || '修改失败',
            type: 'error'
          })
        }
      })
    },
    // 区域选择超出冒泡事件
    onExceedChange() {
      this.$message({
        message: '超出可订阅省份数量',
        type: 'error'
      })
      // this.dialog.areaMap = true
    },
    goConcatCustomer() {
      this.contactCustomer(this)
    }
  }
}
</script>
<style lang="scss" scoped>
.free-subscribe-container {
  .sub-content {
    padding: 20px 0;
  }

  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
  }

  .item-label {
    margin-right: 8px;
    min-width: 120px;
    height: 40px;
    color: #1d1d1d;
    font-size: 14px;
    line-height: 40px;
    text-align: right;
  }

  .item-label-required:before {
    content: '*';
    color: #f56c6c;
    margin-right: 2px;
  }

  .item-value {
    position: relative;
    width: 352px;
    .item-mask {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 10000;
    }
  }

  .custom-long-input {
    width: 352px;
  }

  .item-other {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
  }

  .item-other-value {
    margin-top: 8px;
  }

  .math-tips {
    margin-top: 4px;
    font-size: 12px;
    color: #999999;
    line-height: 20px;
  }

  .radio-item {
    margin-bottom: 10px;
  }

  // element-ui样式修改
  ::v-deep {
    .custom-long-input .el-input__inner {
      font-size: 14px;
      color: #2cb7ca;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-color: #ececec;
    }

    .el-loading-spinner .circular {
      width: 22px;
      height: 22px;
    }

    .el-loading-spinner {
      margin-top: -11px;
    }

    .el-input__inner {
      background: #fff;
      cursor: pointer;
    }

    .el-switch {
      position: relative;
    }

    .el-switch__label--left {
      position: absolute;
      left: 6px;
      top: 0;
      color: #fff;
      z-index: 9;
      font-size: 12px;
    }

    .el-switch__label--right {
      position: absolute;
      right: 6px;
      top: 0;
      color: #fff;
      z-index: 9;
      font-size: 12px;
    }

    .el-switch__label * {
      font-size: 12px;
    }

    .el-switch,
    .el-switch__core {
      height: 22px;
      line-height: 22px;
    }

    .el-switch__core:after {
      width: 18px;
      height: 18px;
    }

    .el-switch.is-checked .el-switch__core::after {
      margin-left: -18px !important;
    }

    .el-radio {
      color: #1d1d1d;
      font-size: 14px;
    }

    .el-radio__inner {
      width: 20px;
      height: 20px;
    }

    .el-radio__input.is-checked .el-radio__inner {
      border: 0;
      background: transparent;
      width: 20px;
      height: 20px;
      background: url('~@/assets/images/icon-checked.png') no-repeat center
        center;
      background-size: contain;
    }

    .el-radio__inner::after {
      background: transparent;
    }

    .el-radio__input.is-checked + .el-radio__label {
      color: #1d1d1d;
    }

    .el-radio__inner:hover {
      border-color: #ececec;
    }
    .select-region {
      left: 0 !important;
    }
    .s-header {
      display: none;
    }
    .el-select {
      width: 100%;
      .el-input__inner {
        height: 40px;
        line-height: 40px;
      }
      .select-prefix {
        height: 38px;
        line-height: 38px;
      }
    }
    .tip-dialog {
      .el-button--primary,
      .el-button--primary:hover,
      .el-button--primary:focus {
        width: 132px;
        height: 36px;
        margin-right: 52px;
        text-align: center;
        background: #2cb7ca;
        border-radius: 6px;
        font-style: 16px;
        color: #fff;
        border: 0;
      }
      .el-dialog {
        border-radius: 8px;
      }
      .el-dialog__header {
        padding: 32px 0 0;
      }
      .el-dialog__body {
        padding: 20px 32px 32px;
        color: #686868;
        font-size: 14px;
        line-height: 22px;
        text-align: center;
      }
      .el-dialog__body i {
        color: #2cb7ca;
      }
      .el-button {
        width: 132px;
        height: 36px;
        padding: 0;
        text-align: center;
        font-size: 16px;
      }
      .el-dialog__footer {
        padding: 0 0 32px;
      }
    }
    .el-select-dropdown.select-custom {
      left: 0 !important;
    }

    .module-container.province-container {
      width: 100%;
      .el-icon-arrow-right {
        display: none;
      }
    }
  }
}
</style>