crm-mobile/pages_crm/components/tabAbout/aboutProduct.vue

<template>
  <view class="section about-product">
    <view class="section-title">
      <image :src="$static('images/crm_about/product.png')" class="icon" />
      <text class="title">
        产品
      </text>
    </view>
    <view class="section-body">
      <template v-if="list.length > 0">
        <view class="list">
          <view
            v-for="(item, index) in list"
            :key="index"
            class="list-item"
            @click="handleTo(item.productId)">
            <view class="list-item-info">
              <view class="box">
                <text class="left name">
                  {{ item.productName }}
                </text>
                <text class="right text">
                  ￥{{ splitNumber(item.salesPrice) }}
                </text>
              </view>
              <view class="box">
                <text class="left text">
                  数量
                </text>
                <text class="right text">
                  &times; {{ fixedNumber(item.num) }}
                </text>
              </view>
              <view class="box">
                <text class="left text">
                  折扣
                </text>
                <text class="right text">
                  {{ item.discount || 0 }}%
                </text>
              </view>
              <view class="box">
                <text class="left text">
                  合计
                </text>
                <text class="right money">
                  ￥{{ splitNumber(item.subtotal) }}
                </text>
              </view>
            </view>
          </view>
        </view>

        <view class="statistics">
          <view class="box">
            <text class="left text">
              整单折扣
            </text>
            <text class="right text">
              {{ discountRate }}%
            </text>
          </view>
          <view class="box">
            <text class="left text">
              总计
            </text>
            <text class="right money">
              ￥{{ splitNumber(total) }}
            </text>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="no-data">
          暂无数据
        </view>
      </template>
    </view>
  </view>
</template>

<script>
  import { splitNumber } from '@/utils/lib.js'

  export default {
    name: 'AboutProduct',
    props: {
      list: {
        type: Array,
        required: true
      },
      config: {
        type: Object,
        default: () => {}
      },
      discountRate: {
        type: [String, Number],
        default: ''
      },
      total: {
        type: [String, Number],
        default: ''
      }
    },
    data() {
      return {
      }
    },
    // #ifdef MP-WEIXIN
    options: {
      addGlobalClass: true
    },
    // #endif
    methods: {
      splitNumber(num) {
        if (isNaN(Number(num))) return ''
        return splitNumber(num)
      },
      fixedNumber(num, precision = 1) {
        if (!num) return 0
        return num.toFixed(precision)
      },

      handleTo(id) {
        const checkRes = this.$auth('crm.product.read')
        if (!checkRes) {
          this.$toast('权限不足！')
          return
        }
        this.$Router.navigateTo({
          url: '/pages_crm/product/detail',
          query: {
            id: id
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
@import './style.scss';

.box {
  padding: 5rpx 0;
  @include left;
  .left {
    flex: 1;
  }
  .name {
    font-size: $wk-font-large;
    font-weight: 500;
    color: $dark;
  }
  .money {
    font-size: $wk-font-sm;
    font-weight: bold;
    color: $warning;
  }
  .text {
    font-size: $wk-font-sm;
    color: $light;
  }
}

.list {
  padding: 0 32rpx;
  &-item {
    border-bottom: 1rpx solid $border-color;
    @include left;
    &-info {
      flex: 1;
      padding: 12rpx 0;
    }
  }
  .list-item:last-child {
    .list-item-info {
      border-bottom: 0 none;
    }
  }
}

.statistics {
  padding: 15rpx 32rpx;
}
</style>