|
@@ -1,128 +1,174 @@
|
|
|
<template>
|
|
|
- <div class="advertRuleIdx">
|
|
|
- <s-header :name="$t('apkManage.apkManagement')" :noback="false"></s-header>
|
|
|
- <div
|
|
|
- v-if="isDelete"
|
|
|
- class="headCon l-flex-between o-plr-20 o-pt-26 o-pb-12 kBordBott"
|
|
|
- >
|
|
|
- <div class="l-flex-RC c-text-15 c-text-color c-text-b">
|
|
|
- {{ $t("advertManage.advertRule.selected") }}
|
|
|
- {{ selectTotals }}
|
|
|
- {{ $t("advertManage.advertRule.individual") }}
|
|
|
- </div>
|
|
|
- <div class="l-flex-RC">
|
|
|
- <div @click="cancelClk" class="c-text-c c-text-13 c-color">
|
|
|
- {{ $t("advertManage.advertRule.cancel") }}
|
|
|
- </div>
|
|
|
- <div
|
|
|
- @click="noticeClk"
|
|
|
- class="c-text-c o-ml-24 c-text-13"
|
|
|
- style="color: #df5e4c"
|
|
|
- >
|
|
|
- {{ $t("advertManage.advertRule.confirmDel") }}
|
|
|
+ <div class="apk-management-page">
|
|
|
+ <!-- 自定义头部 -->
|
|
|
+ <s-header
|
|
|
+ :name="$t('apkManage.apkManagement')"
|
|
|
+ :noback="false"
|
|
|
+ class="management-header"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 操作栏 -->
|
|
|
+ <div class="action-bar">
|
|
|
+ <div v-if="isDelete" class="delete-mode-bar">
|
|
|
+ <div class="selected-count">
|
|
|
+ <van-icon name="checked" color="#df5e4c" />
|
|
|
+ <span>{{ $t("advertManage.advertRule.selected") }}</span>
|
|
|
+ <span class="count-highlight">{{ selectTotals }}</span>
|
|
|
+ <span>{{ $t("advertManage.advertRule.individual") }}</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- v-else
|
|
|
- class="headCon l-flex-between o-plr-20 o-pt-26 o-pb-12 kBordBott"
|
|
|
- >
|
|
|
- <div class="l-flex-RC">
|
|
|
- <div class="ruleIcon"></div>
|
|
|
- <div class="c-text-color c-text-b c-text-15">
|
|
|
- {{ $t("advertManage.advertRule.total") }}
|
|
|
- <span class="c-text-20" style="color: #df5e4c">{{ ruleTotal }}</span>
|
|
|
- {{ $t("alarmHistory.recordsTotal") }}
|
|
|
+ <div class="action-buttons">
|
|
|
+ <van-button round size="small" class="cancel-btn" @click="cancelClk">
|
|
|
+ {{ $t("advertManage.advertRule.cancel") }}
|
|
|
+ </van-button>
|
|
|
+ <van-button
|
|
|
+ round
|
|
|
+ size="small"
|
|
|
+ type="danger"
|
|
|
+ class="delete-btn"
|
|
|
+ @click="noticeClk"
|
|
|
+ >
|
|
|
+ {{ $t("advertManage.advertRule.confirmDel") }}
|
|
|
+ </van-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="l-flex-RC">
|
|
|
- <div @click="toAdd" class="c-text-c">
|
|
|
- <div>
|
|
|
- <van-icon size="18" name="add-o" />
|
|
|
- </div>
|
|
|
- <div class="c-text-color c-text-12">
|
|
|
- {{ $t("advertManage.advertRule.add") }}
|
|
|
- </div>
|
|
|
+
|
|
|
+ <div v-else class="normal-mode-bar">
|
|
|
+ <div class="total-info">
|
|
|
+ <van-icon name="description" color="#4d6add" />
|
|
|
+ <span class="total-text">{{
|
|
|
+ $t("advertManage.advertRule.total")
|
|
|
+ }}</span>
|
|
|
+ <span class="total-count">{{ ruleTotal }}</span>
|
|
|
+ <span class="total-text">{{ $t("alarmHistory.recordsTotal") }}</span>
|
|
|
</div>
|
|
|
- <div @click="isDelete = true" class="c-text-c o-ml-24">
|
|
|
- <div>
|
|
|
- <van-icon size="18" name="close" />
|
|
|
+
|
|
|
+ <div class="action-icons" v-if="user.type === 0">
|
|
|
+ <div class="action-item" @click="toAdd">
|
|
|
+ <van-button
|
|
|
+ icon="plus"
|
|
|
+ size="small"
|
|
|
+ class="add-btn"
|
|
|
+ @click="toAdd"
|
|
|
+ color="#4d6add"
|
|
|
+ >
|
|
|
+ {{ $t("advertManage.advertRule.add") }}
|
|
|
+ </van-button>
|
|
|
</div>
|
|
|
- <div class="c-text-color c-text-12">
|
|
|
- {{ $t("advertManage.advertRule.delete") }}
|
|
|
+ <div class="action-item" @click="isDelete = true">
|
|
|
+ <van-button
|
|
|
+ icon="delete"
|
|
|
+ size="small"
|
|
|
+ type="danger"
|
|
|
+ plain
|
|
|
+ class="delete-btn"
|
|
|
+ @click="isDelete = true"
|
|
|
+ >
|
|
|
+ {{ $t("advertManage.advertRule.delete") }}
|
|
|
+ </van-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <van-tabs v-model:active="active" @click-tab="clickModel">
|
|
|
- <van-tab :title="$t('device.whole')" name="" />
|
|
|
- <van-tab
|
|
|
- v-for="item in modelList"
|
|
|
- :key="item.id"
|
|
|
- :title="item.name"
|
|
|
- :name="item.id"
|
|
|
- />
|
|
|
- </van-tabs>
|
|
|
- <div class="contentCon">
|
|
|
- <van-pull-refresh disabled v-model="refreshing" @refresh="onRefresh">
|
|
|
- <van-list
|
|
|
- v-model="loading"
|
|
|
- :finished="finished"
|
|
|
- :finished-text="$t('common.noMoreTxt')"
|
|
|
- @load="onLoad"
|
|
|
- :offset="20"
|
|
|
- :immediate-check="false"
|
|
|
+
|
|
|
+ <!-- 设备类型标签 -->
|
|
|
+ <div class="model-tabs">
|
|
|
+ <van-tabs
|
|
|
+ v-model:active="active"
|
|
|
+ @click-tab="clickModel"
|
|
|
+ animated
|
|
|
+ swipeable
|
|
|
+ >
|
|
|
+ <van-tab :title="$t('device.whole')" name="" />
|
|
|
+ <van-tab
|
|
|
+ v-for="item in modelList"
|
|
|
+ :key="item.id"
|
|
|
+ :title="item.name"
|
|
|
+ :name="item.id"
|
|
|
+ />
|
|
|
+ </van-tabs>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 内容区域 -->
|
|
|
+ <div class="content-container">
|
|
|
+ <van-list
|
|
|
+ v-model="loading"
|
|
|
+ :finished="finished"
|
|
|
+ :finished-text="$t('common.noMoreTxt')"
|
|
|
+ @load="onLoad"
|
|
|
+ :offset="20"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="item in tableData"
|
|
|
+ :key="item.id"
|
|
|
+ class="apk-card"
|
|
|
+ :class="{ 'card-selected': item.checked }"
|
|
|
>
|
|
|
- <div
|
|
|
- @click.self="toEdit(item)"
|
|
|
- v-for="item in tableData"
|
|
|
- :key="item.id"
|
|
|
- class="o-plr-20 o-pt-24 o-pb-12 l-flex-between kBordBott content"
|
|
|
- >
|
|
|
- <div>
|
|
|
- <div class="l-flex-RC">
|
|
|
- <span class="c-color c-text-12"
|
|
|
- >{{ $t("apkManage.version") }}:</span
|
|
|
- >
|
|
|
- <span class="c-text-color c-text-12">{{ item.version }}</span>
|
|
|
+ <div class="card-content">
|
|
|
+ <div class="apk-info">
|
|
|
+ <div class="info-row">
|
|
|
+ <van-icon name="info" class="info-icon" />
|
|
|
+ <span class="info-label">{{ $t("apkManage.version") }}:</span>
|
|
|
+ <span class="info-value">{{ item.version }}</span>
|
|
|
</div>
|
|
|
- <div class="l-flex-RC">
|
|
|
- <span class="c-color c-text-12"
|
|
|
+
|
|
|
+ <div class="info-row">
|
|
|
+ <van-icon name="info" class="info-icon" />
|
|
|
+ <span class="info-label"
|
|
|
>{{ $t("apkManage.versionInfo") }}:</span
|
|
|
>
|
|
|
- <span class="c-text-color c-text-12">{{
|
|
|
- item.versionName
|
|
|
- }}</span>
|
|
|
+ <span class="info-value">{{ item.versionName }}</span>
|
|
|
</div>
|
|
|
- <div class="l-flex-RC">
|
|
|
- <span class="c-color c-text-12"
|
|
|
- >{{ $t("apkManage.model") }}:</span
|
|
|
- >
|
|
|
- <span class="c-text-color c-text-12">{{ item.model }}</span>
|
|
|
+
|
|
|
+ <div class="info-row">
|
|
|
+ <van-icon name="phone" class="info-icon" />
|
|
|
+ <span class="info-label">{{ $t("apkManage.model") }}:</span>
|
|
|
+ <span class="info-value">{{ item.model }}</span>
|
|
|
</div>
|
|
|
- <div class="l-flex-RC">
|
|
|
- <span class="c-color c-text-12"
|
|
|
+
|
|
|
+ <div class="info-row">
|
|
|
+ <van-icon name="clock" class="info-icon" />
|
|
|
+ <span class="info-label"
|
|
|
>{{ $t("advertManage.advertRule.createTime") }}:</span
|
|
|
>
|
|
|
- <span class="c-text-color c-text-12">{{
|
|
|
- Format_time(item.createDate)
|
|
|
+ <span class="info-value">{{
|
|
|
+ Format_time(item.modifyDate)
|
|
|
}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="rightCon">
|
|
|
+
|
|
|
+ <div class="card-actions" v-if="user.type === 0">
|
|
|
<template v-if="isDelete">
|
|
|
- <van-checkbox v-model="item.checked">{{ " " }}</van-checkbox>
|
|
|
+ <van-checkbox v-model="item.checked" shape="square" />
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- <div @click="toEdit(item)" class="editBtn c-text-14">
|
|
|
+ <van-button
|
|
|
+ round
|
|
|
+ size="small"
|
|
|
+ class="edit-btn"
|
|
|
+ @click="toEdit(item)"
|
|
|
+ >
|
|
|
+ <van-icon name="edit" size="14" />
|
|
|
{{ $t("advertManage.advertRule.edit") }}
|
|
|
- </div>
|
|
|
+ </van-button>
|
|
|
</template>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="card-actions">
|
|
|
+ <van-button
|
|
|
+ round
|
|
|
+ size="small"
|
|
|
+ class="down-btn"
|
|
|
+ @click="copyApkLink(item)"
|
|
|
+ >
|
|
|
+ <van-icon name="down" size="14" />
|
|
|
+ 复制apk链接
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </van-list>
|
|
|
- </van-pull-refresh>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 删除确认弹窗 -->
|
|
|
<kDialog
|
|
|
:dialogTitle="$t('advertManage.delPopTitle')"
|
|
@@ -131,8 +177,7 @@
|
|
|
ref="kDialogRef"
|
|
|
:dialogContent="$t('advertManage.delPopContent')"
|
|
|
@confirmclk="confirmClk"
|
|
|
- >
|
|
|
- </kDialog>
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -146,11 +191,12 @@ import sHeader from "@/components/SimpleHeader";
|
|
|
import { useRouter } from "vue-router";
|
|
|
import { showToast } from "vant";
|
|
|
import { useI18n } from "vue-i18n";
|
|
|
-import { styleUrl } from "../../common/js/utils";
|
|
|
+import { getLoginUser, styleUrl } from "../../common/js/utils";
|
|
|
export default {
|
|
|
components: { sHeader, kDialog },
|
|
|
setup() {
|
|
|
const { t } = useI18n();
|
|
|
+ const user = getLoginUser();
|
|
|
// 点击标签
|
|
|
const active = ref("");
|
|
|
// 机型列表
|
|
@@ -195,10 +241,6 @@ export default {
|
|
|
name: "EF210",
|
|
|
id: "EF210",
|
|
|
},
|
|
|
- {
|
|
|
- name: "lua",
|
|
|
- id: "lua",
|
|
|
- },
|
|
|
]);
|
|
|
// 删除确认弹窗
|
|
|
const kDialogRef = ref(null);
|
|
@@ -300,10 +342,6 @@ export default {
|
|
|
model: "",
|
|
|
});
|
|
|
const getList = () => {
|
|
|
- // let param = {
|
|
|
- // current: pageNo.value,
|
|
|
- // size: pageSize.value,
|
|
|
- // };
|
|
|
param.value.current = pageNo.value;
|
|
|
param.value.size = pageSize.value;
|
|
|
Api_getPageApkInfo(param.value).then((res) => {
|
|
@@ -343,6 +381,11 @@ export default {
|
|
|
router.push(`/apkManageAdd?row=${JSON.stringify(row)}`);
|
|
|
}
|
|
|
};
|
|
|
+ // 点击复制链接
|
|
|
+ const copyApkLink = (row) => {
|
|
|
+ navigator.clipboard.writeText(row.downloadUrl);
|
|
|
+ showToast("复制成功");
|
|
|
+ };
|
|
|
// 点击标签
|
|
|
const clickModel = (item) => {
|
|
|
console.log(item);
|
|
@@ -374,9 +417,272 @@ export default {
|
|
|
modelList,
|
|
|
active,
|
|
|
clickModel,
|
|
|
+ user,
|
|
|
+ copyApkLink,
|
|
|
};
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped></style>
|
|
|
+<style lang="less" scoped>
|
|
|
+@primary-color: #4d6add;
|
|
|
+@danger-color: #df5e4c;
|
|
|
+@success-color: #07c160;
|
|
|
+@card-bg: #ffffff;
|
|
|
+@text-dark: #333;
|
|
|
+@text-light: #666;
|
|
|
+@border-color: #e4e7ec;
|
|
|
+@shadow-color: rgba(77, 106, 221, 0.1);
|
|
|
+
|
|
|
+.apk-management-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #f5f8ff;
|
|
|
+ padding-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.management-header {
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.action-bar {
|
|
|
+ background-color: @card-bg;
|
|
|
+ padding: 16px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+
|
|
|
+.delete-mode-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 5px;
|
|
|
+
|
|
|
+ .selected-count {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-self: center;
|
|
|
+ font-size: 18px;
|
|
|
+ color: @text-dark;
|
|
|
+
|
|
|
+ .van-icon {
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .count-highlight {
|
|
|
+ color: @danger-color;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ margin: 0 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+
|
|
|
+ .cancel-btn {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ color: @text-dark;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .delete-btn {
|
|
|
+ min-width: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.normal-mode-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 5px;
|
|
|
+
|
|
|
+ .total-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-self: center;
|
|
|
+ font-size: 18px;
|
|
|
+ color: @text-dark;
|
|
|
+
|
|
|
+ .van-icon {
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-text {
|
|
|
+ margin: 0 4px;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-count {
|
|
|
+ color: @danger-color;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-icons {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+
|
|
|
+ .action-item {
|
|
|
+ display: flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .action-label {
|
|
|
+ font-size: 15px;
|
|
|
+ color: @text-light;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.model-tabs {
|
|
|
+ background-color: @card-bg;
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 10;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
|
+
|
|
|
+ :deep(.van-tabs__wrap) {
|
|
|
+ padding: 0 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-tab) {
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 0 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-tab--active) {
|
|
|
+ color: @primary-color;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.content-container {
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-state {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 40px 0;
|
|
|
+ color: @text-light;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.apk-card {
|
|
|
+ background-color: @card-bg;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ box-shadow: 0 4px 12px @shadow-color;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 6px 16px rgba(77, 106, 221, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.card-selected {
|
|
|
+ border-left: 4px solid @danger-color;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.card-content {
|
|
|
+ display: flex;
|
|
|
+ padding: 16px;
|
|
|
+ // cursor: pointer;
|
|
|
+
|
|
|
+ .apk-info {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-actions {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 12px;
|
|
|
+
|
|
|
+ .edit-btn {
|
|
|
+ background: linear-gradient(to right, #4d6add, #6a89ff);
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ padding: 0 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .down-btn {
|
|
|
+ margin-left: 10px;
|
|
|
+ background: linear-gradient(to right, #4d6add, #6a89ff);
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ // padding: 0 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.info-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-icon {
|
|
|
+ color: @primary-color;
|
|
|
+ margin-right: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-label {
|
|
|
+ color: @text-light;
|
|
|
+ min-width: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-value {
|
|
|
+ color: @text-dark;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.card-footer {
|
|
|
+ padding: 10px 16px;
|
|
|
+ background-color: #f9fafc;
|
|
|
+ border-top: 1px solid @border-color;
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 480px) {
|
|
|
+ .action-bar {
|
|
|
+ padding: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .delete-mode-bar {
|
|
|
+ gap: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .normal-mode-bar {
|
|
|
+ gap: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-content {
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .card-actions {
|
|
|
+ padding-left: 0;
|
|
|
+ padding-top: 12px;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|