jsm-mall-h5-front/src/packageMine/pages/securityFeeDetails.vue

<template>
  <!-- #ifdef H5 -->
  <view>
    <zj-page-layout
      :hasFooter="true"
      :isScroll="true"
      :refresherTriggered="refresherTriggered"
      @refresherrefresh="refresherrefresh"
    >
      <template slot="header">
        <view class="tab-container">
          <u-tabs
            :scrollable="false"
            :list="tabList"
            :current="tabCurrent"
            @click="changeTab"
            lineColor="#3D8FFD"
            itemStyle="padding-left: 0; padding-right: 0; height: 88rpx;"
            :activeStyle="{ color: '#3D8FFD' }"
            :inactiveStyle="{ color: '#666666' }"
          >
          </u-tabs>
        </view>
      </template>
      <view class="list-container">
        <view
          class="goods-item"
          v-for="(item, index) in dataList.filter(
            item => !!~[['INSTALL_HOME', 'INSTALL_OTHER'], ['REPAIR'], ['OTHER']][tabCurrent].indexOf(item.categoryType)
          )"
          :key="index"
        >
          <view class="aItemView">
            <view class="aItemView_title">网点名称</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.importWebsitName }}</view>
            </view>
          </view>
          <!-- 安装 -->
          <view v-if="tabCurrent == 0" class="aItemView">
            <view class="aItemView_title">安装品类</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.category }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0" class="aItemView">
            <view class="aItemView_title">内机条码</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.insideCode }}</view>
              <view class="aItemView_v2 gudingk copytext" @click="copy(item.insideCode)">复制</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">内机名称</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.insideName }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">基础安装费</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.baseAmount }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">辅材达标</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.materialAmount }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">回收旧机达标</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.recoveryAmount }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">其它</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.otherAmount }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">评价数据达标</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.appraiseAmount }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">合计金额</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.totalAmount }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">工单编号</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.orderNo }}</view>
              <view class="aItemView_v2 gudingk copytext" @click="copy(item.orderNo)">复制</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">销售单号</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.salesOrderNo }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">安装日期</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.workDate ? item.workDate.split(' ')[0] : '' }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">销售类型</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.salesType }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">用户姓名</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.userName }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">用户电话</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.userMobile }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">用户地址</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.userAddress }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">工程师1名称</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.workerName1 }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">工程师1电话</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.workerMobile1 }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">工程师1比例</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.workerSettleRate1 }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0" class="aItemView">
            <view class="aItemView_title">工程师1金额</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.workerSettleAmount1 }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">工程师2名称</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.workerName2 }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">工程师2电话</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.workerMobile2 }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">工程师2比例</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.workerSettleRate2 }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 0 && item.isShow" class="aItemView">
            <view class="aItemView_title">工程师2金额</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.workerSettleAmount2 }}</view>
            </view>
          </view>
          <!-- 维修 -->
          <view v-if="tabCurrent == 1" class="aItemView">
            <view class="aItemView_title">维修品类</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.category }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 1" class="aItemView">
            <view class="aItemView_title">自编号</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.repairCustomCode }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 1" class="aItemView">
            <view class="aItemView_title">条码</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.insideCode }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 1 && item.isShow" class="aItemView">
            <view class="aItemView_title">维修费用</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.baseAmount }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 1 && item.isShow" class="aItemView">
            <view class="aItemView_title">修复日期</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.workDate ? item.workDate.split(' ')[0] : '' }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 1 && item.isShow" class="aItemView">
            <view class="aItemView_title">用户姓名</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.userName }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 1 && item.isShow" class="aItemView">
            <view class="aItemView_title">用户电话</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.userMobile }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 1 && item.isShow" class="aItemView">
            <view class="aItemView_title">用户地址</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.userAddress }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 1 && item.isShow" class="aItemView">
            <view class="aItemView_title">维修内容</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.repairContent }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 1 && item.isShow" class="aItemView">
            <view class="aItemView_title">工程师名称</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.workerName1 }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 1 && item.isShow" class="aItemView">
            <view class="aItemView_title">工程师电话</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.workerMobile1 }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 1" class="aItemView">
            <view class="aItemView_title">结算金额</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.workerSettleAmount1 }}</view>
            </view>
          </view>
          <!-- 其他 -->
          <view v-if="tabCurrent == 2" class="aItemView">
            <view class="aItemView_title">费用名称</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.typeName }}</view>
            </view>
          </view>
          <view v-if="tabCurrent == 2" class="aItemView">
            <view class="aItemView_title">结算金额</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.workerSettleAmount1 }}</view>
            </view>
          </view>
          <view class="aItemView">
            <view class="aItemView_title">备注</view>
            <view class="aItemView_info">
              <view class="aItemView_v1 gudingkbig">{{ item.remark }}</view>
            </view>
          </view>
          <view v-if="tabCurrent != 2" class="shouqizhankai" @click="item.isShow = !item.isShow"
            >{{ item.isShow ? '收起' : '展开' }}
          </view>
        </view>
      </view>
    </zj-page-layout>
  </view>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <web-view
    :src="webViewHref(`/packageMine/pages/coupon/list`, pam, crossPagePam)"
    @message="crossPage.$listener"
  ></web-view>
  <!-- #endif -->
</template>

<script>
// #ifdef H5
import { copy } from "@/common/utils/common.js"
export default {
  data() {
    return {
      settleMonthWagesId: "",
      tabList: [
        { name: '安装费用', value: 0 },
        { name: '维修费用', value: 1 },
        { name: '其他费用', value: 2 },
      ],
      tabCurrent: 0, // 当前选择值
      refresherTriggered: false, // 下拉刷新状态
      dataList: []
    }
  },

  async onLoad({ settleMonthWagesId }) {
    this.settleMonthWagesId = settleMonthWagesId
    this.getList();
  },

  methods: {
    copy,
    getList() {
      this.$api.post('/user/my/settle/item', {
        settleMonthWagesId: this.settleMonthWagesId
      }).then(res => {
        this.dataList = res.data.map(item => ({ isShow: false, ...item, }))
      }).catch(() => {
      }).finally(res => {
        this.refresherTriggered = false;
      })
    },
    // 滚动到底部
    scrolltolower(e) {
    },
    // 触发下拉刷新
    async refresherrefresh(e) {
      this.refresherTriggered = true;
      this.getList();
    },
    changeTab(e) {
      this.tabCurrent = e.value;
    },
  }
}
// #endif
// #ifndef H5
export default {
  data() {
    return {
      pam: {},
    }
  },

  onLoad(pam) {
    this.pam = pam;
  },
}
// #endif
</script>

<style lang="scss">
.tab-container {
  background: #ffffff;
}

.list-container {
  padding: 20rpx 20rpx 40rpx;

  .goods-item {
    @include zj-card;
    padding: 20rpx;
    margin-top: 20rpx;
    display: block !important;
  }
}

.aItemView {
  width: 100%;
  display: flex;

  .aItemView_title {
    width: 250rpx;
    color: #aaa;
  }

  .aItemView_info {
    flex: 1;
    display: flex;
    justify-content: space-between;

    .aItemView_v1 {
    }

    .gudingk {
      width: 130rpx;
    }

    .gudingkbig {
      flex: 1;
    }

    .aItemView_v2 {
    }

    .aItemView_v3 {
    }
  }

  &:not(:last-child) {
    margin-bottom: 16rpx;
  }

  .copytext {
    color: blue;
    text-align: center;
  }
}

.shouqizhankai {
  width: 100%;
  box-sizing: border-box;
  padding: 16rpx 0 0;
  text-align: center;
}
</style>