i

src/pages/users/distribution/userlist/index.vue

@@ -0,0 +1,93 @@
+<template>
+    <view>
+        <view v-if="data.length > 0">
+            <view
+                class="card-list"
+                v-for="(item, index) in (data as any[])"
+                :key="index"
+            >
+                <view class="left">
+                    <image :src="item.avatarUrl" />
+                    <view class="text">
+                        <view>{{ item.nickName }}</view>
+                        <view>{{ item.phone }}</view>
+                    </view>
+                    
+                </view>
+                <view class="right"></view>
+            </view>
+            <nut-pagination
+                v-model="page.PageNum"
+                :total-items="page.ItemCount"
+                :items-per-page="page.PageSize"
+                @change="pageChange"
+            />
+        </view>
+        <view v-else>
+            <nut-empty description="暂无明细"></nut-empty>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useLoad, showToast } from "@tarojs/taro";
+import { getTGUserList } from "../../../../api/user";
+
+useLoad(() => {
+    getData();
+});
+
+const data = ref([]);
+
+const page = ref({ PageNum: 1, PageSize: 10, ItemCount: 0 });
+
+const pageChange = (e: number) => {
+    page.value.PageNum = e;
+    getData();
+};
+
+const getData = async () => {
+    try {
+        const res = await getTGUserList({
+            PageNum: page.value.PageNum,
+            PageSize: page.value.PageSize,
+        });
+        data.value = res.data.data || [];
+        page.value.ItemCount = res.data.count;
+    } catch (error) {
+        showToast({ title: error.msg, icon: "none" });
+    }
+};
+</script>
+
+<style lang="scss">
+.nut-pagination {
+    position: absolute;
+    margin-top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.card-list {
+    width: 700px;
+    background-color: #fff;
+    margin: 10px auto;
+    border-radius: 10px;
+    padding: 20px;
+
+    .left {
+        display: flex;
+        align-items: center;
+        image {
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+        }
+
+        .text {
+            margin-left: 20px;
+        }
+    }
+}
+</style>