paper-shopkeeper-app/components/bussiness-components/packingStationItem.vue

<template>
  <view class="packing-area">
    <view class="info" @tap="goDetail">
      <image class="image" :src="info.enterpriseLogo || '/static/imgs/client/client-default.png'"></image>
      <view class="content">
        <view class="title">
          <text class="text" style="max-width: 410rpx">{{ info.enterpriseName }}</text>
          <image
            class="icon"
            :src="info.whetherCooperation ? '/static/imgs/general/cooperation-icon.png' : '/static/imgs/general/no-cooperation-icon.png'"
          ></image>
        </view>
        <view class="desc">
          <text class="text" style="width: 520rpx">{{ transformBusiness(info.business) }}</text>
        </view>
        <view v-if="info.whetherCooperation === 1" class="box-area">
          <view class="box">
            <view><text class="title">月采购量</text></view>
            <view style="margin-top: 16rpx">
              <text class="value">{{ info.monthlyPurchaseQuantity ? `${info.monthlyPurchaseQuantity}吨` : '0' }}</text>
            </view>
          </view>
          <view class="box">
            <view><text class="title">月采购额</text></view>
            <view style="margin-top: 16rpx">
              <text class="value">{{ info.monthlyTradingQuota ? `${info.monthlyTradingQuota}万` : '0' }}</text>
            </view>
          </view>
          <view class="box">
            <view><text class="title">最近购买</text></view>
            <view style="margin-top: 16rpx">
              <text class="value">{{ transformDate(info.lastTradingDate) || '-' }}</text>
            </view>
          </view>
        </view>
        <view v-if="info.whetherCooperation === 0" class="box-area">
          <view class="box">
            <view><text class="title">法定代表人</text></view>
            <view style="margin-top: 16rpx">
              <text class="value">{{ info.legalPerson ? `${info.legalPerson}` : '' }}</text>
            </view>
          </view>
          <view class="box">
            <view><text class="title">注册资本</text></view>
            <view style="margin-top: 16rpx">
              <text class="value">{{ info.registeredCapital ? `${info.registeredCapital}万` : '0' }}</text>
            </view>
          </view>
          <view class="box">
            <view><text class="title">成立时间</text></view>
            <view style="margin-top: 16rpx">
              <text class="value">{{ transformDate(info.openingDate) || '-' }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="other">
      <view class="box">
        <image class="icon" src="/static/imgs/client-list/navigation-icon.png"></image>
        <text class="text" style="width: 248rpx">{{ info.detailedAddress || '未知' }}</text>
      </view>
      <view class="divide"></view>
      <view class="box">
        <image class="icon" src="/static/imgs/client-list/phone-icon.png"></image>
        <text class="text" style="width: 248rpx">{{ info.legalPerson + ' ' + transformPhoneNum(info.contactNumber) }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { go2 } from '@/utils/hook.js'
export default {
  props: {
    info: {
      type: Object,
      default: () => ({
        enterpriseName: '广州市金骏彩色印务有限公司',
        enterpriseLogo: '',
        business: '生产画册、书刊、包装盒、手提袋子、快递箱',
        whetherCooperation: 1,
        monthlyPurchaseQuantity: 100,
        monthlyTradingQuota: 200,
        lastTradingDate: '2020-12-12',
        openingDate: '2020-12-12',
        legalPerson: '张三',
        registeredCapital: 1000,
        contactNumber: '13888888888',
        detailedAddress: '广州市天河区天河路'
      })
    }
  },
  methods: {
    goDetail() {
      // 不能直接使用hook.js文件中的loginGo2，nvue编译生成的store ！== this.$store
      const token = this.$store.state.qnToken
      if (token) {
        go2('client-detail', { id: this.info.enterpriseId }, false)
      } else {
        this.$store.commit('setNextPage', { name: 'client-detail', data: { id: this.info.enterpriseId } })
        go2('login')
      }
    },
    transformBusiness(business) {
      let text = business?.trim() || '未知'
      if (text.length > 17) {
        text = text.substr(0, 17) + '...'
      }
      return '主营：' + text
    },
    transformDate(date) {
      if (date) {
        return date.split('-').join('/')
      }
      return ''
    },
    transformPhoneNum(phoneNum) {
      if (phoneNum) {
        if (this.hasLogin) {
          return phoneNum
        } else {
          return phoneNum.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
        }
      }
      return '--'
    }
  },
  computed: {
    hasLogin() {
      return this.$store.state.qnToken != ''
    }
  }
}
</script>

<style lang="scss">
.packing-area {
  width: 750rpx;
  background-color: #fff;
  .info {
    width: 750rpx;
    padding: 30rpx 32rpx 48rpx;
    border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    .image {
      width: 140rpx;
      height: 140rpx;
      flex-grow: 0;
      flex-shrink: 0;
      margin-right: 20rpx;
    }
    .content {
      flex-grow: 1;
      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        .text {
          word-break: break-all;
          font-size: 32rpx;
          color: #000000;
          font-weight: 600;
        }
        .icon {
          width: 100rpx;
          height: 32rpx;
          flex-grow: 0;
          flex-shrink: 0;
          margin-left: 8rpx;
        }
      }
      .desc {
        margin-top: 14rpx;

        .text {
          font-size: 26rpx;
          color: #333333;
        }
      }
      .box-area {
        margin-top: 30rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        .box {
          width: 170rpx;
          .title {
            display: flex;
            flex-direction: row;
            justify-content: center;
            font-size: 24rpx;
            color: #888888;
          }
          .value {
            display: flex;
            flex-direction: row;
            justify-content: center;
            font-size: 28rpx;
            color: #333333;
            font-weight: 500;
          }
        }
      }
    }
  }
  .other {
    width: 750rpx;
    padding: 24rpx 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .divide {
      width: 2rpx;
      height: 32rpx;
      background: #d8d8d8;
    }
    .box {
      width: 340rpx;
      margin: 0 32rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      .icon {
        width: 52rpx;
        height: 52rpx;
        flex-grow: 0;
        flex-shrink: 0;
        margin-right: 10rpx;
      }
      .text {
        font-size: 24rpx;
        color: #555555;
        // text-overflow: ellipsis;
        // word-break: none;
        // overflow: hidden;
        // white-space: nowrap;
      }
    }
  }
}
</style>