|
|
@@ -1,73 +1,88 @@
|
|
|
<template>
|
|
|
- <div class="app-content">
|
|
|
- <app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" itemWidth="50%" />
|
|
|
- <div class="list-wrap">
|
|
|
- <block v-if="!$util.isEmpty(list.data)">
|
|
|
- <div class="list" v-for="(item, index) in list.data" :key="index">
|
|
|
- <div class="list-img">
|
|
|
- <app-img height="100%" mode :src="item.adImgUrl | default_img" alt="广告图片" />
|
|
|
- </div>
|
|
|
- <div class="list-right">
|
|
|
- <div class="app-size-28 app-color-0">{{ item.adName }}</div>
|
|
|
- <div v-if="item.endTime == '4102416000'">永久有效</div>
|
|
|
- <div v-else>{{ item.endTime | formatTime }} 到期</div>
|
|
|
- <div class="list-option">
|
|
|
- <div>
|
|
|
- <div>
|
|
|
- <span>状态:</span>
|
|
|
- <span
|
|
|
- :style="{color: item.status == 1 ? '#09BB07' : '#FF0000'}"
|
|
|
- >{{ item.status == 1 ? '启用' : '禁用'}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="operate-icon-wrap">
|
|
|
- <div class="operate-icon" @click="operateFn(item, index)">
|
|
|
- <i
|
|
|
- class="iconfont"
|
|
|
- :class="[ operateIndex == index ? 'iconcaozuojihuo' : 'iconcaozuo']"
|
|
|
- style="font-size:48rpx;"
|
|
|
- ></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 操作 -->
|
|
|
- <operate-module
|
|
|
- @clickFn="operateList"
|
|
|
- v-if="operateShow"
|
|
|
- :top="operateTop"
|
|
|
- :right="30"
|
|
|
- :btnData="btnData"
|
|
|
- />
|
|
|
- </block>
|
|
|
- <block v-else>
|
|
|
- <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
|
|
|
- </block>
|
|
|
- </div>
|
|
|
- <!-- 按钮 -->
|
|
|
- <div class="app-footer">
|
|
|
- <div
|
|
|
- class="admin-button-com middle blue"
|
|
|
- @click="pageTo({
|
|
|
- url: '/admin/ad/add',
|
|
|
- query: {
|
|
|
- type: tabIndex
|
|
|
- }
|
|
|
- })"
|
|
|
- >添加</div>
|
|
|
- </div>
|
|
|
- <!-- 删除提示 -->
|
|
|
- <modal-module
|
|
|
- :show="delModal"
|
|
|
- @cancel="modalCancel"
|
|
|
- @click="delModalClick"
|
|
|
- content="确定删除该广告吗?"
|
|
|
- color="#333"
|
|
|
- :size="32"
|
|
|
- padding="30rpx 30rpx"
|
|
|
- ></modal-module>
|
|
|
- </div>
|
|
|
+ <div class="app-content">
|
|
|
+ <app-tabs
|
|
|
+ :tabs="tabs"
|
|
|
+ :isFixed="true"
|
|
|
+ :currentTab="tabIndex"
|
|
|
+ @change="change"
|
|
|
+ itemWidth="50%"
|
|
|
+ />
|
|
|
+ <div class="list-wrap">
|
|
|
+ <block v-if="!$util.isEmpty(list.data)">
|
|
|
+ <div class="list" v-for="(item, index) in list.data" :key="index">
|
|
|
+ <div class="list-img">
|
|
|
+ <app-img
|
|
|
+ height="100%"
|
|
|
+ mode
|
|
|
+ :src="item.adImgUrl | default_img"
|
|
|
+ alt="广告图片"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="list-right">
|
|
|
+ <div class="app-size-28 app-color-0">{{ item.adName }}</div>
|
|
|
+ <div v-if="item.endTime == '4102416000'">永久有效</div>
|
|
|
+ <div v-else>{{ item.endTime | formatTime }} 到期</div>
|
|
|
+ <div class="list-option">
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <span>状态:</span>
|
|
|
+ <span :style="{ color: item.status == 1 ? '#09BB07' : '#FF0000' }">{{
|
|
|
+ item.status == 1 ? "启用" : "禁用"
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="operate-icon-wrap">
|
|
|
+ <div class="operate-icon" @click="operateFn(item, index)">
|
|
|
+ <i
|
|
|
+ class="iconfont"
|
|
|
+ :class="[operateIndex == index ? 'iconcaozuojihuo' : 'iconcaozuo']"
|
|
|
+ style="font-size:48rpx;"
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 操作 -->
|
|
|
+ <operate-module
|
|
|
+ @clickFn="operateList"
|
|
|
+ v-if="operateShow"
|
|
|
+ :top="operateTop"
|
|
|
+ :right="30"
|
|
|
+ :btnData="btnData"
|
|
|
+ />
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
|
|
|
+ </block>
|
|
|
+ </div>
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <div class="app-footer">
|
|
|
+ <div
|
|
|
+ class="admin-button-com middle blue"
|
|
|
+ @click="
|
|
|
+ pageTo({
|
|
|
+ url: '/admin/ad/add',
|
|
|
+ query: {
|
|
|
+ type: tabIndex
|
|
|
+ }
|
|
|
+ })
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 添加
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 删除提示 -->
|
|
|
+ <modal-module
|
|
|
+ :show="delModal"
|
|
|
+ @cancel="modalCancel"
|
|
|
+ @click="delModalClick"
|
|
|
+ content="确定删除该广告吗?"
|
|
|
+ color="#333"
|
|
|
+ :size="32"
|
|
|
+ padding="30rpx 30rpx"
|
|
|
+ ></modal-module>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -80,211 +95,211 @@ import { list } from "@/mixins";
|
|
|
// api
|
|
|
import { getList, del, updateStatus } from "@/api/ad";
|
|
|
export default {
|
|
|
- name: "ad-list",
|
|
|
- components: {
|
|
|
- AppTabs,
|
|
|
- OperateModule,
|
|
|
- AppWrapperEmpty,
|
|
|
- ModalModule,
|
|
|
- AppImg
|
|
|
- },
|
|
|
- mixins: [list],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tabIndex: 0,
|
|
|
- tabs: [
|
|
|
- {
|
|
|
- name: "门店轮播图"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "商城首页轮播图"
|
|
|
- }
|
|
|
- ],
|
|
|
- // 操作菜单
|
|
|
- operateData: {},
|
|
|
- operateShow: false,
|
|
|
- operateIndex: null,
|
|
|
- operateTop: 0,
|
|
|
- // 删除弹窗
|
|
|
- delModal: false
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- btnData() {
|
|
|
- return [
|
|
|
- {
|
|
|
- text: "编辑",
|
|
|
- icon: "iconbianji",
|
|
|
- click: () => {
|
|
|
- this.$util.pageTo({
|
|
|
- url: "/admin/ad/add",
|
|
|
- query: {
|
|
|
- type: this.tabIndex,
|
|
|
- id: this.operateData.id
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- text: this.operateData.status == 1 ? "下架" : "启用",
|
|
|
- icon: this.operateData.status == 1 ? "iconxiajia" : "iconqiyong",
|
|
|
- click: () => {
|
|
|
- this.changeStatusFn();
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- text: "删除",
|
|
|
- icon: "iconshanchu1",
|
|
|
- click: () => {
|
|
|
- this.delModal = true;
|
|
|
- }
|
|
|
- }
|
|
|
- ];
|
|
|
- }
|
|
|
- },
|
|
|
- onPullDownRefresh() {
|
|
|
- this.resetList();
|
|
|
- this._list().then(res => {
|
|
|
- uni.stopPullDownRefresh();
|
|
|
- });
|
|
|
- },
|
|
|
- onReachBottom() {
|
|
|
- if (!this.list.finished) {
|
|
|
- this._list().then(res => {
|
|
|
- uni.stopPullDownRefresh();
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.stopPullDownRefresh();
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- // this.init()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- operateList(index) {
|
|
|
- if (index === 0) {
|
|
|
- this.$util.pageTo({
|
|
|
- url: "/admin/ad/add",
|
|
|
- query: {
|
|
|
- type: this.tabIndex,
|
|
|
- id: this.operateData.id
|
|
|
- }
|
|
|
- });
|
|
|
- this.operateCloseFn();
|
|
|
- } else if (index === 1) {
|
|
|
- this.changeStatusFn();
|
|
|
- } else if (index === 2) {
|
|
|
- this.delModal = true;
|
|
|
- }
|
|
|
- },
|
|
|
- async init() {
|
|
|
- this._list();
|
|
|
- },
|
|
|
- _list() {
|
|
|
- return getList({ type: this.tabIndex }).then(res => {
|
|
|
- this.completes(res);
|
|
|
- });
|
|
|
- },
|
|
|
- change(e) {
|
|
|
- if (this.tabIndex == e.index) {
|
|
|
- return false;
|
|
|
- } else {
|
|
|
- this.tabIndex = e.index;
|
|
|
- this.operateCloseFn();
|
|
|
- this.resetList();
|
|
|
- this._list();
|
|
|
- }
|
|
|
- },
|
|
|
- // 操作按钮
|
|
|
- operateFn(item, index) {
|
|
|
- if (this.operateIndex == index) {
|
|
|
- this.operateCloseFn();
|
|
|
- } else {
|
|
|
- this.operateData = item;
|
|
|
- this.operateData.index = index;
|
|
|
- this.operateIndex = index;
|
|
|
- this.operateTop = (index + 1) * 214;
|
|
|
- this.operateShow = true;
|
|
|
- }
|
|
|
- },
|
|
|
- // 关闭操作按钮
|
|
|
- operateCloseFn() {
|
|
|
- this.operateData = {};
|
|
|
- this.operateIndex = null;
|
|
|
- this.operateShow = false;
|
|
|
- },
|
|
|
- // 删除弹窗
|
|
|
- modalCancel() {
|
|
|
- this.delModal = false;
|
|
|
- },
|
|
|
- delModalClick(e) {
|
|
|
- let index = e.index;
|
|
|
- if (index === 0) {
|
|
|
- this.modalCancel();
|
|
|
- } else {
|
|
|
- del({ id: this.operateData.id }).then(res => {
|
|
|
- this.modalCancel();
|
|
|
- this.operateCloseFn();
|
|
|
- this.$msg("删除成功!");
|
|
|
- this.resetList();
|
|
|
- this._list();
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- changeStatusFn() {
|
|
|
- let status = this.operateData.status == 1 ? 0 : 1;
|
|
|
- updateStatus({ id: this.operateData.id, status: status }).then(res => {
|
|
|
- this.list.data[this.operateData.index].status = status;
|
|
|
- this.operateCloseFn();
|
|
|
- this.$msg("操作成功!");
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
+ name: "ad-list",
|
|
|
+ components: {
|
|
|
+ AppTabs,
|
|
|
+ OperateModule,
|
|
|
+ AppWrapperEmpty,
|
|
|
+ ModalModule,
|
|
|
+ AppImg
|
|
|
+ },
|
|
|
+ mixins: [list],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabIndex: 0,
|
|
|
+ tabs: [
|
|
|
+ {
|
|
|
+ name: "门店轮播图"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "商城首页轮播图"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 操作菜单
|
|
|
+ operateData: {},
|
|
|
+ operateShow: false,
|
|
|
+ operateIndex: null,
|
|
|
+ operateTop: 0,
|
|
|
+ // 删除弹窗
|
|
|
+ delModal: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ btnData() {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ text: "编辑",
|
|
|
+ icon: "iconbianji",
|
|
|
+ click: () => {
|
|
|
+ this.$util.pageTo({
|
|
|
+ url: "/admin/ad/add",
|
|
|
+ query: {
|
|
|
+ type: this.tabIndex,
|
|
|
+ id: this.operateData.id
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: this.operateData.status == 1 ? "下架" : "启用",
|
|
|
+ icon: this.operateData.status == 1 ? "iconxiajia" : "iconqiyong",
|
|
|
+ click: () => {
|
|
|
+ this.changeStatusFn();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "删除",
|
|
|
+ icon: "iconshanchu1",
|
|
|
+ click: () => {
|
|
|
+ this.delModal = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {
|
|
|
+ this.resetList();
|
|
|
+ this._list().then(res => {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if (!this.list.finished) {
|
|
|
+ this._list().then(res => {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ // this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ operateList(index) {
|
|
|
+ if (index === 0) {
|
|
|
+ this.$util.pageTo({
|
|
|
+ url: "/admin/ad/add",
|
|
|
+ query: {
|
|
|
+ type: this.tabIndex,
|
|
|
+ id: this.operateData.id
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.operateCloseFn();
|
|
|
+ } else if (index === 1) {
|
|
|
+ this.changeStatusFn();
|
|
|
+ } else if (index === 2) {
|
|
|
+ this.delModal = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async init() {
|
|
|
+ this._list();
|
|
|
+ },
|
|
|
+ _list() {
|
|
|
+ return getList({ type: this.tabIndex }).then(res => {
|
|
|
+ this.completes(res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ change(e) {
|
|
|
+ if (this.tabIndex == e.index) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ this.tabIndex = e.index;
|
|
|
+ this.operateCloseFn();
|
|
|
+ this.resetList();
|
|
|
+ this._list();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 操作按钮
|
|
|
+ operateFn(item, index) {
|
|
|
+ if (this.operateIndex == index) {
|
|
|
+ this.operateCloseFn();
|
|
|
+ } else {
|
|
|
+ this.operateData = item;
|
|
|
+ this.operateData.index = index;
|
|
|
+ this.operateIndex = index;
|
|
|
+ this.operateTop = (index + 1) * 214;
|
|
|
+ this.operateShow = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 关闭操作按钮
|
|
|
+ operateCloseFn() {
|
|
|
+ this.operateData = {};
|
|
|
+ this.operateIndex = null;
|
|
|
+ this.operateShow = false;
|
|
|
+ },
|
|
|
+ // 删除弹窗
|
|
|
+ modalCancel() {
|
|
|
+ this.delModal = false;
|
|
|
+ },
|
|
|
+ delModalClick(e) {
|
|
|
+ let index = e.index;
|
|
|
+ if (index === 0) {
|
|
|
+ this.modalCancel();
|
|
|
+ } else {
|
|
|
+ del({ id: this.operateData.id }).then(res => {
|
|
|
+ this.modalCancel();
|
|
|
+ this.operateCloseFn();
|
|
|
+ this.$msg("删除成功!");
|
|
|
+ this.resetList();
|
|
|
+ this._list();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeStatusFn() {
|
|
|
+ let status = this.operateData.status == 1 ? 0 : 1;
|
|
|
+ updateStatus({ id: this.operateData.id, status: status }).then(res => {
|
|
|
+ this.list.data[this.operateData.index].status = status;
|
|
|
+ this.operateCloseFn();
|
|
|
+ this.$msg("操作成功!");
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.app-content {
|
|
|
- min-height: calc(100vh - 200px);
|
|
|
- padding-top: 100px;
|
|
|
- padding-bottom: 100px;
|
|
|
+ min-height: calc(100vh - 200px);
|
|
|
+ padding-top: 100px;
|
|
|
+ padding-bottom: 100px;
|
|
|
}
|
|
|
.list-wrap {
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
- background-color: #fff;
|
|
|
- .list {
|
|
|
- @include disFlex(center, flex-start);
|
|
|
- padding: 20px 30px;
|
|
|
- .list-img {
|
|
|
- width: 300px;
|
|
|
- height: 168px;
|
|
|
- & img {
|
|
|
- height: 100% !important;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-right {
|
|
|
- width: calc(100% - 320px);
|
|
|
- color: $fontColor3;
|
|
|
- margin-left: 20px;
|
|
|
- & > div {
|
|
|
- margin-top: 20px;
|
|
|
- &:first-child {
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-option {
|
|
|
- @include disFlex(flex-end, space-between);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ background-color: #fff;
|
|
|
+ .list {
|
|
|
+ @include disFlex(center, flex-start);
|
|
|
+ padding: 20px 30px;
|
|
|
+ .list-img {
|
|
|
+ width: 300px;
|
|
|
+ height: 168px;
|
|
|
+ & img {
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-right {
|
|
|
+ width: calc(100% - 320px);
|
|
|
+ color: $fontColor3;
|
|
|
+ margin-left: 20px;
|
|
|
+ & > div {
|
|
|
+ margin-top: 20px;
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-option {
|
|
|
+ @include disFlex(flex-end, space-between);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
// 按钮
|
|
|
.app-footer {
|
|
|
- justify-content: flex-end;
|
|
|
- .admin-button-com {
|
|
|
- width: 160px;
|
|
|
- margin-right: 30px;
|
|
|
- }
|
|
|
+ justify-content: flex-end;
|
|
|
+ .admin-button-com {
|
|
|
+ width: 160px;
|
|
|
+ margin-right: 30px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|