106 lines
2.3 KiB
Vue
106 lines
2.3 KiB
Vue
<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>
|