crm-mobile/components/wk-form/wk-form.vue

<template>
  <view v-if="showForm" class="wk-form">
    <template
      v-for="(field, index) in fieldArr">
      <template v-if="field.show">
        <!-- 单行文本、邮箱 -->
        <wk-field-input
          v-if="['text', 'email', 'website'].includes(field.formType)"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          @change="valueChange" />

        <!-- 数字、小数 -->
        <wk-field-input-number
          v-else-if="['floatnumber', 'number', 'percent'].includes(field.formType)"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          @change="valueChange" />

        <!-- 手机号 -->
        <wk-field-mobile
          v-else-if="field.formType === 'mobile'"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          @change="valueChange" />

        <!-- 多行文本 -->
        <wk-field-textarea
          v-if="field.formType === 'textarea'"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          @change="valueChange" />

        <!-- 选项、商机状态组、商机阶段 -->
        <wk-field-select
          v-else-if="[
            'select',
            'checkbox',
            'business_type',
            'business_status',
            'category',
            'receivables_plan'
          ].includes(field.formType)"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          @change="valueChange" />

        <!-- 员工 -->
        <wk-field-user
          v-else-if="['single_user', 'user'].includes(field.formType)"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          @change="valueChange" />

        <!-- 部门 -->
        <wk-field-dept
          v-else-if="field.formType === 'structure'"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          @change="valueChange" />

        <!-- 时间日期 -->
        <wk-field-datetime
          v-else-if="['datetime', 'date'].includes(field.formType)"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          @change="valueChange" />

        <!-- label -->
        <wk-field-label
          v-else-if="field.formType === 'label'"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          @change="valueChange" />

        <!-- 关联项 -->
        <wk-field-revelance
          v-else-if="['customer', 'contacts', 'contract', 'business'].includes(field.formType)"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          :is-detail-table="isDetailTable"
          @change="valueChange" />

        <!-- map_address -->
        <wk-field-address
          v-else-if="field.formType === 'map_address'"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          @change="valueChange" />

        <wk-field-file
          v-else-if="field.formType === 'file'"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          @change="valueChange" />

        <!-- 布尔值 -->
        <wk-field-bool
          v-else-if="field.formType === 'boolean_value'"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          @change="valueChange" />

        <!-- 定位 -->
        <wk-field-location
          v-else-if="field.formType === 'location'"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          @change="valueChange" />

        <!-- 日期范围 -->
        <wk-field-date-range
          v-else-if="field.formType === 'date_interval'"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          @change="valueChange" />

        <!-- 地址 -->
        <wk-field-position
          v-else-if="field.formType === 'position'"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          @change="valueChange" />

        <!-- 签名 -->
        <wk-field-write-sign
          v-else-if="field.formType === 'handwriting_sign'"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          @change="valueChange" />

        <!-- 明细表格 -->
        <wk-field-table
          v-else-if="field.formType === 'detail_table'"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          :config="getConfig(field)"
          @change="valueChange" />

        <!-- 自定义编号 -->
        <wk-field-serial-number
          v-else-if="field.formType === 'serial_number'"
          :key="index"
          :index="index"
          :field="field" />

        <!-- 自定义标签 -->
        <wk-field-tag
          v-else-if="field.formType === 'field_tag'"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          @change="valueChange" />

        <!-- 关注度 -->
        <wk-field-attention
          v-else-if="field.formType === 'field_attention'"
          :key="index"
          v-model="field.value"
          :index="index"
          :field="field"
          :disabled="field.disabled || false"
          @change="valueChange" />

        <!-- 自定义分组 -->
        <view
          v-else-if="field.formType === 'field_group'"
          :key="index"
          class="wk-field-group">
          <text class="prev-badge" />
          <text>{{ field.name }}</text>
        </view>

        <view v-else-if="field.formType === 'desc_text'" :key="index" class="desc_text">
          <rich-text :nodes="field.value" />
        </view>
      </template>
    </template>
  </view>
</template>

<script>
  import { CheckOnlyField } from 'API/base'

  import WkFieldInput from './wk-field-input.vue'
  import WkFieldInputNumber from './wk-field-input-number.vue'
  import WkFieldMobile from './wk-field-mobile.vue'
  import WkFieldTextarea from './wk-field-textarea.vue'
  import WkFieldUser from './wk-field-user.vue'
  import WkFieldDept from './wk-field-dept.vue'
  import WkFieldSelect from './wk-field-select.vue'
  import WkFieldDatetime from './wk-field-datetime.vue'
  import WkFieldLabel from './wk-field-label.vue'
  import WkFieldRevelance from './wk-field-revelance.vue'
  import WkFieldAddress from './wk-field-address.vue'
  import WkFieldFile from './wk-field-file.vue'
  import WkFieldBool from './wk-field-bool.vue'
  import WkFieldLocation from './wk-field-location.vue'
  import WkFieldDateRange from './wk-field-date-range.vue'
  import WkFieldPosition from './wk-field-position.vue'
  import WkFieldWriteSign from './wk-field-write-sign.vue'
  import WkFieldTable from './wk-field-table.vue'
  import WkFieldTag from './wk-field-tag.vue'
  import WkFieldAttention from './wk-field-attention.vue'
  import WkFieldSerialNumber from './wk-field-serial-number.vue'

  import formMixins from '@/mixins/formMixins.js'
  import { deepCopy, isEmail, isMobile } from '@/utils/lib.js'
  import { isArray, isObject } from '@/utils/types.js'
  import moment from 'moment'

  export default {
    name: 'WkForm',
    components: {
      WkFieldInput,
      WkFieldInputNumber,
      WkFieldMobile,
      WkFieldTextarea,
      WkFieldUser,
      WkFieldDept,
      WkFieldSelect,
      WkFieldDatetime,
      WkFieldLabel,
      WkFieldRevelance,
      WkFieldAddress,
      WkFieldFile,
      WkFieldBool,
      WkFieldLocation,
      WkFieldDateRange,
      WkFieldPosition,
      WkFieldWriteSign,
      WkFieldTable,
      WkFieldTag,
      WkFieldAttention,
      WkFieldSerialNumber
    },
    mixins: [formMixins],
    inheritAttrs: false,
    props: {
      fields: { // 字段列表
        type: Array,
        default: () => []
      },
      batchId: { // 详情的batchId用于字段验重和文件上传
        type: String,
        default: ''
      },
      isDetailTable: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        showForm: true,
        fieldArr: [],
        form: {},

        fileBatchId: null,
        allAssistIds: []
      }
    },
    watch: {
      fields: {
        handler() {
          this.allAssistIds = this.getAllFormAssistId(this.fields)
          this.fieldArr = deepCopy(this.fields)
          let assistHideIds = []


          this.fieldArr.forEach(field => {
            field.show = true

            // 自动编号类型不做必填验证
            if (field.formType === 'serial_number') {
              field.isNull = 0
            }

            if (this.allAssistIds.includes(field.formAssistId)) {
              const res = this.getIdsStatus(field, field.value)
              assistHideIds = Array.from(new Set(assistHideIds.concat(res.hideIds)))
            }
          })

          this.fieldArr.forEach(field => {
            if (assistHideIds.includes(field.formAssistId)) {
              field.show = false
            } else {
              field.show = true
            }
          })
          this.$nextTick(() => {
            if (this.isDetailTable) {
              getApp().globalData.formBridge.detailTableFields = this.fieldArr
            } else {
              getApp().globalData.formBridge.fields = this.fieldArr
            }
            // getApp().globalData.formBridge.fields = this.fieldArr
          })
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      /**
       * 字段值发生变化派发 change 事件
       * @param {Object} data
       */
      valueChange(data) {
        this.checkAssistField(data.field, data.value)
        this.$nextTick(() => {
          this.$emit('change', data)
        })
      },

      /**
       * 切换逻辑表单展示状态
       * @param {Object} field 字段对象
       * @param value 字段值，不传时取 field.value
       */
      checkAssistField(field, value = null) {
        // 非逻辑表单直接返回
        if (![
          'checkbox',
          'select',
        ].includes(field.formType)) return
        if (field.remark !== 'options_type') return

        if (value === null) {
          value = field.value
        }

        const res = this.getIdsStatus(field, value)
        const assistShowIds = res.showIds
        const assistHideIds = res.hideIds

        this.fieldArr.forEach(o => {
          if (!o.hasOwnProperty('show')) {
            this.$set(o, 'show', true)
          }
          if (assistShowIds.includes(o.formAssistId)) {
            // 显示字段
            this.$set(o, 'show', true)
          } else if (assistHideIds.includes(o.formAssistId)) {
            // 隐藏字段
            this.$set(o, 'show', false)
            this.$set(o, 'value', null)
            this.$set(o, 'value', this.mixinsFormatFieldValue(o))
          }
        })
      },

      getIdsStatus(field, value) {
        if (
          !['checkbox', 'select'].includes(field.formType) ||
          field.remark !== 'options_type'
        ) {
          return {
            showIds: [],
            hideIds: []
          }
        }

        let assistShowIds = [] // 展示的字段关联id
        let assistHideIds = [] // 隐藏的字段关联id

        // 获取被选中的选项值
        let selectedOpt = (this.$isEmpty(value) ? [] : value).map(o => o.value)

        Object.keys(field.optionsData).forEach(key => {
          if (selectedOpt.includes(key)) {
            // 被选中的项下关联字段显示
            assistShowIds = assistShowIds.concat(field.optionsData[key])
          } else {
            // 没有选中的项隐藏
            assistHideIds = assistHideIds.concat(field.optionsData[key])
          }
        })

        /**
         * 递归获取显示字段的关联显示字段
         */
        let _showIds = []
        function getShowIds(fieldArr, ids = []) {
          let res = []
          ids.forEach(id => {
            // 查找显示的字段下是否还有关联
            const findRes = fieldArr.find(o => o.formAssistId === id)
            if (
              findRes &&
              ['checkbox', 'select'].includes(findRes.formType) &&
              findRes.remark === 'options_type'
            ) {
              let opt = findRes.value.map(o => o.value)
              Object.keys(findRes.optionsData).forEach(key => {
                if (
                  findRes.optionsData[key] &&
                  opt.includes(key)
                ) {
                  res = res.concat(findRes.optionsData[key])
                }
              })
            }
          })
          // 记录所有id
          _showIds = _showIds.concat(ids)
          res = Array.from(new Set(res)).filter(o => o)
          if (res.length > 0) {
            // 判断查询的结果是否已经被记录，防止无限递归
            let count = 0
            res.forEach(id => {
              if (_showIds.includes(id)) {
                count++
              }
            })
            if (res.length === count) {
              res = []
            }
          }
          const arr = res.length === 0 ? res : getShowIds(fieldArr, res)
          return Array.from(new Set(ids.concat(arr)))
        }

        /**
         * 递归获取隐藏字段的关联隐藏字段
         */
        let _hideIds = []
        function getHidenIds(fieldArr, ids = []) {
          let res = []
          ids.forEach(id => {
            const findRes = fieldArr.find(o => o.formAssistId === id)
            if (
              findRes &&
              ['checkbox', 'select'].includes(findRes.formType) &&
              findRes.remark === 'options_type'
            ) {
              Object.keys(findRes.optionsData).forEach(key => {
                res = res.concat(findRes.optionsData[key])
              })
            }
          })
          _hideIds = _hideIds.concat(ids)

          res = Array.from(new Set(res)).filter(o => o)
          if (res.length > 0) {
            // 判断查询的结果是否已经被记录，防止无限递归
            let count = 0
            res.forEach(id => {
              if (_hideIds.includes(id)) {
                count++
              }
            })
            if (res.length === count) {
              res = []
            }
          }
          const arr = res.length === 0 ? res : getHidenIds(fieldArr, res)
          return Array.from(new Set(ids.concat(arr)))
        }

        _showIds = []
        _hideIds = []
        const arr = this.fieldArr.filter(o => this.allAssistIds.includes(o.formAssistId))
        assistShowIds = getShowIds(arr, assistShowIds)
        assistHideIds = getHidenIds(arr, assistHideIds)

        return {
          showIds: assistShowIds.filter(o => o),
          hideIds: assistHideIds.filter(o => o)
        }
      },

      getConfig(field) {
        const config = { batchId: this.batchId }
        return field.sys_config ? {
					...field.sys_config,
					...config
        } : config
      },

      /**
       * 修改配置项钩子
       * @param {String} key 字段名
       * @param {Object} config
       */
      setConfig(key, config = {}) {
        // config
        // config.disabledMsg {String} 禁用时click toast 提示信息
        // config.otherParams {Object} 选项ajax请求附加参数
        // config.request {Function} 选项ajax
        // config.optionsConfig {Object} 选项配置
        // config.optionsConfig.labelField {String} 选项配置
        // config.optionsConfig.valueField {String} 选项配置
        if (!key) return
        this.$nextTick(() => {
          const findRes = this.fieldArr.find(o => o.fieldName === key)
          if (!findRes) return
          const oldConfig = findRes.sys_config || {}
          findRes.sys_config = {
						...oldConfig,
						...config
          }
          // console.log('set sys_config: ', findRes.name, findRes.sys_config)

          const formType = findRes.formType
          this.$set(findRes, 'formType', null)
          this.$nextTick(function() {
            this.$set(findRes, 'sys_config', config)
            this.$set(findRes, 'formType', formType)
          })
        })
      },

      /**
       * 设置禁用状态钩子
       * @param {String} key 字段名
       * @param {Boolean} flag 是否禁用
       */
      setDisabled(key, flag = false) {
        if (!key) return
        this.$nextTick(() => {
          const findRes = this.fieldArr.find(o => o.fieldName === key)
          // console.log('finddd', key, findRes)
          // console.log('set disabled: ', this.fieldArr)
          if (!findRes) return
          findRes.disabled = flag
          this.$set(findRes, 'disabled', flag)
        })
      },

      /**
       * 修改单个字段的值钩子
       * @param {String} key
       * @param {Any} value
       */
      setFormVal(key, value = null) {
        if (!key) return
        this.$nextTick(() => {
          const findIndex = this.fieldArr.findIndex(o => o.fieldName === key)
          if (findIndex !== -1) {
            let findRes = this.fieldArr[findIndex]
            findRes.value = value
            // this.fieldArr[findIndex].value = value
            // this.$set(findRes, 'value', value)
            this.$set(this.fieldArr, findIndex, findRes)
            // console.log('emit change findRes: ----', findRes)
            this.$nextTick(() => {
              this.$emit('change', {
                index: findIndex,
                field: findRes,
                value: value
              })
            })
          }
        })
      },

      setForm(form = {}) {
        this.$nextTick(function() {
          Object.keys(form).forEach(key => {
            this.setFormVal(key, form[key])
          })
        })
      },

      /**
       * 强制刷新视图
       */
      updateView() {
        this.$nextTick(() => {
          this.showForm = false
          this.$nextTick(() => {
            this.showForm = true
            this.$set(this, 'fieldArr', this.fieldArr)
          })
        })
      },


      /**
       * 通过字段名修改字段的可见状态
       * @param {Object} fieldName 字段名
       * @param {Object} status 状态 默认 true 可见
       */
      updateVisibleStatus(fieldName, status = true) {
        const findRes = this.fieldArr.find(o => o.fieldName === fieldName)
        if (!findRes) return
        this.$set(findRes, 'show', status)
        this.$forceUpdate()
      },

      /**
       * 通过字段名获取单个字段的值
       * @param {String} fieldName
       */
      getValueByFieldName(fieldName) {
        const findRes = this.fieldArr.find(o => o.fieldName === fieldName)
        if (!findRes) return undefined
        return this.getFieldValue(findRes)
      },

      /**
       * 修改字段配置
       * @param {Object} index
       * @param {Object} data
       */
      updateFields(index, data) {
        this.$set(this.fieldArr, index, {
					...this.fieldArr[index],
					...data
        })
      },

      /**
       * 获取表单数据
			 * @param {Boolean} check 是否进行表单验证 默认true
			 * @param {Boolean} format 是否格式化值 默认true
       */
      getForm(check = true, format = true) {
        // eslint-disable-next-line no-async-promise-executor
        return new Promise(async(resolve, reject) => {
          // 拆分自定义字段和固定字段
          let form = {
            field: [],
            entity: {}
          }

          for (let i = 0; i < this.fieldArr.length; i++) {
            const field = this.fieldArr[i]

            let value = null

            if (format) {
              value = this.getFieldValue(field)
            } else {
              value = this.$isEmpty(field.value) ? null : field.value
            }
            // 如果字段没有展示则把值设置为空
            if (field.show === false) {
              value = null
            }

            if (check && field.show) {
              if (field.formType === 'detail_table') {
                if (field.isNull === 1 && this.$isEmpty(value)) {
                  this.$toast(`请完善${field.name}数据`)
                  reject('请检查数据格式！')
                  return
                }
                const len = field.fieldExtendList.filter(o => o.isNull === 1).length
                // console.log('len,  ', len, field)
                if (len > 0 && this.$isEmpty(value)) {
                  this.$toast(`请完善${field.name}数据`)
                  reject('请检查数据格式！')
                  return
                }
                if (!this.$isEmpty(value)) {
                  for (let j = 0; j < value.length; j++) {
                    const child = value[j]
                    for (let k = 0; k < child.length; k++) {
                      try {
                        await this.validateFieldValue(child[k], child[k].value)
                      } catch {
                        reject('请检查数据格式！')
                        return
                      }
                    }
                  }
                }
              } else {
                try {
                  await this.validateFieldValue(field, value)
                } catch {
                  reject('请检查数据格式！')
                  return
                }
              }
            }

            if (field.formType === 'map_address') {
              form.entity = {
								...form.entity,
								...value,
              }
            } else if (field.fieldType === 1) {
              form.entity[field.fieldName] = value
            } else {
              form.field.push({
								// ...field,
								...this.fields[i],
								value
              })
            }
          }
          resolve(form)
        })
      },

      /**
       * 字段校验
       * @param {Object} field
       * @param {Object} value
       */
      validateFieldValue(field, value) {
        return new Promise((resolve, reject) => {
          if (field.isNull === 1 && this.$isEmpty(value)) {
            this.$toast(`${field.name}不能为空`)
            reject(false)
            return
          }
          if (!this.$isEmpty(value)) {
            if (field.formType === 'mobile' && !isMobile(value)) {
              this.$toast(`${field.name}格式错误`)
              reject(false)
              return
            }
            if (field.formType === 'email' && !isEmail(value)) {
              this.$toast(`${field.name}格式错误`)
              reject(false)
              return
            }
            if (field.formType === 'date_interval') {
              let start = field.value[0] || null
              let end = field.value[1] || null
              if (!start || !end) {
                this.$toast(`${field.name}格式错误`)
                reject(false)
                return
              }
              if (moment(start).isAfter(end)) {
                this.$toast('开始时间不能大于结束时间')
                reject(false)
                return
              }
            }
            if (field.isUnique === 1) {
              const params = {
                fieldId: field.fieldId,
                value: value
              }
              if (this.batchId) {
                params.batchId = this.batchId
              }
              CheckOnlyField(params).then(res => {
                if (res.status === 0) {
                  this.$toast(field.name + '不能重复')
                  reject(false)
                } else {
                  resolve(true)
                }
              }).catch(() => {
                reject(false)
              })
              return
            }
          }
          resolve(true)
        })
      },

      /**
       * 获取单个字段保存值
       * @param {Object} field
       */
      getFieldValue(field) {
        if (this.$isEmpty(field.value)) return ''
        const value = field.value
        console.log('get field value: ', field.name, value)
        switch (field.formType) {
        case 'user':
          if (!isArray(value)) return value
          return value.map(o => o.id || o.userId).join(',')
        case 'single_user':
          if (!isArray(value)) return value
          return value.map(o => o.id || o.userId).join(',')
        case 'structure':
          if (!isArray(value)) return value
          return value.map(o => o.id || o.deptId).join(',')
        case 'select':
          if (this.$isEmpty(value)) return ''
          if (!isArray(value)) return value
          if (value[0].hasOwnProperty('otherVal')) {
            return value[0].otherVal || ''
          }
          return value[0].value
        case 'checkbox':
          if (this.$isEmpty(value)) return ''
          if (!isArray(value)) return value
          return value
            .map(o => {
              if (o.hasOwnProperty('otherVal')) {
                return o.otherVal
              } else {
                return o.value
              }
            })
            .filter(o => !this.$isEmpty(o))
            .join(',')
        case 'business_type':
          if (this.$isEmpty(value)) return ''
          if (!isArray(value)) return value
          return value[0].flowId
        case 'receivables_plan':
          if (this.$isEmpty(value)) return ''
          if (isObject(value)) return value.receivablesPlanId
          if (!isArray(value)) return value
          return value[0].receivablesPlanId
        case 'category':
          if (this.$isEmpty(value)) return ''
          if (isObject(value)) return value.categoryId
          if (!isArray(value)) return value
          return value[0].categoryId
        case 'file':
          console.log('file value: ', value)
          if (this.$isEmpty(value)) return ''
          if (isArray(value)) return value[0].batchId
          if (typeof value === 'string') return value
          return ''
        case 'detail_table':
          if (this.$isEmpty(value)) return []
          if (!isArray(value)) return value
          deepCopy(value)
            .forEach(child => {
              child.forEach(item => {
                delete item.companyId
                item.value = this.getFieldValue(item)
              })
            })
            .filter(child => {
              const len = child.length
              const emptyLen = child.filter(item => this.$isEmpty(item.value)).length
              return len !== emptyLen
            })
        }
        if (['customer', 'business', 'contacts', 'contract'].includes(field.formType)) {
          if (this.$isEmpty(value)) return ''
          if (isObject(value)) return value[`${field.formType}Id`] || value.id
          if (!isArray(value)) return value
          // return value.map(o => o[`${field.formType}Id`] || o.id).join(',')
          return value.map(o => o[`${field.formType}Id`] || o.id)[0]
        }
        return field.value
      }
    }
  }
</script>

<style scoped lang="scss">
  .wk-form {
		padding: 0 30rpx;
		background-color: white;
		overflow: hidden;

		.wk-field-group {
			font-size: $wk-font-base;
			background-color: #F3F5FA;
			padding: 18rpx 30rpx;
			margin: 0 -32rpx;
			@include left;
			.prev-badge {
				width: 10rpx;
				height: 30rpx;
				border-radius: 10rpx;
				background-color: $theme-color;
				margin-right: 15rpx;
			}
		}

		.desc_text {
			font-size: $wk-font-base;
			margin: 10rpx 0;
		}
  }
</style>