gami-web/app/components/popup/OrderRating.vue

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import StarRating from '~/components/common/StarRating.vue'

interface Props {
  show: boolean
  /**
   * 当前评分 1-5
   */
  modelValue?: number
  /**
   * 头像地址（可选）
   */
  avatar?: string
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: 0,
  avatar: '',
})

const emit = defineEmits<{
  'update:show': [value: boolean]
  'update:modelValue': [value: number]
  'submit': [value: number]
}>()

const { t } = useI18n()
const img = useImage()

const localScore = ref(props.modelValue || 0)

watch(
  () => props.modelValue,
  (val) => {
    if (val !== undefined) {
      localScore.value = val
    }
  },
)

const handleUpdateShow = (value: boolean) => {
  emit('update:show', value)
}

const handleChange = (value: number) => {
  localScore.value = value
  emit('update:modelValue', value)
}

const satisfactionKey = computed(() => {
  if (!localScore.value)
    return 'order.rating.level.none'

  if (localScore.value <= 1)
    return 'order.rating.level.1'

  if (localScore.value === 2)
    return 'order.rating.level.2'

  if (localScore.value === 3)
    return 'order.rating.level.3'

  if (localScore.value === 4)
    return 'order.rating.level.4'

  return 'order.rating.level.5'
})

const satisfactionLabel = computed(() => t(satisfactionKey.value))

const handleSubmit = () => {
  if (!localScore.value)
    return

  emit('submit', localScore.value)
}
</script>

<template>
  <van-popup
    :show="props.show"
    round
    position="bottom"
    class="order-rating-popup"
    @update:show="handleUpdateShow"
  >
    <div class="order-rating-popup__container">
      <div class="order-rating-popup__avatar-wrapper">
        <div class="order-rating-popup__avatar">
          <NuxtImg
            :src="avatar"
            :alt="avatar"
            loading="lazy"
            :placeholder="img('/avatar.png')"
          />
        </div>
      </div>

      <p class="order-rating-popup__title">
        {{ t('order.rating.title') }}
      </p>

      <div class="order-rating-popup__satisfaction-row">
        <span class="order-rating-popup__satisfaction-label">
          {{ t('order.rating.satisfactionLabel') }}
        </span>

        <div class="order-rating-popup__stars">
          <StarRating
            v-model="localScore"
            mode="rate"
            :size="30"
            :max-stars="5"
            @change="handleChange"
          />
        </div>

        <span class="order-rating-popup__satisfaction-text">
          {{ satisfactionLabel }}
        </span>
      </div>

      <button
        class="order-rating-popup__submit"
        type="button"
        :disabled="!localScore"
        @click="handleSubmit"
      >
        {{ t('order.rating.submit') }}
      </button>
    </div>
  </van-popup>
</template>

<style scoped lang="scss">
.order-rating-popup {
  background-color: transparent;

  &__container {
    position: relative;
    padding: 40px 16px 24px;
    border-radius: 15px 15px 0 0;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  &__avatar-wrapper {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__avatar {
    width: 96%;
    height: 96%;
    border-radius: 50%;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  &__title {
    margin-top: 10px;
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 600;
    color: #1d2129;
    text-align: center;
  }

  &__satisfaction-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  &__satisfaction-label,
  &__satisfaction-text {
    font-size: 12px;
    line-height: 16px;
    color: #1d2129;
    white-space: nowrap;
    position: absolute;
    z-index: 1;
  }

  &__satisfaction-label {
    left: 0;
    text-align: left;
  }

  &__satisfaction-text {
    right: 0;
    text-align: right;
  }

  &__stars {
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
  }

  &__submit {
    width: 100%;
    height: 47px;
    border-radius: 100px;
    border: none;
    background: linear-gradient(90deg, #2f95ff 28.37%, #50ffd8 100%);
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
  }

  &__submit:disabled {
    opacity: 0.5;
    cursor: default;
  }
}
</style>

<style lang="scss">
.van-popup.order-rating-popup {
  overflow-y: unset;
}
</style>