123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286 |
- <template>
- <div class="advertRuleIdx">
- <s-header :name="$t('advertManage.advertRule.sysTitle')" :noback="false"></s-header>
- <div v-if="isDelete" class="headCon l-flex-between o-plr-20 o-pt-15 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>
- </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">
- <img class="ruleIcon o-mr-10" src="../../../assets/advertManage/ruleIcon.png" alt="" />
- <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("advertManage.advertRule.rules") }}
- </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>
- <div @click="isDelete = true" class="c-text-c o-ml-24">
- <div>
- <van-icon size="18" name="close" />
- </div>
- <div class="c-text-color c-text-12">
- {{ $t("advertManage.advertRule.delete") }}
- </div>
- </div>
- </div>
- </div>
- <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 @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="c-text-b c-text-color c-text-15">{{ item.name }}</div>
- <div class="l-flex-RC o-mt-14">
- <span class="c-color c-text-12">{{ $t("advertManage.advertRule.createTime") }}:</span>
- <span class="c-text-color c-text-12">{{
- Format_time(item.createDate)
- }}</span>
- </div>
- </div>
- <div class="rightCon">
- <template v-if="isDelete">
- <van-checkbox v-model="item.checked">{{ " " }}</van-checkbox>
- </template>
- <template v-else>
- <div @click="pushRuleClk(item.id)" class="pushBtn o-mb-10 c-text-14">
- {{ $t("advertManage.advertRule.push") }}
- </div>
- <div @click="toEdit(item)" class="editBtn c-text-14">
- {{ $t("advertManage.advertRule.edit") }}
- </div>
- </template>
- </div>
- </div>
- </van-list>
- </van-pull-refresh>
- </div>
- <!-- 删除确认弹窗 -->
- <kDialog :dialogTitle="$t('advertManage.delPopTitle')" :cancelBtnTxt="$t('advertManage.cancelTxt')"
- :confirmBtnTxt="$t('advertManage.confirmDel')" ref="kDialogRef" :dialogContent="$t('advertManage.delPopContent')"
- @confirmclk="confirmClk">
- </kDialog>
- </div>
- </template>
- <script>
- import { useStore } from "vuex";
- import { Format_time, styleUrl } from "../../../common/js/utils";
- import kDialog from "../../../components/commom/kDialog/index.vue";
- // 导入接口
- import {
- Api_postPageTimeRule,
- Api_getPushAdRule,
- Api_getDelAdRule,
- } from "../../../service/advertManage";
- import { computed, onMounted, reactive, ref, toRefs } from "vue";
- import sHeader from "../../../components/SimpleHeader";
- import { useRouter } from "vue-router";
- import { Toast } from "vant";
- import { useI18n } from "vue-i18n";
- export default {
- components: { sHeader, kDialog },
- setup() {
- const { t } = useI18n();
- // 删除确认弹窗
- const kDialogRef = ref(null);
- // 点击确认删除
- const noticeClk = () => {
- if (selectTotals.value < 1) {
- Toast(t("advertManage.delTips"));
- return;
- }
- kDialogRef.value.openDialog();
- };
- // 点击右侧按钮
- const confirmClk = () => {
- const ids = [];
- ruleData.tableData.forEach((item) => {
- if (item.checked) {
- ids.push(item.id);
- }
- });
- let param = {
- ids,
- };
- Api_getDelAdRule(param).then((res) => {
- console.log(res);
- if (res.data.code === '00000') {
- isDelete.value = false;
- Toast(res.data.message);
- setTimeout(() => {
- onRefresh();
- }, 500);
- }
- });
- };
- // 是否删除状态
- const isDelete = ref(false);
- // 选中
- const selectTotals = computed(() => {
- let nums = 0;
- if (ruleData.tableData.length > 0) {
- ruleData.tableData.forEach((item) => {
- if (item.checked) {
- nums++;
- }
- });
- }
- return nums;
- });
- // 点击取消删除
- const cancelClk = () => {
- // 把选中状态去掉
- if (ruleData.tableData.length > 0) {
- ruleData.tableData.forEach((item) => {
- if (item.checked) {
- item.checked = false;
- }
- });
- }
- isDelete.value = false;
- };
- // 多少条规则
- const ruleTotal = ref(0);
- // 分页
- const pageNo = ref(1);
- const pageSize = ref(20);
- let ruleData = reactive({
- tableData: [],
- });
- // 上拉刷新
- const loading = ref(true);
- const finished = ref(false);
- // 下拉刷新
- const refreshing = ref(false);
- // 导入vuex
- const store = useStore();
- onMounted(() => {
- // 加载样式
- styleUrl('advertManage');
- onRefresh();
- // 初始化
- init();
- });
- const init = () => {
- // 储存数据到vuex
- store.commit("MUTA_A_ADVERTLIST", []);
- store.commit("MUTA_B_ADVERTLIST", []);
- localStorage.removeItem("advertManage-A-advertList");
- localStorage.removeItem("advertManage-B-advertList");
- };
- // 下拉刷新
- const onRefresh = () => {
- ruleData.tableData = [];
- finished.value = false;
- loading.value = true;
- // 初始化分页
- pageNo.value = 1;
- pageSize.value = 20;
- getList();
- };
- // 上拉加载
- const onLoad = () => {
- pageNo.value++;
- getList();
- };
- const getList = () => {
- let param = {
- current: pageNo.value,
- size: pageSize.value,
- };
- Api_postPageTimeRule(param).then((res) => {
- const { data } = res.data;
- refreshing.value = false;
- // 加入删除选中状态
- if (data.records.length > 0) {
- data.records.forEach((item) => {
- item.checked = false;
- });
- }
- ruleData.tableData.push(...data.records);
- // 加载状态结束
- loading.value = false;
- // 总共
- ruleTotal.value = data.total;
- if (ruleData.tableData.length >= data.total) {
- finished.value = true;
- }
- });
- };
- const router = useRouter();
- // 点击添加按钮
- const toAdd = () => {
- router.push("/advertRuleAdd");
- };
- // 点击推送按钮
- const pushRuleClk = (id) => {
- Api_getPushAdRule({ id }).then((res) => {
- if (res.data.code === "00000") {
- Toast("推送成功");
- }
- });
- };
- // 点击编辑
- const toEdit = (row) => {
- // 如果是删除模式,则是选中和取消状态
- if (isDelete.value) {
- ruleData.tableData.forEach((item) => {
- if (item.id === row.id) {
- item.checked = !item.checked;
- }
- });
- } else {
- router.push(`/advertRuleAdd?id=${row.id}`);
- }
- };
- return {
- pageNo,
- pageSize,
- loading,
- finished,
- refreshing,
- onRefresh,
- onLoad,
- getList,
- ...toRefs(ruleData),
- isDelete,
- selectTotals,
- cancelClk,
- ruleTotal,
- toAdd,
- pushRuleClk,
- confirmClk,
- kDialogRef,
- noticeClk,
- toEdit,
- Format_time,
- };
- },
- };
- </script>
- <style lang="less" scoped></style>
|