opms_wechat/pages/partners/components/distrDetail.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-02-15 16:25:58
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-05-22 16:10:29
 * @Description: file content
 * @FilePath: \oms\pages\distributor\components\distrDetail.vue
-->
<template>
  <view>
    <!-- 经销商 -->
    <view v-if="detail.distType == '10'">
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">经销商名称:</view>
              <view class="desc">{{ detail.distName }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row>
          <u-col span="12">
            <view class="flex_l">
              <view class="label">助记名称:</view>
              <view class="desc">{{ detail.abbrName }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row>
          <u-col span="12">
            <view class="flex_l">
              <view class="label">业务范围:</view>
              <view class="desc">{{ detail.businessScope }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">注册资金:</view>
              <view class="desc">{{ detail.capital }}万元</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">注册地:</view>
              <view class="desc">{{ detail.registerDistrict }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">授权客户类型:</view>
              <view class="desc">{{ setCustomerType(detail.customerType) }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">ABC项目出货总金额:</view>
              <view class="desc"><u-text mode="price" :text="detail.allProductAmount"></u-text></view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">未回款金额:</view>
              <view class="desc"><u-text mode="price" :text="detail.unpaidAmount"></u-text></view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">已有代理品牌和产品:</view>
              <view class="desc">{{ detail.existedProduct }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">历史合作终端客户名称:</view>
              <view class="desc">{{ detail.historyCustomer }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">归属销售:</view>
              <view class="desc">{{ detail.belongSale }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">销售人数:</view>
              <view class="desc">{{ detail.saleNum }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">创建时间:</view>
              <view class="desc">{{ parseTime(detail.createdTime, '{y}-{m}-{d}') }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">更新时间:</view>
              <view class="desc">{{ parseTime(detail.updatedTime, '{y}-{m}-{d}') }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
    </view>
    <!-- 代理商 -->
    <view v-if="detail.distType == '20'">
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">代理商名称:</view>
              <view class="desc">{{ detail.distName }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">助记名称:</view>
              <view class="desc">{{ detail.abbrName }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">所在省份:</view>
              <view class="desc">{{ detail.provinceDesc }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">业务范围:</view>
              <view class="desc">{{ detail.businessScope }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">注册资金:</view>
              <view class="desc">{{ detail.capital }}万元</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">注册地:</view>
              <view class="desc">{{ detail.registerDistrict }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">现有销售人数：:</view>
              <view class="desc">{{ detail.saleNum }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">授权客户类型:</view>
              <view class="desc">{{ setCustomerType(detail.customerType) }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">授权区域代理:</view>
              <view class="desc">{{ detail.proxyDistrict }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">代理合同:</view>
              <view class="desc" @click="downloadFile(detail.contractUrl)">
                <u-text type="primary" text="附件"></u-text>
              </view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">ABC项目出货总金额:</view>
              <view class="desc"><u-text mode="price" :text="allProductAmount"></u-text></view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">未回款金额:</view>
              <view class="desc"><u-text mode="price" :text="unpaidAmount"></u-text></view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">已有代理品牌和产品:</view>
              <view class="desc">{{ detail.existedProduct }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="info-item">
        <u-row justify="space-between" gutter="10">
          <u-col span="12">
            <view class="flex_l">
              <view class="label">历史合作终端客户名称:</view>
              <view class="desc">{{ detail.historyCustomer }}</view>
            </view>
          </u-col>
        </u-row>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'OmsCustomerDetail',
    props: {
      detail: {
        type: [Object],
        default: {},
      },
    },
    data() {
      return {
        customerOptions: [],
      }
    },

    mounted() {
      this.getOptions()
    },

    methods: {
      //通用下载文件方法
      downloadFile(attachLink) {
        uni.downloadFile({
          url: attachLink, //下载地址，后端接口获取的链接
          success: (data) => {
            if (data.statusCode === 200) {
              uni.saveFile({
                //文件保存到本地
                tempFilePath: data.tempFilePath, //临时路径
                success: function (res) {
                  uni.showToast({
                    icon: 'none',
                    mask: true,
                    title: '文件已保存!',
                    duration: 3000,
                  })
                  uni.openDocument({
                    //fileType: 'docx',
                    showMenu: true, //关键点,可以转发到微信
                    filePath: res.savedFilePath,
                    success: function (res) {
                      console.log('打开文档成功')
                    },
                  })
                },
              })
            }
          },
          fail: (err) => {
            console.log(err)
            uni.showToast({
              icon: 'none',
              mask: true,
              title: '失败请重新下载',
            })
          },
        })
      },
      setCustomerType(type) {
        if (this.customerOptions.length == 0) return
        if (!type) return
        let arr = []
        let typeArr = type.split(',')
        typeArr.map((item) => {
          arr.push(this.customerOptions.find((e) => e.key == item).value)
        })
        return arr.join(',')
      },
      getOptions() {
        Promise.all([this.getDicts('cust_idy')])
          .then(([data]) => {
            this.customerOptions = data.data.values
            // data.data.values.filter((i) => {
            //   this.customerOptions[i.key] = i.value
            // })
          })
          .catch((err) => console.log(err))
      },
    },
  }
</script>

<style lang="scss" scoped>
  .info-item {
    padding: 20rpx;
    .label {
      width: 160rpx;
      color: #646464;
      font-size: 26rpx;
    }
    .desc {
      font-size: 26rpx;
      margin-left: 20rpx;
    }
  }
</style>