crm-app-vue3/pages/orderDetail/tabs/sendInfo/index.vue

<template>
  <view class="caseInfo_wrap">
    <view class="caseInfo_content_wrap">
      <view class="caseInfo_title">
        <view>
          <image src="/static/clueDetail/icon-caseInfo.png" mode=""></image>
          <text class="info_text">发单信息</text>
        </view>
        <u-icon name="edit-pen-fill" color="#2979ff" size="18" @click="handleEdit"></u-icon>
      </view>
      <view class="caseInfo_main_wrap">
        <view class="Info_item" v-for="item in caseInfoColumn" :key="item.prop">
          <text class="label">{{ item.label }}</text>
          <text class="value">{{
            item.dictType
              ? $selectDictLabel(item.dictType, receiptDetail[item.prop])
              : receiptDetail[item.prop]
              ? receiptDetail[item.prop]
              : "-"
          }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const caseInfoColumn = [
  {
    prop: "receiptDate",
    label: "收单日期",
  },
  {
    prop: "item",
    label: "物品",
  },
  {
    prop: "phone",
    label: "电话",
  },
  {
    prop: "authenticateNickName",
    label: "鉴定",
  },
  {
    prop: "category",
    label: "类别",
    dictType: "crm_form_category",
  },
  {
    prop: "brand",
    label: "品牌",
    dictType: "crm_form_brand",
  },
  {
    prop: "idCard",
    label: "身份证号码",
  },
  {
    prop: "customName",
    label: "开户人姓名",
  },
  {
    prop: "bankCardNumber",
    label: "银行卡号",
  },
  {
    prop: "bankName",
    label: "银行名称",
  },
  {
    prop: "paymentMethod",
    label: "付款方式",
  },
  {
    prop: "visitTime",
    label: "计划上门时间",
  },
  {
    prop: "remarks",
    label: "补充说明",
  },
  {
    prop: "priceRange",
    label: "预估价格范围",
  },
  {
    prop: "tactic",
    label: "采用战术",
    dictType: "crm_form_tactic",
  },
];
export default {
  props: {
    receiptDetail: {
      type: Object,
      default: () => {},
    },
    sendFormId: {
      type: [Number, String],
      required: true,
    },
    clueId: {
      type: [Number, String],
      required: true,
    },
  },
  data() {
    return {
      caseInfoColumn,
    };
  },
  methods: {
    handleEdit() {
      uni.navigateTo({
        url: `/pages/orderForm/index?clueId=${this.clueId}&sendFormId=${this.sendFormId}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.caseInfo_wrap {
  min-height: 400px;
  .caseInfo_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    background: #f4f4f6;
    padding: 0 40rpx;

    image {
      width: 24rpx;
      height: 24rpx;
      margin-right: 10rpx;
    }

    .info_text {
      font-size: 24rpx;
      color: #202020;
    }

    .edit-btn {
      font-size: 24rpx;
      color: #3498db;
      padding: 8rpx 16rpx;
      border-radius: 8rpx;
      background-color: #fff;
      border: 1rpx solid #3498db;
    }
  }

  .caseInfo_main_wrap {
    .Info_item {
      padding: 18rpx 40rpx;
      display: flex;
      justify-content: space-between;

      .label {
        color: #999999;
        font-size: 26rpx;
        width: 160rpx;
      }

      .value {
        font-size: 26rpx;
        color: #202020;
        text-align: right;
        width: 500rpx;
      }
    }
  }
}
</style>