count-pass-app/subpages/approval/price.vue

<template>
  <view class="price">
    <view class="picker-btn">
      <view class="btn">
        <button class="oper-btn" type="primary" @click="showPicker=true">
          {{$t('approval.information')}}
        </button>
      </view>
      <view class="btn">
        <button class="oper-btn" type="primary" @click="sureChangePrice">
          {{$t('approval.confirmPrice')}}
        </button>
      </view>
      
    </view>
     <u-sticky bgColor="#fff">
    <view class="change-price-title">
      <view class="change-price-item">
        {{$t('approval.adjustmentRange')}}:
        <view class="inp">
          <u-input type="number" v-model="changePrice" />
        </view>
        <view class="btn">
          <button class="oper-btn" type="primary" @click="priceChange(true)">{{$t('approval.adjust')}}</button>
        </view>
      </view>
      <view class="change-price-item">
        {{$t('approval.fixed')}}:
        <view class="inp">
          <u-input type="number" v-model="fixPrice" />
        </view>
        <view class="btn">
          <button class="oper-btn" type="primary" @click="priceChange(false)">{{$t('approval.adjust')}}</button>
        </view>
      </view>
    </view>
     </u-sticky>
    <template v-if="details.length">
      <view class="details-wrap">
        <p class="details-line details-title">
          <span v-if="priceType=='101'">{{$t('order.companyName')}}</span>
          <span v-if="priceType=='102'">{{$t('order.region')}}</span>
          <span>{{$t('order.materialName')}}</span>
          <span>{{$t('approval.latestPrice')}}</span>
          <span>{{$t('approval.adjustedPrice')}}</span>
        </p>
        <p v-for="(item,index) in details" :key="index" class="details-line">
          <span v-if="priceType=='101'">{{item.companyName}}</span>
          <span v-if="priceType=='102'">{{item.blockName}}</span>
          <span>{{item.materialName}}</span>
          <span>{{item.lastPrice || 0}}</span>
          <span>
            <u-input type="number" v-model="item.price" />
          </span>
        </p>
      </view>
      
    </template>
    <template v-else>
      <u-empty mode="list" text='请先选择调价信息' icon="https://cdn.uviewui.com/uview/empty/list.png">
      </u-empty>
    </template>
    <u-popup :show="showPicker" mode="center"  zIndex="998" :overlay="false" @close="showView = false" >
      <view class="picker-card">
          <!-- 选择客户 -->
        <view class="choose-wrap">
          <view v-if="priceType == '101'" class="item">
            <view class="search-wrap">
              {{$t('approval.customerSelection')}}:
            </view>
            <view class="search-wrap">
              <u-input v-model="keyword" @change="getOptions" :placeholder="$t('base.search.keySearch')"/>
            </view>
            <u-checkbox-group 
            v-model="clientIds"
            placement="column"
            >
              <u-checkbox
              :customStyle="{marginBottom: '8px'}"
              v-for="(item, index) in companyList"
              :key="index"
              :label="item.name"
              :name="item.id"
              >
              </u-checkbox>
            </u-checkbox-group>
          </view>
          <!-- 选择区域 -->
          <view v-if="priceType == '102'"  class="item">
            <view class="search-wrap">
              {{$t('approval.regionalSelection')}}:
            </view>
            <view class="search-wrap">
              <u-input v-model="keyword" @change="getOptions" :placeholder="$t('base.search.keySearch')"/>
            </view>
            <u-checkbox-group 
            v-model="blockIds"
            placement="column"
            >
              <u-checkbox
              :customStyle="{marginBottom: '8px'}"
              v-for="(item, index) in blockList"
              :key="index"
              :label="item.name"
              :name="item.id"
              >
              </u-checkbox>
            </u-checkbox-group>
          </view>
          <!-- 选择产品 -->
          <view class="item">
            <view class="search-wrap">
              {{$t('approval.productSelection')}}:
            </view>
            <view class="search-wrap">
              <u-input v-model="proKeyword" @change="getMater" :placeholder="$t('base.search.keySearch')"/>
            </view>
            <u-checkbox-group 
            v-model="productIds"
            placement="column"
            >
              <u-checkbox
              :customStyle="{marginBottom: '8px'}"
              v-for="(item, index) in meterList"
              :key="index"
              :label="item.name"
              :name="item.id"
              >
              </u-checkbox>
            </u-checkbox-group>
          </view>
        </view>
        <view class="card-oper">
          <view class="btn">
            <button @click="showPicker = false">{{$t('settings.cancelText')}}</button>
          </view>
          <view class="btn">
            <button type='primary' @click="getPriceDetails">{{$t('settings.confirmText')}}</button>
          </view>
        </view>
      </view>
	  </u-popup>
  </view>
</template>

<script>
import {
  priceDetails
} from "../../api/approval"
import {
  getMater,
  getCompany,
  getBlock,
} from "../../api/tenantorder"
export default {
  data(){
    return {
      fixPrice:'',
      changePrice:null,
      showPicker:false,
      priceType:null,
      meterList:[], //产品选项列表
      companyList:[], //客户选项列表
      blockList:[], //区域选项列表
      details:[],
      keyword:'',
      proKeyword:'',
      clientIds:[], //选择的客户id
      blockIds:[], //选择的区域id
      productIds:[], //选择的产品
    }
  },
  onLoad(options) {
    this.priceType = options.priceType
    this.getMater()
    this.getOptions()
  },
  methods:{
    //确认调价
    sureChangePrice(){
      let pages = getCurrentPages();
      let prevPage = pages[pages.length - 2]; //上一个页面
      let details=[]
      this.details.forEach(item=>{
        if(this.priceType == '101'){
          details.push({
            companyId: item.companyId,
            companyName: item.companyName,
            lastPrice: item.lastPrice,
            price: item.price,
            materialId: item.materialId,
            materialName: item.materialName,
          })
        }else if(this.priceType == '102'){
          details.push({
            blockId: item.blockId,
            blockName: item.blockName,
            lastPrice: item.lastPrice,
            price: item.price,
            materialId: item.materialId,
            materialName: item.materialName,
          })
        }
        
      })
      prevPage.$vm.form.details = details;
      uni.navigateBack();
    },
    //获取客户/区域选项
    getOptions(){
      if(this.priceType == '101'){
        getCompany({type:'102'},this.keyword).then(res=>{
          if(res.data.code == 0){
            this.companyList = res.data.data
          }
        })
      }
      if(this.priceType == '102'){
        getBlock(this.keyword).then(res=>{
          if(res.data.code == 0){
            this.blockList = res.data.data
          }
        })
      }
    },
    //获取产品选项
    getMater(){
      getMater({type:"101"},this.proKeyword).then(res=>{
        if(res.data.code == 0){
          this.meterList=res.data.data
        }
      })
    },
    //调整价格
    priceChange(boo){
      if(boo){
        this.details.forEach(item=>{
          if(item.lastPrice){
            item.price = Number(item.lastPrice) + Number(this.changePrice)
          }else{
            item.price = Number(this.changePrice)
          }
        })
      }else{
        this.details.forEach(item=>{
          item.price = Number(this.fixPrice)
        })
      }
    },
    //获取产品价格详细
    getPriceDetails(){
      let data={}
      if(this.priceType == '101'){
        if(this.clientIds.length && this.productIds.length){
          data={
            companyIds:this.clientIds,
            materialIds:this.productIds,
            priceType:this.priceType,
          }
          priceDetails(data).then(res=>{
            if(res.data.code == 0){
              this.details = res.data.data
              this.showPicker = false
            }
          })
        }
      }else if(this.priceType == '102'){
         if(this.blockIds.length && this.productIds.length){
          data={
            blockIds:this.blockIds,
            materialIds:this.productIds,
            priceType:this.priceType,
          }
          priceDetails(data).then(res=>{
            if(res.data.code == 0){
              this.details = res.data.data
              this.showPicker = false
            }
          })
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped>
/* #ifndef APP-NVUE */
view {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}
page {
  background-color: #f8f8f8;
}
/* #endif*/
.price{
   /* #ifndef APP-NVUE */
  display: flex;
  width: 750rpx;
  min-height: 100vh;
  /* #endif */
  flex-direction: column;
  flex: 1;
  background-color: #f8f8f8;
  padding-bottom: 160rpx;
  .change-price-title{
    background-color: #fff;
    padding: 24rpx 32rpx;
    width: 100%;
    display: flex;
    .change-price-item{
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 24rpx;
      .btn{
        width: 20%;
        margin-left: 16rpx;
        .oper-btn{
          margin: 0;
          border-radius: 10rpx;
        }
      }
      .inp{
        margin-left: 16rpx;
        flex: 1;
      }
    }
  }
  
  .details-wrap{
    padding: 32rpx;
    background: #fff;
    margin-top: 24rpx;
    .details-line{
      display: flex;
      flex-direction: row;
      line-height: 40px;
      span{
        width: 25%;
        font-size: 28rpx;
        text-align: center;
      }
    }
    .details-title{
      span{
        font-weight: bold;
      }
    }
    .details-line:nth-child(odd){
      background-color: #f2f2f2;
    }
    .details-line:nth-child(even){
      background-color: #fff;
    }
  }
  
  .picker-btn{
    padding: 32rpx;
    position: fixed;
    bottom: 0;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    background-color: #fff;
    z-index: 2;
    .btn{
      width: 48%;
      .oper-btn{
        margin: 0;
      }
    }
  }
  // padding: 32rpx;
  .picker-card{
    padding: 32rpx 32rpx 144rpx;
    position: relative;
    height: 100%;
    overflow-y: scroll;
    .choose-wrap{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      height: 100%;
      .item{
        width: 45%;
        height: 100%;
        overflow-y: scroll;
        .search-wrap{
          margin-bottom: 24rpx;
        }
      }
    }
    .card-oper{
      position: absolute;
      width: 100%;
      bottom: 0;
      left:0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 24rpx;
      .btn{
        width: 45%;
        .oper-btn{
          margin: 0;
        }
      }
    }
  }
}
/deep/ .u-popup__content{
  height: 70%;
  overflow-y: scroll;
  width: 90%;
  border-radius: 6px;
}
</style>