index.vue

<template>
  <view>
    <!-- 展示图 -->
    <view id="header" class="back_img">
      <u-navbar title="" :border-bottom="false" :background="background">
        <template slot="right">
          <view @click="searchCli" class="u-m-r-24 search">
            <image class="hs-img" src="../../static/images/home/search@2x.png" mode=""></image>
          </view>
        </template>
      </u-navbar>
    </view>
    <!-- 按钮 -->
    <view class="home_btn">
      <view class="" v-for="item in buts" @click="goCli(item.url)">
        <image class="hs-img-56" :src="item.img" mode=""></image>
        <view class="u-m-t-8">{{ item.name }}</view>
      </view>
    </view>
    <!-- 提示信息 -->
    <view v-if="abolishIds.length > 0" class="u-m-t-20 tips background_d5aa7a u-font-28">
      <view>
        {{ abolishIds.length }}个委托单
        <span class="color_fff">等待确认寄样，请尽快确认！</span>
      </view>
      <view class="color_fff btn u-p-l-10 u-p-r-10" @click="sampleConfirm">寄样确认</view>
    </view>
    <!-- 具体内容  我的面料 -->
    <view class="home_con u-m-t-20">
      <view class="home_con_tit">
        <view>
          <span class="u-font-32">我的面料</span>
          <span style="line-height: 0;" class="u-m-l-10 color_000 u-font-24">MY FABRIC</span>
        </view>
        <view class="u-font-24 color_d5aa7a" @click="seeFabric">查看更多</view>
      </view>
      <view class="home_con_fabric">
        <view class="home_con_content u-m-t-24" @click="detailFabric(item)" v-for="(item,index) in fiabricList" :key="index">
          <image v-if="index==0" class="hs-img" src="../../static/images/home/1@2x.png" mode="aspectFill"></image>
          <image v-if="index==1" class="hs-img" src="../../static/images/home/2@2x.png" mode="aspectFill"></image>
          <image v-if="index==2" class="hs-img" src="../../static/images/home/3@2x.png" mode="aspectFill"></image>
          <image v-if="index==3" class="hs-img" src="../../static/images/home/4@2x.png" mode="aspectFill"></image>
          <view class="home_con_content_font ov_hiden">{{ item.materialName }}</view>
        </view>
      </view>
    </view>
    <!-- 具体内容  我的订单 -->
    <view class="home_con u-m-t-20">
      <view class="home_con_tit">
        <view>
          <span class="u-font-32" @click="pay">潜在客户</span>
          <span class="u-m-l-10 color_000 u-font-24">MY ORDER</span>
        </view>
        <!--				<view class="u-font-24 color_d5aa7a">查看更多</view>-->
      </view>
      <view class="home_con_order">
        <view class="u-p-t-20  u-p-b-20 ">
          <u-search placeholder="请输入客户名称" v-model="keyWord" border-color="#e1e1e1" height="76"
            @search="searchPotentialCustomers" bg-color="#fff" :show-action="false"></u-search>
        </view>
        <view class="item item--round" v-for="(item) in list" @click="$Router.push({
             path: '/pages/order/item',
             query:{
               id: item.enterpriseId
             }
           })">
          <view class="u-font-32 u-m-b-8 u-line-1">{{ item.fullName }}</view>
          <view class="u-font-24">更新时间：{{ item.createTime }}</view>
        </view>
        <!-- 加载更多 -->
        <u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
        <!-- 缺省页 -->
        <hs-empty v-if="isEmpty" tipText="没有数据" marginTop="100rpx" :image="emptyImage"></hs-empty>
      </view>
    </view>

    <hs-tab-bar></hs-tab-bar>
  </view>
</template>
<script>
  import HsTabBar from "../../components/hs-tab-bar/hs-tab-bar";
  export default {
    components: {
      HsTabBar
    },
    data() {
      return {
        emptyImage: require("@/static/images/components/empty/empty.png"),
        background: {
          backgroundColor: 'rgba(245,245,245,0)'
        },
        quantityNum: 0,
        exceptionNum: 0,
        abolishIds: [],
        // 我的面料
        fiabricList: [],
        buts: [{
            name: '面料建模',
            img: '../../static/images/home/fabricModeling@2x.png',
            url: '/pages/fabricModeling/modelingOrder'
          },
          {
            name: '搜款',
            img: '../../static/images/home/styleEntrustment@2x.png',
            url: '/pages/material/list'
          },
          {
            name: '上架管理',
            img: '../../static/images/home/styleManageme@2x.png',
            url: '/pages/material/entrustManagement'
          }
          // TODO 旧版本  可能以后会用到
          // {
          // 	name: '面料建模',
          // 	img: '../../static/images/home/fabricModeling@2x.png',
          // 	url: '/pages/fabricModeling/modelingOrder'
          // },
          // {
          // 	name: '款式委托',
          // 	img: '../../static/images/home/styleEntrustment@2x.png',
          // 	url: '/pages/home/styleEntrustment'
          // },
          // {
          // 	name: '检测委托',
          // 	img: '../../static/images/home/styleManageme@2x.png',
          // 	url: ''
          // },
          // {
          // 	name: '款式管理',
          // 	img: '../../static/images/home/testCommission@2x.png',
          // 	url: ''
          // }
        ],

        keyWord: '',
        loadStatus: 'loadmore',
        pageOptions: {
          current: 1,
          size: 10,
        },
        list: []
      };
    },
    computed: {
      isEmpty() {
        return this.list.length === 0
      }
    },
    onLoad() {
      // this.toBeSelectedQuantity();
      // this.orderTicketExceptionNum();
      // this.noSampleOrder();
      this.materialList();
      // 潜在客户
      this.potentialCustomersPage();
    },
    onPageScroll(object) {
      let height = 486 / 2;
      if (object.scrollTop >= height) {
        this.background.backgroundColor = 'rgba(245,245,245,1)';
      } else {
        this.background.backgroundColor = 'rgba(245,245,245,0)';
      }
    },
    methods: {
      pay() {
        this.$Router.push({
          path: '/pages/webview/index'
        })
      },
      searchPotentialCustomers() {
        this.pageOptions = {
          current: 1,
          size: 10,
        };
        this.potentialCustomersPage();
      },
      // 潜在客户
      potentialCustomersPage() {
        this.loadStatus = 'loading';
        this.$http("stylelibraryorder.potentialCustomersPage", {
            ...this.pageOptions,
            customerName: this.keyWord,
            status: 0
          })
          .then(res => {
            let {
              code,
              data
            } = res;
            if (code === 200) {
              if (Object.keys(data).length > 0) {
                this.list = data.records;
                this.pageOptions.pages = data.total;
                this.loadStatus = this.list.length < data.total ? 'loadmore' : 'nomore';
              } else {
                this.list = []
                this.loadStatus = 'nomore';
              }
            }
          })
      },
      // 触底加载更多
      onReachBottom() {
        if (this.pageOptions.current < this.pageOptions.pages) {
          this.pageOptions.current += 1;
          this.potentialCustomersPage();
        }
      },
      // 选款总数
      toBeSelectedQuantity() {
        this.$http('orderTicket.toBeSelectedQuantity', {}).then(res => {
          let {
            code,
            data
          } = res;
          if (code == 200) {
            this.quantityNum = data;
          }
        });
      },
      // 异常总数
      orderTicketExceptionNum() {
        this.$http('orderTicket.orderTicketExceptionNum', {}).then(res => {
          let {
            code,
            data
          } = res;
          if (code == 200) {
            this.exceptionNum = data;
          }
        });
      },
      // 寄样单总数
      noSampleOrder() {
        this.$http('orderTicket.noSampleOrder', {}).then(res => {
          let {
            code,
            data
          } = res;
          if (code == 200) {
            this.abolishIds = data;
          }
        });
      },
      // 我的面料
      materialList() {
        this.$http('materialinfo.getMaterialList', {
          size: 4,
          "current": 1,
          "materialType": "面料",
          materialCode: '',
          materialName: ''
        }).then(res => {
          let {
            code,
            data
          } = res;
          if (code == 200) {
            this.fiabricList = data.page.records;
          }
        });
      },
      searchCli() {
        // 搜索面料===1  搜索建模===2
        this.$Router.push('/pages/home/search');
      },
      seeFabric() {
        this.$Router.push('/pages/home/fabricList');
      },
      detailFabric(data) {
        this.$Router.push('/pages/home/detail?id=' + data.id);
      },
      sampleConfirm() {
        this.$Router.push('/pages/home/sampleConfirmation?abolishIds=' + this.abolishIds);
      },
      goCli(url) {
        if (url) {
          this.$Router.push(url);
        } else {
          uni.showToast({
            title: '该功能正在开发中...',
            icon: 'none'
          })
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .item--round {
    border-radius: 8rpx;
  }

  .item {
    padding: 36rpx 30px;
    height: 160rpx;
    background: url(~@/static/images/home/exhibition.png) no-repeat;
    background-size: 100% 100%;
    margin-bottom: 20rpx;
    color: #fff;
  }

  .back_img {
    height: 486rpx;
    width: 100%;
    background: url(~@/static/images/home/exhibition.png) no-repeat;
    background-size: 100% 100%;
  }

  .home_top {
    position: relative;
    width: 100%;
    height: 486rpx;

    .home_top_out {
      position: absolute;
      top: 20rpx;
      width: 100%;
      padding: 0 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .out {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }

  .search {
    width: 60rpx;
    height: 60rpx;
  }

  .tips {
    display: flex;
    height: 80rpx;
    align-items: center;
    justify-content: space-around;
    padding: 0 20rpx;
  }

  .home_btn {
    width: 100%;
    height: 180rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    background: #fff;
  }

  .home_con {
    width: 100%;
    box-sizing: border-box;
    padding: 30rpx;
    background: #fff;

    .home_con_tit {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }

    .home_con_fabric {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .home_con_order {
      // display: flex;
      // flex-wrap: wrap;
      // justify-content: space-between;
    }
  }

  .home_con_content {
    position: relative;
    width: 48%;
    height: 160rpx;
    border-radius: 8rpx;
    overflow: hidden;

    // background-image: url(../../static/images/home/1@2x.png);
    .home_con_content_font {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 60rpx;
      line-height: 60rpx;
      box-sizing: border-box;
      padding: 0 10rpx;
      background: rgba(255, 255, 255, 0.8);
    }
  }

  .home_con_content_order {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 160rpx;
    border-radius: 8rpx;
    overflow: hidden;

    .order_tit {
      flex-direction: column;
      display: flex;
      justify-content: center;
      padding: 20rpx;
      flex: 1;
      height: 100%;
      background: rgba(172, 166, 166, 0.5);
    }
  }

  .ov_hiden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .btn {
    line-height: 50rpx;
    text-align: center;
    height: 50rpx;
    border: 1rpx solid #fff;
  }

  .color_000 {
    color: rgba(0, 0, 0, 0.2);
  }

  .color_d5aa7a {
    color: #d5aa7a;
  }

  .color_dda973 {
    color: #dda973;
  }

  .color_fff {
    color: #fff;
  }

  .background_d5aa7a {
    background: #d5aa7a;
  }
</style>