front-end/hdApp/src/admin/picText/picTextList.vue

<template>
  <view class="app-content">
    <view class="list-wrap">
      <block v-if="!$util.isEmpty(list.data)">
        <block v-for="(item, index) in list.data" :key="index">
          <view class="list">
            <view class="list-det" @click="edit(item.id)">
              <view class="app-size-26 app-color-0" style="margin-right: 32upx">{{ item.id }}</view>
            </view>
            <view class="list-det" @click="edit(item.id)">
              <view class="app-size-30 app-color-0" style="font-weight: bold; max-width: 420rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ item.title }}</view>
            </view>

            <view v-if="mode === 'selectPicText'">
              <view class="icon-wrapper select" v-if="selectedId == item.id">
                <zui-svg-icon icon="general-selected" :width="40" :height="40" />
              </view>
              <button style="position: absolute; top: 40upx; right: 40upx" class="admin-button-com middle" @click.stop="selectPicTextFn(item.id, cId)" v-else>
                选择
              </button>
            </view>
            <view v-else>
              <view class="icon-wrapper delete" @click.stop.prevent="delPicText(item.id)">
                <zui-svg-icon icon="general-delete" :width="28" :height="28" />
              </view>
              <view class="icon-wrapper edit" @click.stop="edit(item.id)">
                <zui-svg-icon icon="general-edit-pencil" :width="27" :height="27" />
              </view>
            </view>
          </view>
        </block>
      </block>
      <block v-else>
        <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
      </block>
    </view>

    <view class="app-footer">
      <!-- <button class="admin-button-com" @click="svgDemoFn">SVG示例</button>
      <button class="admin-button-com" @click="demoPicTextFn">图文示例</button> -->
      <button class="admin-button-com big blue" @click="addPicTextFn">新增图文</button>
    </view>
  </view>
</template>
<script>
import AppWrapperEmpty from '@/components/app-wrapper-empty';
import { list } from '@/mixins';
import { picTextDel, picTextList, UpdateCategoryId } from '@/api/pic-text';
export default {
  name: 'picTextList',
  components: {
    AppWrapperEmpty
  },
  mixins: [list],
  data() {
    return {
      cId: null, // 分类id, 用于识别是否选择图文模式
      mode: '',
      selectedId: 0
    };
  },
  onPullDownRefresh() {
    this.resetList();
    this._list().then((res) => {
      uni.stopPullDownRefresh();
    });
  },
  onReachBottom() {
    if (!this.list.finished) {
      this._list().then((res) => {
        uni.stopPullDownRefresh();
      });
    } else {
      uni.stopPullDownRefresh();
    }
  },
  onLoad(option) {
    console.log('option: ', option);
    if (option.cId) {
      this.cId = option.cId;
      this.selectedId = option.picTextId;
      this.mode = 'selectPicText';
      uni.setNavigationBarTitle({
        title: '选择图文'
      })
    }

    // 监听来自创建或编辑页面的刷新事件
    uni.$on('refreshListPage', this._list);
  },

  methods: {
    init() {
      this._list();
    },
    edit(id) {
      uni.navigateTo({
        url: `/admin/picText/picTextAdd?id=${id}`
      });
    },
    svgDemoFn() {
      uni.navigateTo({
        url: '/admin/picText/svg-demo'
      });
    },
    demoPicTextFn() {
      uni.navigateTo({
        url: '/admin/picText/viewerDemo'
      });
    },
    addPicTextFn() {
      uni.navigateTo({
        url: '/admin/picText/picTextAdd'
      });
    },
    _list() {
      return picTextList().then((res) => {
        let data = { code: res.code, msg: res.msg, data: { list: res.data.list } };
        this.completes(res);
      });
    },
    delPicText(id) {
      let that = this;
      uni.showModal({
        title: '提示',
        content: '确认删除？',
        success: function (res) {
          if (res.confirm) {
            picTextDel({ id: id }).then((res) => {
              if (res.code == 1) {
                that.resetList();
                that._list();
                that.$msg('已删除');
              }
            });
          }
        }
      });
    },
    selectPicTextFn(id, cId) {
      UpdateCategoryId({ id: id, categoryId: cId }).then((res) => {
        if (res.code == 1) {
          this.$msg('图文变更成功');
          this.selectedId = id;
          // 把变更的信息发给父页面
          uni.$emit('updateCategoryIdEvent', { picTextId: id, categoryId: cId });
          uni.navigateBack({ delta: 1 });
          this.$msg('选择成功');
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.app-content {
  min-height: calc(100vh - 100upx);
  padding-bottom: 100upx;
}
.list-wrap {
  position: relative;
  background-color: #fff;
  .list {
    height: 160upx;
    @include disFlex(center, flex-start);
    padding: 30upx 0;
    margin: 0 30upx;
    color: $fontColor3;
    border-bottom: 1px solid $borderColor;
    position: relative;
    .list-img {
      width: 130upx;
      height: 130upx;
      image {
        width: 130upx;
        height: 130upx;
        border-radius: 20upx;
      }
    }
    .list-det {
      margin-left: 20upx;
      & > div {
        margin-top: 14upx;
        &:first-child {
          margin-top: 0;
        }
      }
    }
    .icon-wrapper {
      position: absolute;
      top: 50upx;
      width: 60upx;
      height: 60upx;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
      &.delete {
        right: 155upx;
      }
      &.edit {
        right: 30upx;
      }
      &.select {
        right: 60upx;
      }
    }
  }
}
.app-footer {
  justify-content: flex-end;
  .admin-button-com {
    width: 200upx;
    margin-right: 30upx;
  }
}
</style>