shoot-miniprograms/src/components/TargetPicker.vue

<script setup>
import { ref, watch } from "vue";
import SButton from "@/components/SButton.vue";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  onClose: {
    type: Function,
    default: () => {},
  },
  onConfirm: {
    type: Function,
    default: () => {},
  },
});

const selectedTarget = ref(2);
const showContainer = ref(false);
const showContent = ref(false);

watch(
  () => props.show,
  (newValue) => {
    if (newValue) {
      showContainer.value = true;
      setTimeout(() => {
        showContent.value = true;
      }, 100);
    } else {
      showContent.value = false;
      setTimeout(() => {
        showContainer.value = false;
      }, 100);
    }
  },
  {}
);

const handleConfirm = () => {
  props.onConfirm(selectedTarget.value);
  props.onClose();
};
</script>

<template>
  <view
    class="container"
    v-if="showContainer"
    :class="{ 'container-show': showContent }"
    @click="onClose"
  >
    <view
      class="modal-content"
      :class="{ 'modal-show': showContent }"
      @click.stop=""
    >
      <view class="header">
        <view class="header-title">
          <view class="header-title-line-left"></view>
          <text>选择靶型</text>
          <view class="header-title-line-right"></view>
        </view>
        <view class="close-btn" @click="onClose">
          <image src="../static/close-yellow.png" mode="widthFix" />
        </view>
      </view>
      <view class="target-options">
        <view
          :class="{ 'target-btn': true, 'target-choosen': selectedTarget === 1 }"
          @click="() => (selectedTarget = 1)"
        >
          <text>20厘米全环靶</text>
        </view>
        <view style="width: 30rpx"></view>
        <view
          :class="{ 'target-btn': true, 'target-choosen': selectedTarget === 2 }"
          @click="() => (selectedTarget = 2)"
        >
          <text>40厘米全环靶</text>
        </view>
      </view>
      <SButton width="694rpx" :onClick="handleConfirm">确定</SButton>
    </view>
  </view>
</template>

<style scoped>
.container {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #00000099;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 999;
}
.container-show {
  opacity: 1;
}
.modal-content {
  width: 100%;
  transform: translateY(100%);
  transition: all 0.3s ease;
  background: url("https://static.shelingxingqiu.com/attachment/2025-12-04/dep11770wzxg6o2alo.png")
    no-repeat center top;
  background-size: 100% auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding-bottom: 68rpx;
  padding-top: 44rpx;
}
.modal-show {
  transform: translateY(0%);
}
.header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 44rpx;
}
.header-title{
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-title text{
  width: 196rpx;
  height: 40rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  color: #FFEFBA;
}
.header-title-line-left{
  width: 214rpx;
  height: 0rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  border: 1rpx solid;
  border-image: linear-gradient(90deg, rgba(133, 119, 96, 1), rgba(133, 119, 96, 0)) 1 1;
}
.header-title-line-right{
  width: 214rpx;
  height: 0rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  border: 1rpx solid;
  border-image: linear-gradient(90deg, rgba(133, 119, 96, 1), rgba(133, 119, 96, 0)) 1 1;
 }
.close-btn {
  position: absolute;
  right: 0;
  top: -10px;
}
.close-btn > image {
  width: 40px;
  height: 40px;
}
.target-options {
  width: 750rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 38rpx;
}
.target-btn {
  width: 332rpx;
  height: 92rpx;
  text-align: center;
  border-radius: 10px;
  border: 2rpx solid #fff3;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.target-choosen {
  color: #fed847;
  border: 4rpx solid #fed847;
}
</style>