storevisit-ui-mobile/src/views/deviceOutside/productItem.vue

<template>
  <div class="bgcolor productItem">
    <div class="navBarTOP">
      <van-nav-bar class="navBar" title="产品列表" left-arrow @click-left="onClickLeft">
        <template #right>
          <span style="color: #0057ba" @click="placeOrderFn"> 去下单 </span>
        </template>
      </van-nav-bar>
    </div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="container" style="width: 100%; margin: 0 auto">
      <van-tabs class="myTab" type="card" v-model="tabVal" color="#0057ba" @change="tabChange">
        <van-tab :title="timeData + '下单SKU'" name="0"></van-tab>
        <van-tab title="建议订单" name="1"></van-tab>
      </van-tabs>
      <div v-for="item in list" v-if="list.length">
        <p style="font-weight: bold; font-size: 14px">&nbsp;&nbsp;&nbsp;{{ item.m01Name }}</p>
        <el-table class="table-headermd" :data="item.productDetailList" border>
          <el-table-column label="物料名称" prop="productName" />
          <el-table-column label="规格" prop="productSku" />
        </el-table>
      </div>
      <van-empty v-if="list.length == 0" />
    </div>
  </div>
</template>

<script>
import { getItemList } from '@/api';
import { getOrderUrlByStoreId } from '@/api/inventory';
export default {
  data() {
    return {
      list: [],
      tabVal: '0',
      detail: null,
      timeData: '',
    };
  },
  activated() {
    this.getMonth();
    this.getMyInventoryList();
  },
  methods: {
    getMonth() {
      // 获取当前日期
      var currentDate = new Date();

      // 获取当前月份
      var currentMonth = currentDate.getMonth();

      // 获取当前年份
      // var currentYear = currentDate.getFullYear();

      var previousMonthDate1 = new Date();
      if (currentDate.getDate() == 1) {
        previousMonthDate1.setMonth(currentMonth - 1);
      } else {
      }
      var previousMonth1 = previousMonthDate1.getMonth();
      var previousYear1 = previousMonthDate1.getFullYear();

      // 计算前三个月的年份和月份
      var previousMonthDate = new Date();
      if (currentDate.getDate() == 1) {
        previousMonthDate.setMonth(currentMonth - 3);
      } else {
        previousMonthDate.setMonth(currentMonth - 2);
      }
      1;
      var previousMonth = previousMonthDate.getMonth();
      var previousYear = previousMonthDate.getFullYear();

      //前三个月
      if (previousYear1 == previousYear) {
        var formattedPreviousMonth1 = previousYear1 + '-' + (previousMonth1 + 1);
        // 格式化年份和月份
        var formattedPreviousMonth = previousYear + '-' + (previousMonth + 1);
        this.timeData =
          formattedPreviousMonth.split('-')[1] + '-' + formattedPreviousMonth1.split('-')[1] + '月';
      } else {
        var formattedPreviousMonth1 = previousYear1 + '年' + (previousMonth1 + 1) + '月';
        // .toString().padStart(2, '0');
        // 格式化年份和月份
        var formattedPreviousMonth = previousYear + '年' + (previousMonth + 1) + '月';
        this.timeData = formattedPreviousMonth + '-' + formattedPreviousMonth1;
      }
    },
    tabChange(name) {
      this.tabVal = name;
      this.setListData();
      // this.getMyInventoryList();
    },
    onSelect(action) {
      this.$router.push({
        path: '/material',
        query: {
          tabVal: action,
        },
      });
    },
    getMyInventoryList() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      getItemList({ storeCode: this.$route.query.id }).then((res) => {
        loading1.clear();
        if (res.code == 200) {
          this.loading = false;
          this.detail = res.data;
          this.setListData();
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
    setListData() {
      this.list = this.tabVal == '0' ? this.detail.threeMonthItemList : this.detail.adviceItemList;
    },
    placeOrderFn() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      getOrderUrlByStoreId({
        storeId: this.$route.query.id,
        from: this.$route.query.from || '',
      }).then((res) => {
        loading1.clear();
        if (res.code == 200 && res.data) {
          window.location.href = res.data;
        } else {
          this.Toast({
            message: res.msg,
            duration: 5000,
          });
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss">
.productItem {
  .myTab {
    .van-tabs__nav--card {
      margin: 0 !important;
      border-left: 0;
      border-right: 0;
    }
    .van-tabs__wrap,
    .van-tabs__nav--card {
      height: 39px;
    }
    .van-tab {
      line-height: 40px;
    }
  }
  .myList {
    .van-cell {
      padding: 0;
      &:after {
        border-bottom: none;
      }
    }
  }
}
</style>
<style lang="scss">
.table-headermd {
  font-size: 1.2rem;
  text-align: center;
  position: initial;
  width: 94% !important;
  margin: 0 auto;
  border-right: 0;
}

.table-headermd .el-table__header,
.table-headermd .el-table__body {
  width: 100% !important;
}

.table-headermd col {
  width: 5.8rem;
}

.table-headermd col:nth-child(2),
.table-headermd col:nth-child(4),
.table-headermd col:nth-child(3) {
  width: 5rem;
}

.table-headermd .van-cell {
  padding: 0 4px;
  height: 100%;
}

.table-headermd th.el-table__cell > .cell {
  padding: 0 4px;
}

.table-headermd th.el-table__cell {
  background-color: #1989fa;
  color: #fff;
}

.table-headermd .el-table__cell {
  padding: 4px 0;
}
</style>