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

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

@ -1,12 +1,8 @@
<template> <template>
<div> <div>
<!-- <main-nav title="我的分享码" /> -->
<n-list class="main-content-wrap" bordered> <n-list class="main-content-wrap" bordered>
<div class="balance-wrap"> <div class="balance-wrap">
<div class="balance-line"> <n-statistic style="color: black; font-weight: bold">我的分享码</n-statistic>
<n-statistic style="color:black; font-weight:bold;">我的分享码</n-statistic>
</div>
</div> </div>
<template #footer> <template #footer>
<div class="pagination-wrap" v-if="totalPage > 1"> <div class="pagination-wrap" v-if="totalPage > 1">
@ -27,86 +23,58 @@
<n-empty size="large" description="暂无数据" /> <n-empty size="large" description="暂无数据" />
</div> </div>
<n-list-item v-for="sharekey in shareKeys" :key="sharekey.share_key"> <n-table :bordered="false" :single-line="false" striped>
<div class="bill-line"> <thead>
<div>{{ sharekey.share_key }}</div> <tr>
<div>{{ sharekey.name }}</div> <th>分享码</th>
<!-- <div>{{ sharekey.description }}</div> --> <th>名称</th>
<div> <th>描述</th>
<span <th>操作</th>
class="truncated-content" </tr>
@mouseover="showFullContent(sharekey.share_key)" </thead>
@mouseleave="hideFullContent" <tbody>
> <tr v-for="sharekey in shareKeys" :key="sharekey.share_key">
{{ truncatedDescription(sharekey.description) }} <td @click="copyToClipboard(sharekey.share_key)" class="copy-code">
</span> {{ sharekey.share_key }}
<!-- 气泡弹出框 --> </td>
<div <td>{{ sharekey.name }}</td>
class="popover-content" <td><n-ellipsis style="max-width: 240px">{{ sharekey.description }}</n-ellipsis></td>
v-show="showFullContentId === sharekey.share_key" <td>
> <n-button size="small" secondary type="primary" @click="isDelete(sharekey)">删除</n-button>
{{ sharekey.description }} </td>
</div> </tr>
</div> </tbody>
<n-button </n-table>
size="small"
secondary
type="primary"
@click="isDelete(sharekey)"
>
删除
</n-button>
</div>
</n-list-item>
</div> </div>
</n-list> </n-list>
<n-modal v-model:show="showRecharge"> <n-modal v-model:show="showRecharge">
<n-card <n-card :bordered="false" title="删除" role="dialog" aria-modal="true" style="width: 100%; max-width: 330px">
:bordered="false" <div class="amount-options" v-if="rechargeQrcode.length === 0 && selectedShareKey">
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"> <n-space align="baseline">
<div> {{selectedShareKey.name}} {{ selectedShareKey.share_key }}</div> <div>删除分享码会影响排行榜分数评定,是否删除:</div>
<div>{{ selectedShareKey.name }} {{ selectedShareKey.share_key }}</div>
</n-space> </n-space>
</div> </div>
</div> <div v-if="selectedShareKey" style="margin-top: 20px">
<div v-if="selectedShareKey !== null" <n-button style="width: 30%; left: 10%" type="primary" @click="deleteShareKey(selectedShareKey.share_key)">确定</n-button>
style="margin-top: 20px" <n-button style="width: 30%; left: 30%" @click="showRecharge = false">取消</n-button>
>
<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> </div>
</n-card> </n-card>
</n-modal> </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,14 +84,24 @@ 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;
@ -133,13 +111,13 @@ const loadKeys = () => {
}) })
.catch((err) => { .catch((err) => {
loading.value = false; loading.value = false;
store.commit('triggerAuth', true); store.commit("triggerAuth", true);
store.commit('userLogout'); store.commit("userLogout");
}); });
} else { } else {
loading.value = false; loading.value = false;
store.commit('triggerAuth', true); store.commit("triggerAuth", true);
store.commit('userLogout'); store.commit("userLogout");
} }
}; };
const isDelete = (sharekey: Item.ShareKeyProps) => { const isDelete = (sharekey: Item.ShareKeyProps) => {
@ -149,13 +127,13 @@ const isDelete = (sharekey: Item.ShareKeyProps) => {
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();
} }
@ -164,13 +142,13 @@ const deleteShareKey = (keyToDelete: string) => {
}) })
.catch((err) => { .catch((err) => {
loading.value = false; loading.value = false;
store.commit('triggerAuth', true); store.commit("triggerAuth", true);
store.commit('userLogout'); store.commit("userLogout");
}); });
} else { } else {
loading.value = false; loading.value = false;
store.commit('triggerAuth', true); store.commit("triggerAuth", true);
store.commit('userLogout'); store.commit("userLogout");
} }
showRecharge.value = false; showRecharge.value = false;
}; };
@ -180,112 +158,29 @@ const updatePage = (p: number) => {
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; display: flex;
justify-content: space-between; justify-content: space-between;
.balance-opts {
display: flex;
flex-direction: column;
}
} }
} }
.bill-line {
padding: 16px;
display: flex;
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 {

Write Preview
Loading…
Cancel
Save