studytour-front/pages_order/components/reloateProjectPopup.vue

<template>
  <view>
    <uv-popup ref="popup" mode="bottom" bgColor="none" >
      <view class="popup__view">
        <view class="flex header">
          <view class="title">选择关联项目</view>
          <button class="btn" @click="onConfirm">确认</button>
        </view>
        <view class="content">
          <uv-radio-group 
            v-model="selectedId" 
            placement="column"
            shape="circle"
            size="36rpx"
            iconSize="36rpx"
            activeColor="#00A9FF"
          >
            <view class="flex option" v-for="item in options" :key="item.id">
              <view class="radio">
                <uv-radio :name="item.id"></uv-radio>
              </view>
              <view class="text-ellipsis">
                {{ item.name }}
              </view>
            </view>
          </uv-radio-group>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script>
  export default {
    props: {
      options: {
        type: Array,
        default() {
          return []
        }
      },
    },
    data() {
      return {
        selectedId: null,
      }
    },
    onLoad() {},
    methods: {
      async open(projectId) {
        this.selectedId = projectId
        console.log('selectedId', this.selectedId)
        console.log('options', this.options)
        this.$refs.popup.open()
      },
      close() {
        this.$refs.popup.close()
      },
      onConfirm() {
        this.$emit('confirm', this.selectedId)
        this.close()
      },
    },
  }
</script>

<style lang="scss" scoped>

  .popup__view {
    width: 100vw;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #FFFFFF;
    border-top-left-radius: 32rpx;
    border-top-right-radius: 32rpx;
  }

  .header {
    position: relative;
    width: 100%;
    padding: 24rpx 0;
    box-sizing: border-box;
    border-bottom: 2rpx solid #EEEEEE;

    .title {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      line-height: 1.4;
      color: #181818;
    }

    .btn {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      line-height: 1.4;
      color: $uni-color;
      position: absolute;
      top: 26rpx;
      right: 40rpx;
    }

  }

  .content {
    max-height: 75vh;
    padding: 8rpx 40rpx;
    box-sizing: border-box;
    overflow-y: auto;
  }

  .option {
    justify-content: flex-start;
    column-gap: 16rpx;
    padding: 32rpx 0;
    font-family: PingFang SC;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 1.4;
    color: #181818;
    border-bottom: 2rpx solid #EEEEEE;
  }
  
</style>