UI更新

src/pages/point-book-list.vue

@@ -1,6 +1,35 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from "vue";
 import Container from "@/components/Container.vue";
+import SModal from "@/components/SModal.vue";
+import EditOption from "@/components/EditOption.vue";
+import PointRecord from "@/components/PointRecord.vue";
+
+const bowType = ref("");
+const distance = ref(0);
+const bowtargetType = ref("");
+const showModal = ref(false);
+const selectorIndex = ref(0);
+
+const openSelector = (index) => {
+  selectorIndex.value = index;
+  showModal.value = true;
+};
+
+const onSelectOption = (itemIndex, value) => {
+  if (itemIndex === 0) {
+    bowType.value = value;
+  } else if (itemIndex === 1) {
+    distance.value = value;
+  } else if (itemIndex === 2) {
+    bowtargetType.value = value;
+  }
+};
+const toDetailPage = (record) => {
+  uni.navigateTo({
+    url: `/pages/point-book-detail?id=${record.id}`,
+  });
+};
 </script>
 
 <template>
@@ -10,7 +39,117 @@ import Container from "@/components/Container.vue";
     :whiteBackArrow="false"
     title="计分记录"
   >
+    <view class="container">
+      <view class="selectors">
+        <view @click="() => openSelector(0)">
+          <text :style="{ color: bowType ? '#000' : '#999' }">{{
+            bowType || "请选择"
+          }}</text>
+          <image src="../static/arrow-grey.png" mode="widthFix" />
+        </view>
+        <view @click="() => openSelector(1)">
+          <text :style="{ color: bowType ? '#000' : '#999' }">{{
+            distance ? distance + " 米" : "请选择"
+          }}</text>
+          <image src="../static/arrow-grey.png" mode="widthFix" />
+        </view>
+        <view @click="() => openSelector(2)">
+          <text :style="{ color: bowType ? '#000' : '#999' }">{{
+            bowtargetType || "请选择"
+          }}</text>
+          <image src="../static/arrow-grey.png" mode="widthFix" />
+        </view>
+      </view>
+      <view class="point-records">
+        <view v-for="i in 4" :key="i" @click="toDetailPage">
+          <PointRecord />
+        </view>
+      </view>
+      <SModal
+        :show="showModal"
+        :noBg="true"
+        :onClose="() => (showModal = false)"
+      >
+        <view class="selector">
+          <button hover-class="none" @click="() => (showModal = false)">
+            <image src="../static/close-grey.png" mode="widthFix" />
+          </button>
+          <EditOption
+            v-show="selectorIndex === 0"
+            :itemIndex="0"
+            :expand="true"
+            :noArrow="true"
+            :onSelect="onSelectOption"
+          />
+          <EditOption
+            v-show="selectorIndex === 1"
+            :itemIndex="1"
+            :expand="true"
+            :noArrow="true"
+            :onSelect="onSelectOption"
+          />
+          <EditOption
+            v-show="selectorIndex === 2"
+            :itemIndex="2"
+            :expand="true"
+            :noArrow="true"
+            :onSelect="onSelectOption"
+          />
+        </view>
+      </SModal>
+    </view>
   </Container>
 </template>
 
-<style scoped></style>
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+.selectors {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 15px;
+}
+.selectors > view {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;
+  height: 55px;
+  border-radius: 12px;
+  color: #333;
+  font-size: 13px;
+  width: 26vw;
+}
+.selectors > view:last-child {
+  width: 34vw;
+}
+.selectors > view > text {
+  width: calc(100% - 11vw);
+  text-align: center;
+  margin-left: 3vw;
+}
+.selectors > view > image {
+  width: 5vw;
+  margin-right: 3vw;
+}
+.selector {
+  padding: 10px;
+  background-color: #fff;
+  border-radius: 10px;
+  position: relative;
+}
+.selector > button {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.selector > button > image {
+  width: 40px;
+}
+.point-records {
+  padding: 15px;
+}
+</style>