i

src/pages/users/distribution/index.vue

@@ -0,0 +1,105 @@
+<template>
+    <view>
+        <view class="card-list">
+            <view
+                class="item"
+                v-for="(item, index) in list"
+                :key="index"
+                @click="clickItem(item)"
+            >
+                <view class="text">
+                    <IconFont :name="item.icon" color="red" size="30" />
+                    <view>{{ item.label }}</view>
+                </view>
+            </view>
+            <view style="width: 45%;"></view>
+        </view>
+        <!-- 二维码弹窗 -->
+        <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="show">
+            <view class="popup">
+                <view>推荐人二维码绑定</view>
+                <image :src="urlCode" />
+            </view>
+        </nut-popup>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { IconFont } from "@nutui/icons-vue-taro";
+import Taro from "@tarojs/taro";
+
+const show = ref(false);
+
+const urlCode = ref("");
+
+const list = ref([
+    {
+        id: 1,
+        icon: "scan",
+        label: "推广名片",
+    },
+    {
+        id: 2,
+        icon: "date",
+        label: "积分明细",
+    },
+    {
+        id: 3,
+        icon: "my2",
+        label: "推广用户",
+    },
+]);
+
+const clickItem = (item: any) => {
+    if (item.id === 1) {
+        urlCode.value = `https://api.pwmqr.com/qrcode/create?url=${Taro.getStorageSync(
+            "token"
+        )}`;
+        show.value = true;
+    } else if (item.id === 2) {
+        Taro.navigateTo({
+            url: "/pages/users/distribution/integral/index",
+        });
+    } else {
+        Taro.navigateTo({
+            url: "/pages/users/distribution/userlist/index",
+        });
+    }
+};
+</script>
+
+<style lang="scss">
+.card-list {
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+
+    .item {
+        width: 45%;
+        height: 200px;
+        background-color: #fff;
+        border-radius: 20px;
+        margin-top: 10px;
+        text-align: center;
+        padding: 10px;
+        position: relative;
+
+        .text {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+}
+
+.popup {
+    text-align: center;
+
+    image {
+        width: 300px;
+        height: 300px;
+    }
+}
+</style>