lanan-repair-app/components/projectPicker.vue

<template>
  <view>
    <uni-popup ref="popup" type="bottom">
      <view class="popupContent">
        <view class="header">
          <text class="cancel" @click="cancel">取消</text>
          <text class="title">选择维修项目</text>
          <text class="submit" @click="confirm">确定</text>
        </view>
        <view class="chooseProj">
          <view class="desc">
            已经选择{{ selectedProj.length }}项维修项目
          </view>
          <view class="selectedProj">
            <view v-for="(item, index) in selectedProj" :key="index" class="selectedProjItem">
              <text>{{ item.name }}</text>
              <image class="itemIcon" mode="aspectFit" src="/static/icons/x.png" @click="removeProj(index)"></image>
            </view>
          </view>
        </view>
        <view v-if="typeList && typeList.length > 0" class="projPicker">
          <view class="type">
            <view v-for="item in typeList" :key="item.id" :class="{'active': typeId === item.id}" class="typeItem"
                  @click="chooseType(item)">
              {{ item.name }}
            </view>
          </view>
          <view class="container">
            <view v-for="item in groupList" :key="item.id" class="groupList">
              <view class="groupHeader">
                <view class="line"></view>
                <text>{{ item.name }}</text>
                <view class="line"></view>
              </view>
              <view class="projList">
                <view v-for="(proj, index) in item.projList" :key="proj.id" class="projItem" @click="chooseProj(proj)">
                  <text class="projName">{{ proj.name }}</text>
                  <image v-if="selectedProj && selectedProj.find(f => f.id === proj.id)" class="projChooseIcon"
                         mode="aspectFit" src="/static/icons/duihao.png"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

    </uni-popup>
  </view>
</template>
<script>
export default {
  name: "projectPicker",
  data() {
    return {
      selectedProj: [
        {name: '精洗内饰', id: 1},
        {name: '内饰精洗除臭', id: 2},
        {
          name: '烘干底板胶及脚垫',
          id: 3
        },
        {name: '精致洗车（轿车）', id: 4},
        {name: '人保核销洗车劵', id: 5},
        {name: '人保核销洗车劵', id: 6}
      ],
      typeList: [
        {
          name: '洗车',
          id: 1,
          groupList: [
            {
              name: '精洗',
              id: 'groupId1',
              projList: [{name: '清洗内饰', id: 1}, {name: '内饰精洗除臭', id: 2}]
            }
          ]
        },
        {
          name: '二手车',
          id: 2
        }
      ],
      typeId: 1,
      groupList: [
        {
          name: '精洗',
          id: 'groupId1',
          projList: [{name: '清洗内饰', id: 1}, {name: '内饰精洗除臭', id: 2}]
        }
      ]
    }
  },
  methods: {
    open(selectedProj = []) {
      this.$refs.popup.open()
      this.selectedProj = JSON.parse(JSON.stringify(selectedProj))
    },
    removeProj(index) {
      this.selectedProj.splice(index, 1)
    },
    chooseProj(proj) {
      const findIndex = this.selectedProj.findIndex(f => f.id === proj.id)
      if (findIndex > -1) {
        this.selectedProj.splice(findIndex, 1)
      } else {
        this.selectedProj.push(proj)
      }
    },
    chooseType(type) {
      this.groupList = type.groupList
      this.typeId = type.id
    },

    confirm() {
      this.$emit('confirm', this.selectedProj)
      this.cancel()
    },
    cancel() {
      this.selectedProj = []
      this.groupList = this.typeList[0].groupList
      this.$refs.popup.close()
    }
  }
}
</script>


<style lang="scss" scoped>
.popupContent {
  height: 86vh;
  background-color: #fff;
  border-radius: 32rpx 32rpx 0rpx 0rpx;

  display: flex;
  flex-direction: column;
}

.header {
  padding: 40rpx;
  display: flex;
  align-items: center;
  font-size: 32rpx;
  border-bottom: 1rpx solid #EEEEEE;

  .title {
    flex: 1;
    width: 0;
    text-align: center;

    font-weight: bold;
    color: #333333;
  }

  .cancel {
    font-weight: 500;
    color: #999999;
  }

  .submit {
    font-weight: 500;
    color: #0174F6;
  }
}

.chooseProj {
  padding: 30rpx 32rpx;

  .desc {
    font-weight: 500;
    font-size: 24rpx;
    color: #999999;
  }

  .selectedProj {
    display: flex;
    align-items: center;
    gap: 20rpx;
    flex-wrap: wrap;
    padding: 30rpx 0;

    .selectedProjItem {
      display: flex;
      align-items: center;
      column-gap: 10rpx;
      padding: 10rpx 16rpx;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      border: 2rpx solid #0174F6;
      font-weight: 500;
      font-size: 24rpx;
      color: #0174F6;

      .itemIcon {
        width: 16rpx;
        height: 16rpx;
      }
    }
  }
}

.projPicker {
  flex: 1;
  height: 0;
  overflow: auto;
  border-top: 1rpx solid #EEEEEE;

  display: flex;

  .type {
    width: 200rpx;
    background: #FFFFFF;

    .typeItem {
      width: 100%;
      background: #F2F2F7;
      padding: 40rpx 32rpx;

      &.active {
        background-color: #fff;
      }
    }
  }

  .container {
    flex: 1;
    width: 0;

    padding: 30rpx;

    .groupList {
      .groupHeader {
        display: flex;
        align-items: center;
        column-gap: 4rpx;

        font-weight: 500;
        font-size: 24rpx;
        color: #999999;

        .line {
          flex: 1;
          width: 0;
          height: 2rpx;
          background-color: #DDDDDD;
        }
      }

      .projList {
        padding: 40rpx 0;
        display: flex;
        flex-direction: column;
        row-gap: 40rpx;

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

          .projName {
            flex: 1;
            width: 0;
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
          }

          .projChooseIcon {
            width: 36rpx;
            height: 36rpx;
          }
        }
      }
    }
  }
}
</style>