crm-mobile/pages_crm/components/detailSection/baseInfoItem.vue

<template>
  <view
    v-if="field.formType === 'detail_table'"
    class="table-container">
    <template v-if="!$isEmpty(field.value)">
      <view
        v-for="(child, index) in field.value"
        :key="index">
        <view class="table-title">
          {{ field.name }}{{ index + 1 }}
        </view>
        <base-info-item
          v-for="(item, childIndex) in child"
          :key="childIndex"
          :field="item" />
      </view>
    </template>
  </view>

  <view
    v-else-if="field.formType !== 'desc_text'"
    class="info-item">
    <view class="info-item-label">
      {{ field.name }}
    </view>
    <view class="info-item-value">
      <template v-if="field.formType === 'file'">
        <view
          v-for="(file, childIndex) in field.value"
          :key="childIndex"
          class="file-item"
          @click="downloadFile(file)">
          {{ file.name }}
        </view>
      </template>
			
      <template v-else-if="field.formType === 'handwriting_sign'">
        <wk-signature-view :batch-id="field.value" />
      </template>
			
      <template v-else-if="field.formType === 'field_tag'">
        <view class="tag-wrapper">
          <text
            v-for="(tag, tagIndex) in (field.value || [])"
            :key="tagIndex"
            :style="{backgroundColor: tag.color}"
            class="tag-item">
            {{ tag.name }}
          </text>
        </view>
      </template>
			
      <template v-else-if="field.formType === 'field_attention'">
        <view class="attention-wrapper">
          <view
            v-for="(item, aIndex) in getAttenditonList(field.value)"
            :key="aIndex"
            :class="{active: item}"
            class="ft ft-focus-on star-icon" />
        </view>
      </template>
			
      <template v-else-if="isWebSite(field)">
        <text
          class="font-theme-color"
          @click="handlerWebsite(field)">
          {{ valueStr || '' }}
        </text>
      </template>
			
      <template v-else-if="isTel(field)">
        <text
          class="font-theme-color"
          @click="handlerCall(field)">
          {{ valueStr || '' }}
        </text>
      </template>
      
      <template v-else>
        {{ valueStr || '' }}
      </template>
    </view>

    <uni-popup
      v-if="isWebSite(field)"
      ref="popup"
      type="dialog">
      <uni-popup-dialog
        :content="dialogMsg"
        type="warning"
        @confirm="handleDialogConfirm" />
    </uni-popup>
  </view>

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

<script>
  import { downloadFile } from '@/utils/file.js'
  import fieldValueMixins from '@/mixins/fieldValueMixins.js'
  import BaseInfoItem from './baseInfoItem.vue'

  export default {
    name: 'BaseInfoItem',
    components: {
      BaseInfoItem
    },
    mixins: [fieldValueMixins],
    props: {
      field: {
        type: Object,
        required: true
      },
      detailData: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        dialogMsg: '',
        webUrl: ''
      }
    },
    computed: {
      valueStr() {
        return this.getFieldValue(this.field)
      }
    },
    methods: {
      /**
       * 打电话
       */
      handlerCall(item) {
        let tel = this.getFieldValue(item)
        if (!tel) return
        uni.makePhoneCall({
          phoneNumber: tel
        })
      },
		
      getAttenditonList(val) {
        // 主要是为了处理 v-for 循环数字报错问题
        let list = Array(5).fill(false)
        const num = Number(val) || 0
        if (num > 0) {
          const checked = Array(num).fill(true)
          list.splice(0, num, ...checked)
        }
        return list
      },

      downloadFile(file) {
        downloadFile(file)
      },

      handlerWebsite(item) {
        this.webUrl = this.getFieldValue(item)
        if (!this.webUrl) return
        if (
          !this.webUrl.startsWith('http://') ||
          !this.webUrl.startsWith('https://')
        ) {
          this.webUrl = `http://${this.webUrl}`
        }
        this.dialogMsg = `使用浏览器打开 ${this.webUrl} ？`
        this.$refs.popup.open()
      },

      handleDialogConfirm(next) {
        next()
        // #ifdef APP-PLUS
        plus.runtime.openURL(this.webUrl)
        // #endif
        // #ifdef H5
        window.open(this.webUrl, '_blank')
      // #endif
      }
    }
  }
</script>

<style scoped lang="scss">
.font-theme-color {
	color: $theme-color;
}

.info-item {
  width: 100%;
  border-bottom: 1rpx solid #f9f9f9;
  padding: 0 52rpx;
  .info-item-label {
    font-size: 26rpx;
    color: $light;
    padding: 15rpx 0;
  }
  .info-item-value {
    width: 100%;
    min-height: 50rpx;
    font-size: 30rpx;
    color: $dark;

    .file-item {
      width: 100%;
      color: $theme-color;
      font-size: 28rpx;
      @include ellipsis;
    }

    .signaure-img {
      width: 100%;
    }
		
		.tag-wrapper {
			padding-bottom: 20rpx;
			.tag-item {
				font-size: $wk-font-mini;
				color: white;
				border-radius: 5rpx;
				margin: 10rpx;
				padding: 5rpx 10rpx;
			}
		}
		
		.attention-wrapper {
			padding-bottom: 10rpx;
			@include left;
			.star-icon {
				font-size: 42rpx;
				color: #D9D9D9;
				margin: 0 10rpx;
				&.active {
					color: #FAC23D;
				}
			}
		}
  }
}

.desc_text {
  font-size: $wk-font-base;
  border: 0 none;
  margin: 10rpx 0;
}

.table-container {
  margin: 0 20rpx;
  .table-title {
    width: 100%;
    font-weight: 500;
    font-size: $wk-font-medium;
    background-color: #ebeef1;
    border-radius: 10rpx;
    padding: 15rpx 32rpx;
  }
  .info-item {
    padding: 0 32rpx;
  }
}
</style>