msb-public
/
paopao-ce
mirror of https://github.com/rocboss/paopao-ce
1
0
Code Issues Projects Releases Wiki Activity

更新分享码页面，由列表变为表格，增加分享码点击复制功能，更新删除提示语

Browse Source
pull/361/head
HXY 2 years ago
parent 734d048435
commit 35448e84b3
1 changed files with 146 additions and 251 deletions
Show Stats Download Patch File Download Diff File

397
web/src/views/ShareKey.vue
Unescape View File

@ -1,112 +1,80 @@
<template> <template>
<div> <div>
<!-- <main-nav title="我的分享码" /> --> <n-list class="main-content-wrap" bordered>
<div class="balance-wrap">
<n-list class="main-content-wrap" bordered> <n-statistic style="color: black; font-weight: bold">我的分享码</n-statistic>
<div class="balance-wrap"> </div>
<div class="balance-line"> <template #footer>
<n-statistic style="color:black; font-weight:bold;">我的分享码</n-statistic> <div class="pagination-wrap" v-if="totalPage > 1">
</div> <n-pagination
</div> :page="page"
<template #footer> @update:page="updatePage"
<div class="pagination-wrap" v-if="totalPage > 1"> :page-slot="!store.state.collapsedRight ? 8 : 5"
<n-pagination :page-count="totalPage"
:page="page" />
@update:page="updatePage" </div>
:page-slot="!store.state.collapsedRight ? 8 : 5" </template>
:page-count="totalPage"
/> <div v-if="loading" class="skeleton-wrap">
</div> <post-skeleton :num="pageSize" />
</template> </div>
<div v-else>
<div v-if="loading" class="skeleton-wrap"> <div class="empty-wrap" v-if="shareKeys.length === 0">
<post-skeleton :num="pageSize" /> <n-empty size="large" description="暂无数据" />
</div> </div>
<div v-else>
<div class="empty-wrap" v-if="shareKeys.length === 0"> <n-table :bordered="false" :single-line="false" striped>
<n-empty size="large" description="暂无数据" /> <thead>
</div> <tr>
<th>分享码</th>
<n-list-item v-for="sharekey in shareKeys" :key="sharekey.share_key"> <th>名称</th>
<div class="bill-line"> <th>描述</th>
<div>{{ sharekey.share_key }}</div> <th>操作</th>
<div>{{ sharekey.name }}</div> </tr>
<!-- <div>{{ sharekey.description }}</div> --> </thead>
<div> <tbody>
<span <tr v-for="sharekey in shareKeys" :key="sharekey.share_key">
class="truncated-content" <td @click="copyToClipboard(sharekey.share_key)" class="copy-code">
@mouseover="showFullContent(sharekey.share_key)" {{ sharekey.share_key }}
@mouseleave="hideFullContent" </td>
> <td>{{ sharekey.name }}</td>
{{ truncatedDescription(sharekey.description) }} <td><n-ellipsis style="max-width: 240px">{{ sharekey.description }}</n-ellipsis></td>
</span> <td>
<!-- 气泡弹出框 --> <n-button size="small" secondary type="primary" @click="isDelete(sharekey)">删除</n-button>
<div </td>
class="popover-content" </tr>
v-show="showFullContentId === sharekey.share_key" </tbody>
> </n-table>
{{ sharekey.description }} </div>
</div> </n-list>
</div>
<n-button <n-modal v-model:show="showRecharge">
size="small" <n-card :bordered="false" title="删除" role="dialog" aria-modal="true" style="width: 100%; max-width: 330px">
secondary <div class="amount-options" v-if="rechargeQrcode.length === 0 && selectedShareKey">
type="primary" <n-space align="baseline">
@click="isDelete(sharekey)" <div>删除分享码会影响排行榜分数评定,是否删除:</div>
> <div>{{ selectedShareKey.name }} {{ selectedShareKey.share_key }}</div>
删除 </n-space>
</n-button> </div>
</div> <div v-if="selectedShareKey" style="margin-top: 20px">
</n-list-item> <n-button style="width: 30%; left: 10%" type="primary" @click="deleteShareKey(selectedShareKey.share_key)">确定</n-button>
</div> <n-button style="width: 30%; left: 30%" @click="showRecharge = false">取消</n-button>
</n-list> </div>
<n-modal v-model:show="showRecharge"> </n-card>
<n-card </n-modal>
:bordered="false"
title="删除"
role="dialog"
aria-modal="true"
style="width: 100%; max-width: 330px"
>
<div class="amount-options" v-if="rechargeQrcode.length === 0">
<div v-if="selectedShareKey !== null" class="amount-options">
<n-space align="baseline">
<div> {{selectedShareKey.name}} {{ selectedShareKey.share_key }}</div>
</n-space>
</div>
</div>
<div v-if="selectedShareKey !== null"
style="margin-top: 20px"
>
<n-button
style="width: 30%;left: 10%;"
type="primary"
@click="deleteShareKey(selectedShareKey.share_key)"
>
确定
</n-button>
<n-button
style="width: 30% ; left: 30%"
@click="showRecharge = false"
>
取消
</n-button>
</div>
</n-card>
</n-modal>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue'; import { ref, onMounted } from "vue";
import { useStore } from 'vuex'; import { useStore } from "vuex";
import { useRoute } from 'vue-router'; import { useRoute } from "vue-router";
import { getShareKeys, deleteThisShareKey } from '@/api/shareKey'; import { getShareKeys, deleteThisShareKey } from "@/api/shareKey";
const store = useStore(); const store = useStore();
const route = useRoute(); const route = useRoute();
const showRecharge = ref(false); const showRecharge = ref(false);
const rechargeQrcode = ref(''); const rechargeQrcode = ref("");
const loading = ref(false); const loading = ref(false);
// 获取 ShareKey // 获取 ShareKey
const shareKeys = ref<Item.ShareKeyProps[]>([]); const shareKeys = ref<Item.ShareKeyProps[]>([]);
@ -116,184 +84,111 @@ const page = ref(+(route.query.p as string) || 1);
const pageSize = ref(10); const pageSize = ref(10);
const totalPage = ref(0); const totalPage = ref(0);
const copyToClipboard = (text: any) => {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
window.$message.success("复制成功，快去分享吧~");
};
const loadKeys = () => { const loadKeys = () => {
loading.value = true; loading.value = true;
const token = localStorage.getItem('PAOPAO_TOKEN') || ''; const token = localStorage.getItem("PAOPAO_TOKEN") || "";
if(token) { if (token) {
const params: NetParams.UserGetShareKeys = { const params: NetParams.UserGetShareKeys = {
page: page.value, page: page.value,
page_size: pageSize.value, page_size: pageSize.value,
} };
getShareKeys(params, token) getShareKeys(params, token)
.then((rsp) => { .then((rsp) => {
loading.value = false; loading.value = false;
shareKeys.value = rsp.list; shareKeys.value = rsp.list;
totalPage.value = Math.ceil(rsp.pager.total_rows / pageSize.value); totalPage.value = Math.ceil(rsp.pager.total_rows / pageSize.value);
window.scrollTo(0, 0); window.scrollTo(0, 0);
}) })
.catch((err) => { .catch((err) => {
loading.value = false;
store.commit('triggerAuth', true);
store.commit('userLogout');
});
} else {
loading.value = false; loading.value = false;
store.commit('triggerAuth', true); store.commit("triggerAuth", true);
store.commit('userLogout'); store.commit("userLogout");
} });
} else {
loading.value = false;
store.commit("triggerAuth", true);
store.commit("userLogout");
}
}; };
const isDelete = (sharekey: Item.ShareKeyProps) => { const isDelete = (sharekey: Item.ShareKeyProps) => {
selectedShareKey.value = sharekey; selectedShareKey.value = sharekey;
showRecharge.value = true; showRecharge.value = true;
}; };
const deleteShareKey = (keyToDelete: string) => { const deleteShareKey = (keyToDelete: string) => {
const params: NetParams.UserDeleteShareKey = { const params: NetParams.UserDeleteShareKey = {
share_key: keyToDelete, share_key: keyToDelete,
} };
const token = localStorage.getItem('PAOPAO_TOKEN') || ''; const token = localStorage.getItem("PAOPAO_TOKEN") || "";
if(token) { if (token) {
deleteThisShareKey(params, token) deleteThisShareKey(params, token)
.then((rsp) => { .then((rsp) => {
if(rsp.Status === "DELETE_SUCCESS") { if (rsp.Status === "DELETE_SUCCESS") {
window.$message.success('删除成功'); window.$message.success("删除成功");
showRecharge.value = false; showRecharge.value = false;
loadKeys(); loadKeys();
} }
loading.value = false; loading.value = false;
window.scrollTo(0, 0); window.scrollTo(0, 0);
}) })
.catch((err) => { .catch((err) => {
loading.value = false;
store.commit('triggerAuth', true);
store.commit('userLogout');
});
} else {
loading.value = false; loading.value = false;
store.commit('triggerAuth', true); store.commit("triggerAuth", true);
store.commit('userLogout'); store.commit("userLogout");
} });
showRecharge.value = false; } else {
loading.value = false;
store.commit("triggerAuth", true);
store.commit("userLogout");
}
showRecharge.value = false;
}; };
const updatePage = (p: number) => { const updatePage = (p: number) => {
page.value = p; page.value = p;
loadKeys(); loadKeys();
};
const showFullContent = (shareKeyId: string) => {
showFullContentId.value = shareKeyId;
};
const hideFullContent = () => {
showFullContentId.value = null;
};
const truncatedDescription = (description: string) => {
const maxLength = 6;
if (description.length <= maxLength) {
return description;
}
return `${description.slice(0, maxLength)}...`;
}; };
onMounted(() => { onMounted(() => {
loadKeys(); loadKeys();
}); });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.popover-content {
position: absolute;
background-color: #fff; /* 白色背景 */
color: #000; /* 弹出框文字颜色 */
padding: 8px; /* 弹出框内边距 */
border-radius: 4px; /* 弹出框边框圆角 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 弹出框阴影效果 */
max-width: 200px; /* 弹出框最大宽度 */
white-space: pre-wrap; /* 弹出框内容换行 */
z-index: 999; /* 设置弹出框显示在文字上方，值越大显示越靠上 */
/* 创建气泡三角形 */
&::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px; /* 三角形的位置在弹出框中心 */
border-width: 8px;
border-style: solid;
border-color: transparent transparent #fff transparent; /* 透明 上方白色 透明 透明 */
}
}
/* 鼠标悬浮时显示弹出框 */
.truncated-content:hover + .popover-content {
display: block;
}
/* 隐藏弹出框 */
.popover-content {
display: none;
}
.balance-wrap { .balance-wrap {
padding: 16px; padding: 16px;
.balance-line { .balance-line {
display: flex;
justify-content: space-between;
.balance-opts {
display: flex;
flex-direction: column;
}
}
}
.bill-line {
padding: 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.income, }
.out {
font-weight: bold;
}
.income {
color: #063c62;
}
} }
.pagination-wrap { .pagination-wrap {
padding: 10px; padding: 10px;
display: flex; display: flex;
justify-content: center; justify-content: center;
overflow: hidden;
} }
.qrcode-wrap { .copy-code {
display: flex; cursor: pointer;
flex-direction: column;
align-items: center;
justify-content: center;
.pay-tips {
margin-top: 16px;
}
.pay-sub-tips {
margin-top: 4px;
font-size: 12px;
opacity: 0.75;
display: flex;
align-items: center;
}
} }
.dark { .dark {
.income { .income {
color: #2080f0; color: #2080f0;
} }
.main-content-wrap { .main-content-wrap {
background-color: rgba(16, 16, 20, 0.75); background-color: rgba(16, 16, 20, 0.75);
} }
} }
</style> </style>
Write Preview
Loading…
Cancel
Save