wui-components-v2 1.1.70 → 1.1.72

package/components/add-address-list/add-address-list.vue

@@ -1,187 +1,187 @@
-<script setup>
-import { computed, onMounted, ref } from 'vue'
-import { useGlobalMessage } from '@/core-components/composables/useGlobalMessage'
-
-defineOptions({
-  name: 'AddAddressList',
-})
-const { addAddressPath } = defineProps({
-  addAddressPath: {
-    type: String,
-    default: '',
-  },
-})
-
-function addAddress() {
-  uni.navigateTo({
-    url: addAddressPath,
-  })
-}
-
-// 搜索关键词
-const keyword = ref('')
-// 分页配置
-const page = ref(1)
-const pageSize = ref(5)
-const isNoMore = ref(false)
-const loadingText = ref('上拉加载更多')
-
-// 全部数据源
-const allAddressList = ref([])
-// 页面展示列表
-const showList = ref([])
-
-// 模拟后端批量数据
-function mockAllData() {
-  const arr = []
-  for (let i = 1; i <= 30; i++) {
-    arr.push({
-      name: `用户${i}`,
-      phone: `138${String(i).padStart(8, '0')}`,
-      address: `测试地址${i}号 某某小区${i}栋${i}单元`,
-    })
-  }
-  allAddressList.value = arr
-}
-
-// 分页截取数据
-function getPageData() {
-  const start = (page.value - 1) * pageSize.value
-  const end = page.value * pageSize.value
-  return allAddressList.value.slice(start, end)
-}
-
-// 加载更多
-function loadMore() {
-  if (isNoMore.value)
-    return
-  loadingText.value = '加载中...'
-  // 模拟接口延迟
-  setTimeout(() => {
-    const newData = getPageData()
-    if (newData.length === 0) {
-      isNoMore.value = true
-      loadingText.value = '没有更多了'
-      return
-    }
-    showList.value.push(...newData)
-    page.value++
-    loadingText.value = '上拉加载更多'
-  }, 600)
-}
-
-// 搜索过滤
-const filterList = computed(() => {
-  if (!keyword.value)
-    return showList.value
-  return showList.value.filter(item =>
-    item.name.includes(keyword.value)
-    || item.phone.includes(keyword.value)
-    || item.address.includes(keyword.value),
-  )
-})
-
-// 返回
-const goBack = () => history.back()
-// 编辑
-function editAddress() {}
-// 删除
-function deleteAddress(idx) {
-  uni.showModal({
-    title: '提示',
-    content: '确定删除该地址？',
-    success: (res) => {
-      if (res.confirm)
-        showList.value.splice(idx, 1)
-    },
-  })
-}
-function selectAddress(item) {
-  console.log('item', item)
-  uni.$emit('addressListBack', {...item,id:1111})
-  uni.navigateBack({
-    delta: 1,
-  })
-}
-
-onMounted(() => {
-  mockAllData()
-  loadMore()
-})
-</script>
-
-<template>
-  <view class="min-h-screen bg-gray-50 pb-20">
-    <!-- 搜索框 -->
-    <view class="p-4">
-      <view class="flex items-center rounded-full bg-gray-100 px-4 py-2">
-        <svg class="mr-2 h-4 w-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <circle cx="11" cy="11" r="7" />
-          <path d="M16 16l4 4" stroke-linecap="round" />
-        </svg>
-        <input
-          v-model="keyword"
-          type="text"
-          placeholder="请输入姓名/手机号/公司名称"
-          class="flex-1 bg-transparent text-sm text-gray-700 outline-none placeholder-gray-400"
-        >
-      </view>
-    </view>
-
-    <!-- 列表区域 开启滚动监听 -->
-    <view
-      class="overflow-y-auto px-4 space-y-3"
-      @scrolltolower="loadMore"
-    >
-      <view
-        v-for="(item, index) in showList"
-        :key="index"
-        class="rounded-lg bg-white p-4 shadow-sm"
-        @click="selectAddress(item)"
-      >
-        <view class="mb-2 flex items-center">
-          <text class="mr-3 text-gray-900 font-medium">
-            {{ item.name }}
-          </text>
-          <text class="text-sm text-gray-500">
-            {{ item.phone }}
-          </text>
-        </view>
-        <text class="mb-3 block text-sm text-gray-500 leading-relaxed">
-          {{ item.address }}
-        </text>
-        <view class="flex justify-end text-sm space-x-6">
-          <view class="flex items-center text-gray-500" @click="editAddress(item, index)">
-            <svg class="mr-1 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M12 20h9M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z" />
-            </svg>
-            编辑
-          </view>
-          <view class="flex items-center text-gray-500" @click="deleteAddress(index)">
-            <svg class="mr-1 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M10 11v6M14 11v6M5 6h14v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6z" />
-            </svg>
-            删除
-          </view>
-        </view>
-      </view>
-
-      <!-- 加载提示 -->
-      <view class="py-4 text-center text-sm text-gray-400">
-        {{ loadingText }}
-      </view>
-    </view>
-
-    <!-- 底部新增按钮 -->
-    <view
-      class="fixed bottom-6 left-1/2 h-12 w-11/12 flex items-center justify-center rounded-full bg-blue-500 text-white font-medium -translate-x-1/2"
-      @click="addAddress"
-    >
-      新增地址
-    </view>
-  </view>
-</template>
-
-<style scoped>
-
-</style>
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useGlobalMessage } from '@/core-components/composables/useGlobalMessage'
+
+defineOptions({
+  name: 'AddAddressList',
+})
+const { addAddressPath } = defineProps({
+  addAddressPath: {
+    type: String,
+    default: '',
+  },
+})
+
+function addAddress() {
+  uni.navigateTo({
+    url: addAddressPath,
+  })
+}
+
+// 搜索关键词
+const keyword = ref('')
+// 分页配置
+const page = ref(1)
+const pageSize = ref(5)
+const isNoMore = ref(false)
+const loadingText = ref('上拉加载更多')
+
+// 全部数据源
+const allAddressList = ref([])
+// 页面展示列表
+const showList = ref([])
+
+// 模拟后端批量数据
+function mockAllData() {
+  const arr = []
+  for (let i = 1; i <= 30; i++) {
+    arr.push({
+      name: `用户${i}`,
+      phone: `138${String(i).padStart(8, '0')}`,
+      address: `测试地址${i}号 某某小区${i}栋${i}单元`,
+    })
+  }
+  allAddressList.value = arr
+}
+
+// 分页截取数据
+function getPageData() {
+  const start = (page.value - 1) * pageSize.value
+  const end = page.value * pageSize.value
+  return allAddressList.value.slice(start, end)
+}
+
+// 加载更多
+function loadMore() {
+  if (isNoMore.value)
+    return
+  loadingText.value = '加载中...'
+  // 模拟接口延迟
+  setTimeout(() => {
+    const newData = getPageData()
+    if (newData.length === 0) {
+      isNoMore.value = true
+      loadingText.value = '没有更多了'
+      return
+    }
+    showList.value.push(...newData)
+    page.value++
+    loadingText.value = '上拉加载更多'
+  }, 600)
+}
+
+// 搜索过滤
+const filterList = computed(() => {
+  if (!keyword.value)
+    return showList.value
+  return showList.value.filter(item =>
+    item.name.includes(keyword.value)
+    || item.phone.includes(keyword.value)
+    || item.address.includes(keyword.value),
+  )
+})
+
+// 返回
+const goBack = () => history.back()
+// 编辑
+function editAddress() {}
+// 删除
+function deleteAddress(idx) {
+  uni.showModal({
+    title: '提示',
+    content: '确定删除该地址？',
+    success: (res) => {
+      if (res.confirm)
+        showList.value.splice(idx, 1)
+    },
+  })
+}
+function selectAddress(item) {
+  console.log('item', item)
+  uni.$emit('addressListBack', {...item,id:1111})
+  uni.navigateBack({
+    delta: 1,
+  })
+}
+
+onMounted(() => {
+  mockAllData()
+  loadMore()
+})
+</script>
+
+<template>
+  <view class="min-h-screen bg-gray-50 pb-20">
+    <!-- 搜索框 -->
+    <view class="p-4">
+      <view class="flex items-center rounded-full bg-gray-100 px-4 py-2">
+        <svg class="mr-2 h-4 w-4 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="11" cy="11" r="7" />
+          <path d="M16 16l4 4" stroke-linecap="round" />
+        </svg>
+        <input
+          v-model="keyword"
+          type="text"
+          placeholder="请输入姓名/手机号/公司名称"
+          class="flex-1 bg-transparent text-sm text-gray-700 outline-none placeholder-gray-400"
+        >
+      </view>
+    </view>
+
+    <!-- 列表区域 开启滚动监听 -->
+    <view
+      class="overflow-y-auto px-4 space-y-3"
+      @scrolltolower="loadMore"
+    >
+      <view
+        v-for="(item, index) in showList"
+        :key="index"
+        class="rounded-lg bg-white p-4 shadow-sm"
+        @click="selectAddress(item)"
+      >
+        <view class="mb-2 flex items-center">
+          <text class="mr-3 text-gray-900 font-medium">
+            {{ item.name }}
+          </text>
+          <text class="text-sm text-gray-500">
+            {{ item.phone }}
+          </text>
+        </view>
+        <text class="mb-3 block text-sm text-gray-500 leading-relaxed">
+          {{ item.address }}
+        </text>
+        <view class="flex justify-end text-sm space-x-6">
+          <view class="flex items-center text-gray-500" @click="editAddress(item, index)">
+            <svg class="mr-1 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 20h9M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z" />
+            </svg>
+            编辑
+          </view>
+          <view class="flex items-center text-gray-500" @click="deleteAddress(index)">
+            <svg class="mr-1 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M10 11v6M14 11v6M5 6h14v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6z" />
+            </svg>
+            删除
+          </view>
+        </view>
+      </view>
+
+      <!-- 加载提示 -->
+      <view class="py-4 text-center text-sm text-gray-400">
+        {{ loadingText }}
+      </view>
+    </view>
+
+    <!-- 底部新增按钮 -->
+    <view
+      class="fixed bottom-6 left-1/2 h-12 w-11/12 flex items-center justify-center rounded-full bg-blue-500 text-white font-medium -translate-x-1/2"
+      @click="addAddress"
+    >
+      新增地址
+    </view>
+  </view>
+</template>
+
+<style scoped>
+
+</style>