health-front/pages_order/product/specOptionsPopup.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="close">关闭</button>
        </view>
        <view class="section info">
          <view class="flex card">
            <view class="left">
              <image class="img" :src="coverImg" mode="aspectFill"></image>
            </view>
            <view class="right">
              <view class="name">{{ data.name }}</view>
              <view class="desc">可在以下安全剂量内，根据你的额外需求选择颗数</view>
            </view>
          </view>
        </view>
        <view class="section option">
          <view 
            v-for="item in options" 
            :key="item.id"
            :class="['option-item', selectId == item.id ? 'is-active' : '']" 
            @click="selectId = item.id"
          >
            {{ item.specName }}
          </view>
        </view>
        <view class="footer">
          <button class="flex btn" @click="onConfirm">{{ confirmText }}</button>
        </view>
      </view>
		</uv-popup>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: {
    value: {
      type: String | Number,
      default: null
    },
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    confirmText: {
      type: String,
      default: '确定'
    }
  },
  data() {
    return {
      selectId: null,
      options: [],
    }
  },
  computed : {
    ...mapState(['configList']),
    coverImg() {
      const { image } = this.data

      if (!image) {
        return ''
      }

      let arr = Array.isArray(image) ? image : image.split(',')

      return arr[0]
    },
  },
  methods: {
    async initSpecs() {
      try {

        if (this.options.length) {
          return
        }

        let arr = []

        if (this.data?.specs?.length) {
          arr = this.data.specs
        } else {
          arr = await this.$fetch('getProductSpec', { productId: this.data.id })
        }

        arr.sort((a, b) => a.sortOrder - b.sortOrder)

        this.options = arr
      } catch (err) {

      }
    },
    async open() {
      this.selectId = this.value
      await this.initSpecs()
      this.$refs.popup.open()
    },
    close() {
      this.$refs.popup.close()
      this.selectId = null
    },
    onConfirm() {
      if (!this.selectId) {
        uni.showToast({
          title: '请选择规格',
          icon: 'none',
        })
        return
      }

      const target = this.options.find(item => item.id === this.selectId)

      console.log('target', target)

      this.$emit('confirm', target)

      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;

  .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: #8B8B8B;
    position: absolute;
    top: 26rpx;
    left: 40rpx;
  }

}

.section {
  border-top: 2rpx solid #EEEEEE;
}

.info {
  width: 100%;
  padding: 32rpx;
  box-sizing: border-box;

  .card {
    width: 100%;
    padding: 32rpx;
    box-sizing: border-box;
    background-image: linear-gradient(#FAFAFF, #F3F3F3);
    border-radius: 32rpx;
    column-gap: 24rpx;

    .left {
      width: 144rpx;
      height: 144rpx;
      border-radius: 16rpx;
      overflow: hidden;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .right {
      flex: 1;

      .name {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        line-height: 1.4;
        color: #000000;
      }

      .desc {
        margin-top: 8rpx;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        line-height: 1.5;
        color: #8B8B8B;
      }
    }
  }
}

.option {
  width: 100%;
  padding: 44rpx;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;

  &-item {
    padding: 18rpx 14rpx;
    text-align: center;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    line-height: 1.4;
    color: #181818;
    background: #F9F9F9;
    border: 2rpx solid #F9F9F9;
    border-radius: 16rpx;

    &.is-active {
      color: #7451DE;
      background: #F2EEFF;
      border-color: #7451DE;
    }
  }
}

.footer {
  width: 100%;
  padding: 32rpx 40rpx;
  box-sizing: border-box;

  .btn {
    width: 100%;
    padding: 16rpx 0;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    line-height: 1.4;
    color: #FFFFFF;
    background-image: linear-gradient(to right, #4B348F, #845CFA);
    border-radius: 41rpx;
  }
}
</style>