数组（运费模板）

<template>
  <div>
    <div class="header-title">
      <div class="breadcrumb">
        <template>
          <span @click="$router.push({ name: 'cart_freight' })">运费模板 /
          </span>
          <span style="color: rgb(0, 179, 197);">{{operation == 1 ? '详情' :operation == 2 ? '编辑' : '新建'}}</span>
        </template>
      </div>
    </div>
    <!--模板名称-->
    <div class="row_col">
      <p class="row_p">模板名称</p>
      <a-input v-model="infoData.name" :disabled='operation == 1' style='width:347px' placeholder="请输入模板名称" />
    </div>
    <!-- 计费方式 -->
    <div class="row_col">
      <p class="row_p">计费方式</p>
      <a-radio-group :disabled='operation == 1' name="radioGroup" @change="onChangeRadio" v-model="infoData.type">
        <a-radio :value="1">
          按件计算
        </a-radio>
        <a-radio :value="2">
          按重量计费
        </a-radio>
        <a-radio :value="3">
          全国包邮
        </a-radio>
      </a-radio-group>
    </div>
    <!-- 包邮配送区域 -->
    <div class="row_col" style='margin-top:20px'>
      <p class="row_p">包邮配送区域</p>
      <div class="bgc">
        <span class="arealist" v-for="(item,index) in areaList" :key="index">
          <span @click="onArea(index)" :class="areaIndex.indexOf(index) != -1?'areaclick':'area'">{{item.name}}</span>
        </span>
        <hr>
        <span>已选择{{areaIndex.length}}个区域 </span>
        <!-- <span @click="onArea()" :class="isArea==false?'area':'areaclick'">全选</span> -->
      </div>
    </div>
    <!-- 买家付费区域 -->
    <div class="row_col" style='margin-top:20px' v-if='infoData.type != 3'>
      <p class="row_p">买家付费区域</p>
      <div class="bgc">
       <span class="arealist" v-for="(item,index) in areaList" :key="index">
          <span @click="onPayArea(index)" v-if="areaIndex.indexOf(index) == -1" :class="areaPayIndex.indexOf(index) == -1?'areaclick':'area'">{{item.name}}</span>
        </span>
        <hr>
        <div class="bgc_row">
          <p class="bgc_row_p freight">配送运费：</p>
          <p class="bgc_row_p">
            <span style='margin-right:8px'>每{{infoData.type == 1 ? '件' :'千克'}}</span>
            <a-input-number style="width: 90px" v-model="infoData.price" :disabled='operation == 1' :min="0.01"
              :precision='2' />
            <span style='margin-left:8px'>元</span>
            <span style='margin-left:8px'>{{infoData.type == 1 ? '' :'(未满1千克按1千克计算)'}}</span>
          </p>
        </div>
        <div class="bgc_row" style='margin-top:18px'>
          <p class="bgc_row_p"> <span style='margin-right:8px'
              @click='operation == 1 ? "" :  bearing.isNumber = !bearing.isNumber'><i
                :class='bearing.isNumber ? "ActiveType":""' class="isNumber"></i>指定条件包邮：</span>
            <a-select :disabled="!bearing.isNumber || operation == 1" v-model="infoData.postageType"
              style="width: 70px">
              <a-select-option v-if="infoData.type==1" :value="2">件数</a-select-option>
              <a-select-option v-if="infoData.type==2" :value="3">重量</a-select-option>
              <a-select-option :value="1">价格</a-select-option>
            </a-select>
          </p>
          <p class="bgc_row_p">
            <span style='margin-right:8px'>满</span>
            <a-input-number style="width: 70px" :disabled="operation == 1 || !bearing.isNumber"
              v-model="infoData.number" :min="1" :precision='0' />
            <span style='margin-left:4px' v-if="infoData.type==1">件</span>
            <span style='margin-left:4px'>包邮</span>
          </p>

        </div>
      </div>
    </div>
    <!-- 不配送区域 -->
    <div class="row_col" style='margin-top:20px' v-if='infoData.type != 3'>
      <p class="row_p">不配送区域</p>
      <div class="bgc">
        <span class="arealist" v-for="(item,index) in areaList" :key="index">
          <span @click="onPayArea(index)" v-if="areaPayIndex.indexOf(index) != -1 && areaIndex.indexOf(index) != -1" class="area">{{item.name}}</span>
        </span>
      </div>
    </div>
    <!-- 返回 -->
    <div class="footer">
      <a-button class="btnBox" @click="$router.go(-1)">返回</a-button>
      <a-button class="btnBox2" v-if="operation != 1">保存</a-button>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    props: [],
    data() {
      return {
        id: '',
        operation: null,
        name: '',
        bearing: {
          monay: null,
          isNumber: false,
          Number: null,
          satisfy: null,
        },
        infoData: {
          name: '',
          type: 1,
          price: '',
          postageType: 2,
          number: ''
        },
        byPieceList: [{
          region: [], //地区
          price: '',
          postage: '',
          postageType: 2,
          number: '',
          isNumber: false,
        }],
        // isArea: '',
        areaIndex: [],
         areaPayIndex: [],
        areaList: [{
          code: 1,
          name: '北京',
        }, {
          code: 2,
          name: '天津',
        }, {
          code: 3,
          name: '河北',
        }, {
          code: 4,
          name: '陕西',
        }, {
          code: 5,
          name: '甘肃',
        }]
      }
    },
    methods: {
      onChangeRadio() {
        this.infoData.postageType = this.infoData.type == 1 ? 2 : this.infoData.type == 2 ? 3 : undefined
        this.byPieceList.forEach(res => {
          res.postageType = this.infoData.type == 1 ? 2 : this.infoData.type == 2 ? 3 : undefined
        })
      },
      onArea(code) {
          const i = this.areaIndex.indexOf(code)
          if (i == -1) {
            this.areaIndex.push(code)
          } 
      },
       onPayArea(code) {
          const i = this.areaIndex.indexOf(code)
          if (i == -1) {
            this.areaPayIndex.push(code)
          } 
          else {
            this.areaPayIndex.splice(i, 1)
          }
      },
      //  onBuyArea(code) {
      //     const i = this.areaIndex.indexOf(code)
      //     if (i == -1) {
      //       this.areaIndex.push(code)
      //     } 
      //     else {
      //       this.areaIndex.splice(i, 1)
      //     }
      // },
    },
    created() {},
    mounted() {},
    destroyed() {},
    computed: {},
    watch: {}
  }

</script>

<style lang="less" scoped>
  .row_col {
    margin-bottom: 25px;
  }

  .row_p {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
  }

  .arealist {
    margin: 4px;
  }

  .area {
    width: 100%;
    border: 1.6px solid rgb(192, 190, 190);
    border-radius: 2px;
    padding: 4px 18px;
  }

  .areaclick {
    width: 100%;
    border: 1.6px solid rgb(224, 94, 94);
    border-radius: 2px;
    padding: 4px 18px;
  }

  .bgc {
    background: #fafafa;
    max-width: 873px;
    padding: 20px;
  }

  .bgc_row {
    display: flex;
    flex-direction: row;
  }

  .isNumber {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 1px;
    border: 1px solid #ccc;
    margin-right: 8px;
    vertical-align: middle;
  }

  .bgc_row_p {
    margin-right: 30px;
    margin-bottom: 0;
  }

  .freight {
    line-height: 34px;
  }

  .ActiveType {
    position: relative;
    text-align: center;
    background-color: @theme;
    border: 1px solid @theme  !important;

    &::before {
      position: absolute;
      font-size: 12px;
      color: #fff;
      font-weight: 700;
      content: '✓';
      top: -3px;
      left: 0px;
    }
  }

  .btnBox {
    width: 100px;
    height: 40px;
    background: #ffffff;
    border-radius: 2px;
    color: #00b3c5;
    border: 1px solid #00b3c5;
    margin-top: 60px;
  }

  .btnBox2 {
    width: 100px;
    height: 40px;
    background: #00b3c5;
    border-radius: 2px;
    color: #ffffff;
    margin-left: 15px;
    border: 1px solid #00b3c5;
    margin-top: 60px;
  }

  /deep/.ant-select-selection {
    color: #999999;
  }

</style>