nsgk_mobile/src/views/agriculturalTrusteeship/socialization/index.vue

<template>
  <div class="home_wrapper">
    <!--  头部开始  -->
    <div class="header">
      <p>待处理订单</p>
      <p>共{{supplyDemandList.length}}个新订单</p>
    </div>
    <!--  头部结束  -->

    <!--  内容开始  -->
    <div class="main">

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getList"
      >
  <!--            @load="onLoad"-->
        <div class="main_content_right_list" v-for="(item,index) in supplyDemandList" :key="index" @click="$router.push({name:'agriculturalTrusteeshipSocializationBillOrder',query:{id:item.id}})">
          <div class="main_content_right_list_header">
            <p>{{item.productType}}</p>
            <p>服务</p>
            <p>{{item.createTime.substr(0,10)}}</p>
          </div>

          <div class="main_content_right_list_center">
            <template v-if="item.supplyDemand">
              <img v-if="item.supplyDemand.supplyMasterMap" :src="item.supplyDemand.supplyMasterMap" style="width: 25vw;height: 25vw;">
              <img v-else src="../../../../static/images/agriculturalTrusteeship/zwtp.png" style="width: 25vw;height: 25vw;">
            </template>
            <img v-else src="../../../../static/images/agriculturalTrusteeship/zwtp.png" style="width: 25vw;height: 25vw;">
            <div class="main_content_right_list_content">
              <p class="tt">{{item.contractionName}}</p>
              <div class="tab">
                <p>￥<span>{{item.countMoney}}</span>.00</p>
              </div>
              <p class="name">
                <span>数量：{{item.serviceNum}}</span>
                <span>作物：{{item.cropType}}</span>
              </p>
            </div>
          </div>
          <van-cell title="卖方名称" :border="false" :value="item.bookName" />
          <van-cell title="联系人" :border="false" :value="item.linkera" />
          <van-cell title="联系电话" :border="false" :value="item.phonea" />
        </div>
      </van-list>

    </div>
    <!--  内容结束  -->

    <agr></agr>
    <transition name="van-fade">
      <dialogClose v-show="showDialog"></dialogClose>
    </transition>
  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import agr from "@/components/common/agr_footer";
  import dialogClose from "@/components/agriculturalTrusteeship/dialog";
  import {productTypes, supplyorderList} from "@/api/agriculturalTrusteeship";

  export default {
    name: "agriculturalTrusteeshipIndex",
    components: {
      agr,
      dialogClose
    },
    data() {
      return {
        activeKey: 0,
        active: 0,
        loading: false,
        finished: false,
        showDialog:false,
        supplyDemandList:[],
        supplyDemandList1:[],
        cropTypeOptions:[],
        orderStatusOptions:[],
        productList:[],
        currentDateStar: new Date(),
        currentDateEnd: new Date(),
        query:{
          orderByColumn:'order_at',
          isAsc:'asc',
          demandName :'',
          startOrderAt :'',
          endOrderAt :'',
          orderStatus :'',
        },
        startOrderAt:this.format(new Date(),'yyyy年MM月'),
        endOrderAt:this.format(new Date(),'yyyy年MM月'),
        params : {
          startOrderAt:this.format(new Date(),'yyyy-MM'),
          endOrderAt:this.format(new Date(),'yyyy-MM'),
        },
        content:''
      };
    },
    created() {
      let query = {
        parentId : null,
        tree:false
      }
      productTypes(query).then(response => {
        this.productList = response.data;
      });
      this.getDicts("crop_type").then(response => {
        this.cropTypeOptions = response.data;
      });
      this.getDicts("service_order_status").then(response => {
        this.orderStatusOptions = response.data;
      });
    },
    methods: {
      getList(){
        supplyorderList(this.query).then(response => {
          response.rows.map(res=>{
            if ( res.orderStatus == '1'){
              if (res.supplyDemand){
                if (res.supplyDemand.supplyMasterMap){
                  let supplyMasterMap = res.supplyDemand.supplyMasterMap.split( "," )
                  res.supplyDemand.supplyMasterMap = '/api'+supplyMasterMap[0]
                }
              }
              res.cropType = this.selectDictLabel(this.cropTypeOptions, res.cropType);
              res.orderStatus = this.selectDictLabel(this.orderStatusOptions, res.orderStatus);
              var that = this ;
              setTimeout(function () {
                res.productType = that.productList.filter(function (e) { return e.id == res.productType; })[0].dictName;
              },1000)
              res.countMoney = res.unitPrice * res.serviceNum;
              this.supplyDemandList.push(res);
            }
            this.supplyDemandList1.push(res);
          })
          if(this.supplyDemandList1.length >= response.total){
            this.finished = true;
            return;
          }else{
            this.loading = false;
            this.query.pageNum += 1 ;
          }
        });
      },
      openDialog(val){
        this.showDialog = val
      },
    },
  }
</script>
<style scoped lang="scss">
.home_wrapper{

}
  /*头部*/
  .header{
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 2vh 4% 0vh;
    p{
      &:nth-child(1){
        color: #334281;
        font-size: .45rem;
      }
      &:nth-child(2){
        color: #7A7A7A;
        margin-top: .5vh;
      }
    }
  }

  /*导航栏目*/
  .nav{
    background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4);
    .van-grid{
      border-top-left-radius: 25PX;
      border-top-right-radius: 25PX;
      overflow: hidden;
    }
    .nav_notice_box{
      background: #ffffff;
      padding:.5vh 0 1vh;
    }
    /deep/ .van-notice-bar{
      width: 94%;
      margin: 0 auto;
      border-radius: 5PX;
      .notice-swipe {
        height: 40px;
        line-height: 42px;
      }
    }
  }

  /*内容*/
  .main{
    width: 94%;
    margin: 0 auto;
    .main_content_right_list{
      margin-top: 2vh;
      padding: 1.5vh 3%;
      background: #ffffff;
      border-radius: 10PX;
      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
      /deep/ .van-cell{
        padding: 0;
        margin-top: 8PX;
      }
      .main_content_right_list_header{
        display: flex;
        margin-bottom: 1vh;
        align-items: center;
        p{
          padding: 3PX 10PX;
          border-radius: 8PX;
          &:nth-child(1){background: #2B7EEC;color: #ffffff;}
          &:nth-child(2){background: #E2E9FD;color: #497CE8;margin-left: 10PX;}
          &:nth-child(3){color: #334281;margin-left: auto;padding:0 0 0 15PX;background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_clock.png") no-repeat left center}
        }
      }
      .main_content_right_list_center{
        display: flex;
        img{
          border-radius: 15PX;
          margin-right: 4%;
        }
        .main_content_right_list_content{
          display: flex;
          flex-direction:column;
          justify-content: space-between;
          .tt{
            color: #333333;
            font-size: .35rem;
          }
          .tab{
            display: flex;
            justify-content: space-between;
            p{
              &:nth-child(1){
                flex: 1;
                color: #FF5E00;
                span{
                  font-size: .4rem;
                }
              }
              &:nth-child(2){
                span{
                  display: inline-block;
                  text-align: center;
                  padding: 2PX 5PX;
                  &:nth-child(1){
                    color: #497CE8;
                    background: #E2E9FD;
                    border-top-left-radius: 10PX;
                  }
                  &:nth-child(2){
                    color: #ffffff;
                    background-image: linear-gradient(to right , #5D87FA , #5FD5F5);
                    border-bottom-right-radius: 10PX;
                  }
                }
              }
            }
          }
          .name{
            color: #7A7A7A;
            span{
              &:nth-child(2){
                margin-left: 5PX;
              }
            }
          }
        }
      }
    }
  }

</style>