product_wx/pages/subPackages/eventRelease/index.vue

<template>
  <div class="app-body-white">
    <div class="flex-between-center broadcast-head">
      <div class="flex-between-center head-search">
        <input
          @click="showResult = true"
          type="text"
          v-model="type"
          class="head-search-select"
          placeholder="请选择"
          readonly
        />
        <input
          v-model="search.activityName"
          placeholder="请输入关键词"
          type="text"
          class="head-search-keyword"
          @input="titleChange"
        />
      </div>
      <div class="broadcast-head-add">
        <van-button
          icon="plus"
          color="#3b7aff"
          size="small"
          @click="goNavigator()"
          >新增</van-button
        >
      </div>
    </div>
    <van-pull-refresh
      v-model="isDownLoading"
      @refresh="onDownRefresh"
      v-show="listData.length !== 0"
    >
      <van-list
        v-model="isUpLoading"
        :error.sync="error"
        :finished="upFinished"
        :immediate-check="false"
        :offset="10"
        finished-text="加载完成"
        @load="onLoadList"
      >
        <ul class="admin-exposure-list" v-if="listData.length > 0">
          <li class="box-shadow-gray" v-for="item in listData">
            <img
              :src="item.annexUrl"
              alt=""
              @click="goNavigator(item.id, 'view')"
            />
            <div class="exposure-main">
              <div class="exposure-name">{{ item.activityName }}</div>
              <div class="flex-between-center notice-edit-mesg">
                <div class="activities-text">
                  <span>{{ item.registrationNumbers }}人报名</span>
                  {{ item.signInNumber }}人签到
                </div>
                <div class="notice-edit-button" style="padding-top: 0">
                  <van-button
                    v-if="item.releaseStatus !== '1'"
                    color="#1989fa"
                    size="mini"
                    plain
                    round
                    @click.stop="goNavigator(item.id, '')"
                    >编辑</van-button
                  >
                  <van-button
                    v-if="item.releaseStatus !== '1'"
                    color="#1989fa"
                    size="mini"
                    round
                    @click.stop="handleRecruitment(item.id, '1')"
                    >上架</van-button
                  >
                  <van-button
                    v-if="item.releaseStatus === '1'"
                    color="#1989fa"
                    size="mini"
                    round
                    @click.stop="handleRecruitment(item.id, '2')"
                    >下架</van-button
                  >
                </div>
              </div>
            </div>
            <div class="notice-edit-label">
              <div v-if="item.releaseStatus === '1'" class="label-style">
                已发布
              </div>
              <div
                v-if="item.releaseStatus === '0'"
                class="label-style disable"
              >
                未发布
              </div>
              <div
                v-if="item.releaseStatus === '2'"
                class="label-style disable"
              >
                已下架
              </div>
            </div>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
    <van-popup :show="showResult" position="bottom" class="popup-box">
      <van-picker
        show-toolbar
        title="请选择"
        :columns="columns"
        value-key="label"
        @cancel="showResult = false"
        @confirm="onConfirm"
        @change="onChange"
      />
    </van-popup>
  </div>
</template>
<script>
import {
  editHomeCommunityActivity,
  listHomeCommunityActivity,
} from "@/js_sdk/api_community";
// import { Toast } from "vant";
import { getByCodes, getUserLocalStorageInfo } from "@/js_sdk/http";
import common from "../../utils/common.js";
// import auth from "@/service/auth";

export default {
  data() {
    return {
      dc_key: ["release_status", "activity_type"],
      registrantChange: "",
      listData: [],
      columns: [],
      type: "",
      showResult: false,
      search: {
        createdBy: getUserLocalStorageInfo().user.id,
        pageNum: 1,
        pageSize: 10,
      },
      dic_SelectList: {},
      // 上拉加载
      pageSize: 30,
      pageIndex: 1,
      isDownLoading: false,
      isUpLoading: false,
      upFinished: false,
      offset: 100,
    };
  },
  // mixins: [Base],
  onLoad() {
    this.getDictData(this.dc_key);
  },
  methods: {
    goNavigator(id = "", type = "") {
      uni.navigateTo({
        url: "/pages/subPackages/eventRelease/add?id=" + id + "&type=" + type,
      });
    },
    getData() {
      try {
        const _this = this;
        _this.search.pageNum = _this.pageIndex;
        _this.search.pageSize = _this.pageSize;
        listHomeCommunityActivity(_this.search)
          .then((res) => {
            const partList = res.data.rows || [];

            partList.forEach((item) => {
              console.log("aaaaaaaaa", item);
              console.log("JSON.parse(annex)", JSON.parse(item.annex)[0]);
              // const annex = JSON.parse(item.annex);
              if (item.annex && item.annex.length != 0) {
                // const annex = _this.$common.castEval(item.annex);

                item.annexUrl = JSON.parse(item.annex)[0].url;
              }
              item.releaseTimeStr = common.transServDate(item.releaseTime);
            });
            console.log("partList == null", partList);
            if (partList == null || partList.length == 0) {
              _this.upFinished = true;
              return;
            }
            console.log("_this.pageIndex", _this.pageIndex);
            if (partList.length < _this.pageSize) {
              _this.upFinished = true;
            }
            if (partList.length == res.data.total) {
              _this.upFinished = true;
            }

            if (_this.pageIndex == 1) {
              _this.listData = partList;
            } else {
              _this.listData = [..._this.listData, ...partList];
            }
          })
          .catch((error) => {})
          .finally(() => {
            _this.isDownLoading = false;
            _this.isUpLoading = false;
          });
      } catch (error) {
        console.log(error);
      }
    },
    titleChange() {
      const _this = this;
      _this.listData = [];
      _this.pageIndex = 1;
      _this.isDownLoading = false;
      _this.isUpLoading = false;
      _this.upFinished = false;
      this.getData();
    },
    videoDetails(val, edit) {
      this.$router.push({
        path: "/admin/activities/add",
        query: {
          id: val.id,
        },
      });
    },
    handleRecruitment(id, status) {
      const pos = {
        id: id,
        releaseStatus: status,
      };
      editHomeCommunityActivity(pos)
        .then((res) => {
          this.listData = [];
          this.getData();
          if (status == "1") {
            this.$showToast("发布成功");
          } else {
            this.$showToast("下架成功");
          }
        })
        .catch(() => {
          if (status == "1") {
            this.$showToast("发布失败");
          } else {
            this.$showToast("下架失败");
          }
        });
    },
    // 上拉加载
    onDownRefresh() {
      const _this = this;
      _this.pageIndex = 1;
      _this.listData = [];
      _this.upFinished = false;
      _this.getData();
    },
    onLoadList() {
      const _this = this;
      _this.pageIndex++;
      _this.isUpLoading = true;
      _this.getData();
    },
    getDictData(codes) {
      const _this = this;

      getByCodes(JSON.stringify(this.dc_key)).then((data) => {
        if (data) {
          this.dic_SelectList = common.handleDicList(data);
          const dat = [
            {
              values: [
                {
                  id: 1,
                  label: "发布状态",
                  className: "column2",
                  // children: _this.dic_SelectList.release_status,
                },
                {
                  id: 2,
                  label: "活动类型",
                  className: "column2",
                  // children: _this.dic_SelectList.release_status,
                },
              ],
              className: "column1",
              // children: _this.dic_SelectList.release_status,
            },
            {
              values: _this.dic_SelectList.release_status,
              className: "column2",
              // children: _this.dic_SelectList.release_status,
            },
          ];

          _this.columns = dat;

          _this.getData();
        }
      });
    },
    onChange(event) {
      let _this = this;
      console.log(event);
      const { picker, value, index } = event.detail;
      console.log("value", value);
      if (value[0].label == "发布状态") {
        picker.setColumnValues(1, _this.dic_SelectList.release_status);
      } else {
        picker.setColumnValues(1, _this.dic_SelectList.activity_type);
      }

      // picker.setColumnValues(1, citys[value[0]]);
    },
    // onConfirm: function(val) {
    //     this.type = val.text
    //     if (val.text == '待核实') {
    //         this.seachFrom.status = 1
    //     } else {
    //         this.seachFrom.status = 0
    //     }
    //     this.onDownRefresh()
    //     this.showResult = false
    // },
    onConfirm: function (event) {
      console.log(event);
      const { picker, value, index } = event.detail;
      this.listData = [];
      console.log(value);

      if (value[0].label == "发布状态") {
        this.search.releaseStatus = value[1].value;
        this.search.activityType = "";
      } else if (value[0].label == "活动类型") {
        this.search.activityType = value[1].value;
        this.search.releaseStatus = "";
      }
      this.type = value[1].label;
      this.showResult = false;
      this.getData();
    },
  },
};
</script>
<style lang="scss"  scoped>
</style>
<style>
.flex-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*俩端居中*/
}
.broadcast-head {
  padding: 0.5rem 0.8rem 0 0.8rem;
}
.head-search {
  width: calc(100% - 4.4rem);
}

.app-body-white {
  background-color: #fff;
  height: 100%;
  overflow-y: auto;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  font-size: 28px;
}
.app-body-white .van-uploader__upload {
  background: #f3f7ff;
}
.app-body-white .tab-card-box {
  padding: 4vw;
}
.broadcast-head-add .van-button {
  border-radius: 0.8vw;
  font-size: 3.467vw;
  font-weight: 500;
}
.broadcast-head-add .van-button__icon {
  font-size: 0.8rem;
}

.head-search input.head-search-select,
.head-search input.head-search-keyword {
  border-radius: 0.8vw;
  border: 1px solid #3b7aff;
  /* box-sizing: border-box; */
  font-size: 3.2vw;
}
input.head-search-select {
  padding: 5rpx;
  /* background: transparent url("../image/down-icon.png") no-repeat */
  /* calc(100% - 0.5rem) center; */
  background-size: auto 24%;
}

input.head-search-keyword {
  padding: 5rpx;
}

.head-search input.head-search-select {
  width: 6.5rem;
}

.head-search input.head-search-keyword {
  width: calc(100% - 6.8rem);
}
.admin-exposure-list {
  margin: 1.5rem 0.8rem;
}

.admin-exposure-list li {
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  position: relative;
  padding: 0.8rem;
}

.admin-exposure-list .exposure-main {
  padding: 0.5rem 0;
}
.exposure-name {
  font-size: 32rpx;
  font-weight: bold;
}
.activities-text {
  font-size: 28rpx;
  color: #999;
}
.activities-text span {
  color: #1989fa;
}
.notice-edit-label {
  position: absolute;
  left: 0;
  top: -1.707vw;
  top: -0.8rem;
}
.label-style {
  font-size: 3.2vw;
  font-weight: 500;
  color: #fff;
  background: #3b7aff;
  border-radius: 0.8rem 0 0.8rem 0;
  width: 10.667vw;
  width: 5rem;
  text-align: center;
  line-height: 2;
}
.admin-exposure-list {
  margin: 1.5rem 0.8rem;
}

.admin-exposure-list li {
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  position: relative;
  padding: 0.8rem;
}

.admin-exposure-list .exposure-main {
  padding: 0.5rem 0;
}
.admin-exposure-list li {
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  position: relative;
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.15);
  padding: 0.8rem;
}
</style>