assess-app/page_task/apply/components/property-select.vue

<template>
  <view class="box">
    <view class="input-box">
      <view class="input-box-left" :style="{'letter-spacing':labelWidth}">
        {{ label }}
      </view>
      <view class="input-box-right input-box-text" @click="showUploadingImg(true)">
        <text :class="{'no-option':!optionName}">{{ optionName ? optionName : placeholder }}</text>
      </view>
      <view class="input-box-right" @click="showUploadingImg(true)">
        <text class="iconfont">&#xe62b;</text>
      </view>
    </view>
    <uni-popup ref="popup" :safeArea="false" type="bottom" @change="closePopup">
      <view class="popup-block">
        <view class="popup-title">
          <view class="popup-title-text">选择资产</view>
          <view class="title-del" @click="showUploadingImg(false)">
            <image src="/pages-task/static/img/new-add/del-title.png"></image>
          </view>
        </view>
        <view class="add-row" @click.stop="setAddId(addItem.value)"
              :class="{'checked-row':inputValue.indexOf(addItem.value)>=0,'row-one':addItem.type===2,'row-two':addItem.type===3,'row-three':addItem.type===4}" v-for="addItem in localData">
          <view class="row-data"  >
            <view class="row-item row-content">
              <view class="content-title">{{addItem.text}}</view>
              <view class="content-remark">{{addItem.remark}}</view>
            </view>
            <view class="row-item">
              <text class="iconfont">
                &#xe621;
              </text>
            </view>
          </view>

        </view>

        <view class="add-but" @click.stop="showUploadingImg(false)">确定</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  name: 'property-select',
  props: {
    'propertyList': {
      default: []
    },
    label: {
      type: String,
      default: '标题'
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: 'text'
    },
    valueType: {
      type: String,
      default: '1'
    },
    value: {
      default: ''
    }
  },
  data() {
    return {
      addList: [],
      inputValue: [],
      localData: [],
      optionName: '',
      labelWidth: 0,
      showPicker: false
    }
  },
  components: {},
  mounted() {
    this.setLocalData()

    this.setLabelWidth()
  },
  watch: {
    'value': function () {
      this.setValue()
    },
    'inputValue': function () {
      this.$emit('input', this.inputValue)
      this.setValue()
    },
    'propertyList': function () {
      this.setLocalData()
    }
  },
  methods: {
    closePopup(e) {

    },
    setLocalData() {
      // 设置资产选择列表
      this.localData = [];
      let typeOne=1;
      let typeTwo=1;
      let typeThree=1;
      let typeFour=1;
      this.propertyList.forEach((item)=>{
        let propertyType=item.property_type*1;
        let propertyItem={'value':item.property_sn,'type':propertyType}
        if(propertyType===1){
          propertyItem.text='房产信息('+typeOne+')'
          propertyItem.remark='房产地址：'+item.data.house_address
         ++typeOne;
        }else if(propertyType===2){
          propertyItem.text='车辆信息('+typeTwo+')'
          propertyItem.remark='车牌号：'+item.data.car_num
          ++typeTwo;
        }else if(propertyType===3){
          propertyItem.text='保单信息('+typeThree+')'
          propertyItem.remark='保险公司：'+item.data.insurance_name
          ++typeThree;
        }else {
          propertyItem.text='企业信息('+typeFour+')'
          propertyItem.remark='企业名称：'+item.data.firm_name
          ++typeFour;
        }
        this.localData.push(propertyItem)
      })
      this.setValue()
    },
    setAddId(id) {
      console.log('id:'+id)
      let key = this.inputValue.indexOf(id)
      if (key >= 0) {
        this.inputValue.splice(key, 1)
      } else {
        this.inputValue.push(id)
      }
    },
    showUploadingImg(showImg) {
      this.addItemIds = []
      if (showImg) {
        this.$refs.popup.open("bottom");
      } else {
        this.$refs.popup.close();
        this.isUploading = false
      }
    },
    setValue() {
      this.inputValue=this.value
      if (this.inputValue) {
        this.optionName = "";
        this.localData.forEach((one) => {
          if (  this.inputValue.indexOf(one.value)>=0) {
            if(this.optionName)this.optionName+="，"
            this.optionName += one.text;
          }
        })
      }
    },
    setLabelWidth() {
      let differenceNum = 4 - this.label.length;
      if (differenceNum === 2) {
        this.labelWidth = '2em'
      } else if (differenceNum === 1) {
        this.labelWidth = '0.5em'
      }
    }
  }

}
</script>

<style lang="scss" scoped>
@import "@/components/static/css/en-common.css";

.box {

  .input-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .input-box-left {
      width: 210rpx;
      font-size: 30rpx;
      color: #333333;
    }

    .input-box-right {
      width: 40rpx;

      text {
        font-size: 28rpx;
        color: #333;
      }

      .iconfont {
        float: right;
      }

      .no-option {
        color: #999999;
      }

    }
    .input-box-text{
      width: calc(100% - 250rpx);
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  .popup-block {
    border-radius: 20rpx 20rpx 0 0;
    background: #F6F7FB;
    padding: 0 0 calc(env(safe-area-inset-bottom) - 10rpx);
    max-height: 60vh;
    overflow-y: auto;

    .popup-title {
      background: #fff;
      border-bottom: 2rpx solid #F0F0F0;
      padding: 40rpx 0;
      position: relative;

      .popup-title-text {
        text-align: center;
        font-size: 34rpx;
        font-weight: 600;
      }

      .title-del {
        position: absolute;
        top: 40rpx;
        right: 40rpx;

        image {
          height: 40rpx;
          width: 40rpx;
        }
      }

    }

    .add-row {
      margin: 20rpx 32rpx 0;
      background: #F20303;
      border-radius: 10rpx;
      height: 144rpx;
      position: relative;
      .row-data {
        position: absolute;
        left: 4rpx;
        top: -1rpx;
        box-sizing: border-box;
        //padding: 36rpx 30rpx;
        width: 100%;
        height: 148rpx;
        display: flex;
        justify-content: space-between;
        background: #fff;
        border-radius: 10rpx;
        .row-item {
          color: #333333;
          font-size: 32rpx;
        }
        .row-item:last-child {
          display: none;
        }
        .row-content {
          padding: 36rpx 26rpx;
          .content-title{
            color: #333333;
            font-size: 32rpx;
            font-weight: 600;
            height: 45rpx;
            line-height: 45rpx;
          }
          .content-remark{
            margin-top: 24rpx;
            color: #999999;
            font-size: 24rpx;
            height: 39rpx;
            line-height: 39rpx;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }
      }


    }
    .row-one{
      background: #219653;
    }
    .row-two{
      background: #FD8537;
    }
    .row-three{
      background: #3169FA;
    }
    .checked-row {
      .row-data{
        .row-item:last-child {
          margin-top: 35rpx;
          margin-right: 28rpx;
          display: block;
          .iconfont {
            color: #3169FA;
            font-size: 42rpx;
          }
        }
      }

    }

    .add-but {
      margin: 50rpx 32rpx 0;
      border-radius: 10rpx;
      padding: 36rpx 30rpx;
      font-size: 32rpx;
      color: #fff;
      text-align: center;
      background: #3169FA;
    }
  }
}

</style>