ylrz_his_scrm_adminUI/src/views/system/config/integralConfig.vue

<template>
  <div class="app-container">
    <el-form ref="form11" :model="form11" label-width="180px">
      <el-row>
        <el-col :span="12">
          <el-form-item  label="注册任务积分" prop="integralRegister">
            <el-tooltip class="item" effect="dark" content="完成手机号绑定注册，赠送多少积分" placement="top-end">
              <el-input-number  v-model="form11.integralRegister"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="完成专家咨询获得积分" prop="integralFinishConsultation">
            <el-tooltip class="item" effect="dark" content="首次完成专家咨询，赠送多少积分" placement="top-end">
              <el-input-number  v-model="form11.integralFinishConsultation"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item  label="填写就诊人信息获得积分" prop="integralAddPatient">
            <el-tooltip class="item" effect="dark" content="首次填写就诊人信息，赠送多少积分" placement="top-end">
              <el-input-number  v-model="form11.integralAddPatient"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="填写收货地址获得积分" prop="integralAddUserAddress">
            <el-tooltip class="item" effect="dark" content="首次填写收货地址，赠送多少积分" placement="top-end">
              <el-input-number  v-model="form11.integralAddUserAddress"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item  label="邀请新用户获得积分" prop="integralInvite">
            <el-tooltip class="item" effect="dark" content="邀请新用户，赠送多少积分" placement="top-end">
              <el-input-number  v-model="form11.integralInvite"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="被邀请获得积分" prop="integralInvited">
            <el-tooltip class="item" effect="dark" content="填写用户邀请码，赠送多少积分" placement="top-end">
              <el-input-number  v-model="form11.integralInvited"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item  label="新手任务积分" prop="integralNewTask">
            <el-tooltip class="item" effect="dark" content="首次app内下单公域疗法，赠送多少积分" placement="top-end">
              <el-input-number  v-model="form11.integralNewTask"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="购买消费获得" prop="integralRatio">
            <el-tooltip class="item" effect="dark" content="实付1元得多少积分" placement="top-end">
              <el-input-number  v-model="form11.integralRatio"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item  label="分享获得积分" prop="integralShare">
            <el-tooltip class="item" effect="dark" content="分享获得多少积分" placement="top-end">
              <el-input-number  v-model="form11.integralShare"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="完成随访获得积分" prop="integralFollow">
            <el-tooltip class="item" effect="dark" content="完成随访获得多少积分" placement="top-end">
              <el-input-number  v-model="form11.integralFollow"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item  label="分享首页视频积分" prop="integralShareHomeVideo">
            <el-tooltip class="item" effect="dark" content="分享首页视频单次赠送积分" placement="top-end">
              <el-input-number v-model="form11.integralShareHomeVideo" />
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="分享首页视频单日上限" prop="integralShareHomeVideoDailyLimit">
            <el-input-number v-model="form11.integralShareHomeVideoDailyLimit" :min="1" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item  label="观看课程获得积分" prop="integralCourse">
            <el-tooltip class="item" effect="dark" content="每小节观看>=90%获得多少积分" placement="top-end">
              <el-input-number  v-model="form11.integralCourse"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="浏览商品获得积分" prop="integralProduct">
            <el-tooltip class="item" effect="dark" content="浏览商城达到指定秒数获得多少积分" placement="top-end">
              <el-input-number  v-model="form11.integralProduct"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item  label="短视频/直播 获得积分" prop="integralFirstVideo">
            <el-tooltip class="item" effect="dark" content="首次浏览每10秒获得多少积分" placement="top-end">
              <el-input-number  v-model="form11.integralFirstVideo"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="短视频/直播 获得积分" prop="integralFinishVideo">
            <el-tooltip class="item" effect="dark" content="每10秒获得最低多少积分" placement="top-end">
              <el-input-number  v-model="form11.integralFinishVideo"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item  label="付费课程订阅" prop="integralSubscriptCourse">
            <el-tooltip class="item" effect="dark" content="实付1元得多少积分" placement="top-end">
              <el-input-number  v-model="form11.integralSubscriptCourse"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="首单立返积分" prop="integralFirstOrderPoint">
            <el-tooltip class="item" effect="dark" content="首次在积分商城下单，返多少积分" placement="top-end">
              <el-input-number  v-model="form11.integralFirstOrderPoint"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item  label="首次下载App获取积分" prop="downloadAppIntegral">
            <el-tooltip class="item" effect="dark" content="首次下载App获取积分" placement="top-end">
              <el-input-number  v-model="form11.downloadAppIntegral"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="首次完成购物积分" prop="integralFirstPurchase">
            <el-input-number v-model="form11.integralFirstPurchase" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item  label="完课评价积分(非转化素材)" prop="integralComment">
            <el-input-number v-model="form11.integralComment" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="完课评价积分(转化素材)" prop="integralCommentProduct">
            <el-input-number v-model="form11.integralCommentProduct" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item  label="积分有效天数" prop="integralExpireDays">
            <el-input-number v-model="form11.integralExpireDays" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item  label="积分有效期上线日" prop="integralExpireLaunchDate">
            <el-input v-model="form11.integralExpireLaunchDate" placeholder="yyyy-MM-dd" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="邀请单日上限次数" prop="integralInviteDailyLimit">
            <el-input-number v-model="form11.integralInviteDailyLimit" :min="1" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item  label="分享单日上限次数" prop="integralShareDailyLimit">
            <el-input-number v-model="form11.integralShareDailyLimit" :min="1" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="看课单日上限次数" prop="integralCourseDailyLimit">
            <el-input-number v-model="form11.integralCourseDailyLimit" :min="1" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item  label="浏览商城单日上限" prop="integralProductDailyLimit">
            <el-input-number v-model="form11.integralProductDailyLimit" :min="1" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="浏览商城所需秒数" prop="integralProductBrowseSeconds">
            <el-input-number v-model="form11.integralProductBrowseSeconds" :min="1" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item  label="单日可获总积分" prop="integralByOneDay">
            <el-tooltip class="item" effect="dark" content="每天最多可获得多少积分" placement="top-end">
              <el-input-number  v-model="form11.integralByOneDay"   ></el-input-number>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="单日可获总积分类型" prop="integralTypeByOneDay">
        <el-select v-model="form11.integralTypeByOneDay" multiple placeholder="请选择类型" filterable clearable size="small">
          <el-option
            v-for="dict in filteredIntegralLogTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
        <div style="margin-top: 8px;">
          <span style="margin-right: 8px; color: #606266;">配置预览端：</span>
          <el-radio-group v-model="logTypePreviewPlatform" size="small" @change="handleLogTypePreviewChange">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="app">APP</el-radio-button>
            <el-radio-button label="mini">小程序</el-radio-button>
          </el-radio-group>
        </div>
      </el-form-item>

      <el-divider content-position="left">积分类型展示端配置</el-divider>
      <el-table :data="logTypeDisplayRows" border size="small" style="margin-bottom: 20px;">
        <el-table-column label="类型值" prop="code" width="80" />
        <el-table-column label="类型名称" prop="name" min-width="180" />
        <el-table-column label="展示端" min-width="220">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.scopes"
              multiple
              clearable
              placeholder="为空表示各端均不展示"
              size="small"
              style="width: 200px"
            >
              <el-option label="APP" value="app" />
              <el-option label="小程序" value="mini" />
            </el-select>
          </template>
        </el-table-column>
      </el-table>

      <el-divider content-position="left">任务展示端配置</el-divider>
      <el-table :data="taskDisplayRows" border size="small" style="margin-bottom: 20px;">
        <el-table-column label="任务名称" prop="name" min-width="160" />
        <el-table-column label="任务类型" prop="typeLabel" width="100" />
        <el-table-column label="展示端" min-width="220">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.scopes"
              multiple
              clearable
              placeholder="为空表示各端均不展示"
              size="small"
              style="width: 200px"
            >
              <el-option label="APP" value="app" />
              <el-option label="小程序" value="mini" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="说明" prop="tip" min-width="180" show-overflow-tooltip />
      </el-table>

      <div style="display: flex; justify-content: flex-end;">
        <el-button type="primary" :disabled="saveLoading" :loading="saveLoading" @click="submitForm11">提  交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getConfigByKey, updateConfigByKey } from '@/api/system/config'

const DEFAULT_TASK_DISPLAY_ROWS = [
  { code: 'SIGN', name: '签到', typeLabel: '签到', defaultScopes: ['app', 'mini'], tip: '任务中心签到模块' },
  { code: 'REGISTER', name: '首次注册登录', typeLabel: '新手', defaultScopes: ['app', 'mini'], tip: '完成手机号绑定注册' },
  { code: 'DOWNLOAD_APP', name: '首次下载APP', typeLabel: '新手', defaultScopes: ['app'], tip: '仅 APP 端可完成' },
  { code: 'FIRST_PURCHASE', name: '首次完成购物', typeLabel: '新手', defaultScopes: ['app', 'mini'], tip: '全渠道首购奖励' },
  { code: 'SHARE', name: '分享得积分', typeLabel: '每日', defaultScopes: ['app', 'mini'], tip: 'APP+小程序合计日限' },
  { code: 'SHARE_HOME_VIDEO', name: '分享首页视频', typeLabel: '每日', defaultScopes: ['app', 'mini'], tip: '分享首页视频，默认每日5次' },
  { code: 'COURSE', name: '学习首页课程', typeLabel: '每日', defaultScopes: ['app'], tip: '默认仅 APP 展示' },
  { code: 'BROWSE_MALL', name: '浏览商城60秒', typeLabel: '每日', defaultScopes: ['app', 'mini'], tip: '浏览商城任务' },
  { code: 'INVITE', name: '邀好友享积分', typeLabel: '每日', defaultScopes: ['app', 'mini'], tip: '邀请新用户' },
  { code: 'INVITED', name: '填写朋友邀请码', typeLabel: '每日', defaultScopes: ['app', 'mini'], tip: '被邀请奖励，仅可完成一次' }
]

const LOG_TYPE_SCOPE_OVERRIDES = {
  '10': ['app'],
  '28': ['app']
}

export default {
  name: "IntegralConfig",
  computed: {
    filteredIntegralLogTypeOptions() {
      if (this.logTypePreviewPlatform === 'all') {
        return this.integralLogTypeOptions
      }
      return this.integralLogTypeOptions.filter(dict => this.isLogTypeVisible(dict.dictValue, this.logTypePreviewPlatform))
    }
  },
  data() {
    return {
      integralLogTypeOptions: [],
      taskDisplayRows: [],
      logTypeDisplayRows: [],
      logTypePreviewPlatform: 'all',
      form11: {
        integralRegister: null,
        integralFinishConsultation: null,
        integralAddPatient: null,
        integralAddUserAddress: null,
        integralInvite: null,
        integralInvited: null,
        integralNewTask: null,
        integralRatio: null,
        integralShare: null,
        integralShareHomeVideo: 10,
        integralFollow: null,
        integralCourse: null,
        integralProduct: null,
        integralFirstVideo: null,
        integralFinishVideo: null,
        integralByOneDay: null,
        integralFirstOrderPoint: null,
        integralTypeByOneDay: null,
        integralSubscriptCourse: null,
        downloadAppIntegral: null,
        integralFirstPurchase: 20,
        integralInviteDailyLimit: 3,
        integralShareDailyLimit: 5,
        integralShareHomeVideoDailyLimit: 5,
        integralCourseDailyLimit: 5,
        integralProductDailyLimit: 1,
        integralProductBrowseSeconds: 60,
        integralComment: 100,
        integralCommentProduct: 150,
        integralExpireDays: 90,
        integralExpireLaunchDate: null,
        taskDisplayScope: {},
        logTypeDisplayScope: {},
      },
      saveLoading: false,
    }
  },
  created() {
    this.initTaskDisplayRows()
    this.getConfigByKey("his.integral");
    this.getDicts("sys_integral_log_type").then(response => {
      this.integralLogTypeOptions = response.data;
      this.initLogTypeDisplayRows(this.form11.logTypeDisplayScope || {}, response.data)
    });
  },
  methods: {
    getDefaultLogTypeScopes(code) {
      return LOG_TYPE_SCOPE_OVERRIDES[code] ? [...LOG_TYPE_SCOPE_OVERRIDES[code]] : ['app', 'mini']
    },
    isLogTypeVisible(code, platform) {
      if (platform === 'all') {
        return true
      }
      const row = this.logTypeDisplayRows.find(item => item.code === String(code))
      if (!row || !row.scopes || row.scopes.length === 0) {
        return false
      }
      return row.scopes.includes(platform)
    },
    initLogTypeDisplayRows(logTypeDisplayScope = {}, dictOptions = []) {
      const rows = (dictOptions || []).map(dict => {
        const code = String(dict.dictValue)
        const savedScope = logTypeDisplayScope[code]
        const scopes = savedScope != null
          ? savedScope.split(',').filter(Boolean)
          : this.getDefaultLogTypeScopes(code)
        return {
          code,
          name: dict.dictLabel,
          scopes
        }
      })
      rows.sort((a, b) => Number(a.code) - Number(b.code))
      this.logTypeDisplayRows = rows
    },
    handleLogTypePreviewChange() {
      // 仅影响上方「单日可获总积分类型」下拉预览，不改已保存值
    },
    buildLogTypeDisplayScope() {
      const logTypeDisplayScope = {}
      this.logTypeDisplayRows.forEach(row => {
        logTypeDisplayScope[row.code] = (row.scopes || []).join(',')
      })
      return logTypeDisplayScope
    },
    initTaskDisplayRows(taskDisplayScope = {}) {
      this.taskDisplayRows = DEFAULT_TASK_DISPLAY_ROWS.map(item => {
        const savedScope = taskDisplayScope[item.code]
        const scopes = savedScope != null
          ? savedScope.split(',').filter(Boolean)
          : [...item.defaultScopes]
        return {
          ...item,
          scopes
        }
      })
    },
    buildTaskDisplayScope() {
      const taskDisplayScope = {}
      this.taskDisplayRows.forEach(row => {
        taskDisplayScope[row.code] = (row.scopes || []).join(',')
      })
      return taskDisplayScope
    },
    getConfigByKey(key){
      getConfigByKey(key).then(response => {
        this.configId=response.data.configId;
        this.configKey=response.data.configKey;
        const configValue = Object.assign({
          integralFirstPurchase: 20,
          integralInviteDailyLimit: 3,
          integralShareDailyLimit: 5,
          integralShareHomeVideo: 10,
          integralShareHomeVideoDailyLimit: 5,
          integralCourseDailyLimit: 5,
          integralProductDailyLimit: 1,
          integralProductBrowseSeconds: 60,
          integralComment: 100,
          integralCommentProduct: 150,
          integralExpireDays: 90,
          taskDisplayScope: {},
          logTypeDisplayScope: {}
        }, JSON.parse(response.data.configValue));
        this.form11 = configValue
        this.initTaskDisplayRows(configValue.taskDisplayScope || {})
        this.initLogTypeDisplayRows(configValue.logTypeDisplayScope || {}, this.integralLogTypeOptions)
      });
    },
    submitForm11(){
      this.saveLoading = true
      this.form11.taskDisplayScope = this.buildTaskDisplayScope()
      this.form11.logTypeDisplayScope = this.buildLogTypeDisplayScope()
      const param={configId:this.configId,configValue:JSON.stringify(this.form11)}
      updateConfigByKey(param).then(response => {
        const {code} = response
        if (code === 200) {
          this.msgSuccess("修改成功");
        }
        this.saveLoading = false
      });
    },
  }
}
</script>

<style scoped>

</style>