Initial commit of akmon project

pages/test/gender-picker-view-test.uvue

@@ -0,0 +1,114 @@
+<template>
+  <view>
+    <button @click="openPicker">选择性别</button>
+    <view v-if="showPicker" class="picker-modal">
+      <picker-view
+        class="picker-view"
+        :value="tempGenderIndex"
+        :indicator-style="'height: 50px;'"
+        @change="onPickerChange"
+      >
+        <picker-view-column>
+          <view v-for="(g, idx) in genderOptions" :key="g" class="picker-item">{{ g }}</view>
+        </picker-view-column>
+      </picker-view>
+      <view class="picker-actions">
+        <button @click="showPicker = false">取消</button>
+        <button @click="confirmGender">确定</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  data() {
+    return {
+      genderOptions: ['male', 'female', 'other'],
+      tempGenderIndex: [0], // 作为 number[]
+      selectedGenderIndex: 0,
+      showPicker: false
+    }
+  },
+  methods: {
+    openPicker() {
+      // 确保弹窗显示前索引合<E5BC95>?
+      const idx = (this.selectedGenderIndex >= 0 && this.selectedGenderIndex < this.genderOptions.length)
+        ? this.selectedGenderIndex : 0;
+      this.tempGenderIndex = [idx];
+      this.showPicker = true;
+    },
+    onPickerChange(e: UniPickerViewChangeEvent) {
+      const idx = e.detail.value[0];
+      // 兜底保护，防止越<E6ADA2>?
+      this.tempGenderIndex = [(idx >= 0 && idx < this.genderOptions.length) ? idx : 0];
+    },
+    confirmGender() {
+      this.selectedGenderIndex = this.tempGenderIndex[0];
+      this.showPicker = false;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.picker-modal {
+  position: fixed;
+  left: 0; right: 0; bottom: 0;
+  background: #fff;
+  z-index: 1000;
+  box-shadow: 0 -2px 20px rgba(0,0,0,0.1);
+  padding-bottom: 30rpx;
+  width: 100vw;
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.picker-view {
+  width: 100%;
+  min-width: 240px;
+  max-width: 100vw;
+  height: 320px;
+  background: #fff;
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+}
+.picker-view-column {
+  flex: 1;
+  min-width: 80px;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.picker-item {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+.picker-actions {
+  display: flex;
+  justify-content: space-between;
+  width: 100vw;
+  padding: 20rpx 40rpx 0 40rpx;
+  box-sizing: border-box;
+}
+.picker-actions button {
+  flex: 1;
+  margin: 0 10rpx;
+  background: #2196f3;
+  color: #fff;
+  border-radius: 10rpx;
+  font-size: 28rpx;
+  height: 80rpx;
+  border: none;
+}
+</style>