SteelfurnitureWeb/src/views/account/user/index.vue

<template>
  <div class="bg-F5">
    <div class="container">
      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/">{{ $t(`route.home`) }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t(`route.user`) }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row :gutter="20" class="oHidden">
        <el-col :span="6">
          <user-info />
        </el-col>
        <el-col :span="18">
          <img class="rightImg" src="@assets/userbg.png" alt="" />
        </el-col>
      </el-row>
      <tab
        class="tab"
        :titles="$t(`page.views.account.user.index.titles`)"
        v-if="currIndex !== null"
        :currIndex.sync="currIndex"
      />

      <el-table
        :empty-text="$t('loading')"
        class="qyrzgs"
        border
        v-if="arr[currIndex].items"
        :data="arr[currIndex].items"
      >
        <template v-if="currIndex">
          <el-table-column
            type="index"
            :label="$t('page.views.account.user.index.tableIndex')"
            width="50"
          />
          <el-table-column
            prop="purchaseTitle"
            :label="$t('page.views.account.user.index.purchaseTitle')"
          />
          <el-table-column
            prop="summaryOfNeeds"
            :label="$t('page.views.account.user.index.summaryOfNeeds')"
          />
          <el-table-column
            prop="createTime"
            :label="$t('page.views.account.user.index.createTime')"
          />
          <el-table-column :label="$t('page.views.account.user.index.status')">
            <span slot-scope="{ row: { status } }">{{
              $t(`page.views.account.user.index.status${status == 0 ? 1 : 2}`)
            }}</span>
          </el-table-column>
          <el-table-column :label="$t('page.views.account.user.index.option')">
            <template slot-scope="{ row: { id } }">
              <el-button
                class="textBtn"
                @click="revocation(id)"
                type="text"
                size="small"
                >{{ $t(`page.views.account.user.index.revocation`) }}</el-button
              >
              <span class="editline"></span>
              <router-link class="textBtn" to="/info/add">
                {{ $t(`page.views.account.user.index.public`) }}
              </router-link>
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column
            type="index"
            :label="$t('page.views.account.user.index.tableIndex')"
            width="50"
          />
          <el-table-column
            prop="companyName"
            :label="$t('page.views.account.user.index.companyName')"
            width="180"
          />
          <el-table-column
            prop="primaryBusiness"
            :label="$t('page.views.account.user.index.primaryBusiness')"
          />
          <el-table-column
            prop="followDate"
            :label="$t('page.views.account.user.index.followDate')"
          />
          <el-table-column :label="$t('page.views.account.user.index.option')">
            <template slot-scope="{ row: { companyId } }">
              <router-link class="textBtn" :to="`/shop/${companyId}`">
                {{ $t(`page.views.account.user.index.inShop`) }}</router-link
              >
              <span class="editline"></span>
              <el-button
                class="textBtn"
                type="text"
                size="small"
                @click="cancelGz(companyId)"
                >{{ $t(`page.views.account.user.index.cancelGz`) }}</el-button
              >
            </template>
          </el-table-column>
        </template>
      </el-table>

      <load-more
        v-for="({ url, params, items }, index) in arr"
        :key="`table${index}`"
        :url="url"
        :params="params"
        v-show="currIndex === index"
        @getItems="items => setItems(items, index)"
      />
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component({ name: "user" })
export default class extends Vue {
  private currIndex: number | null = null;
  private arr: Array<{
    url: string;
    params: IAny | null;
    items: any[];
  }> = "/member/follow/getMemberFollowList,demand/info/getMemberDemandList"
    .split(",")
    .map(url => ({
      url,
      params: null,
      items: []
    }));
  created() {
    const { index = 0 } = this.$route.query;
    this.currIndex = Number(index) | 0;
  }
  @Watch("currIndex")
  currIndexChange() {
    if (this.currIndex === null) return;
    this.arr[this.currIndex].params = this.arr[this.currIndex].params || {};
  }
  setItems(items: any[], index: number) {
    this.$set(this.arr[index], "items", items.length ? items : null);
  }

  async cancelGz(companyId: number) {
    if (
      !(await this.$confirm(
        `${this.$i18n.t("message.confirm.cancelGz")}`
      ).catch(x => false))
    )
      return;
    const [err] = await this.$post("/member/follow/cancleMemberFollow", {
      companyId
    });
    if (err) return;
    this.$message.success(`${this.$i18n.t("message.success.cancelGz")}`);
    this.arr[0].params = {};
  }
  async revocation(id: number) {
    if (
      !(await this.$confirm(
        `${this.$i18n.t("message.confirm.revocation")}`
      ).catch(x => false))
    )
      return;
    const [err] = await this.$post("demand/info/cancleMemberDemandInfo", {
      id
    });
    if (err) return;
    this.$message.success(`${this.$i18n.t("message.success.revocation")}`);
    this.arr[1].params = {};
  }
}
</script>
<style scoped lang="scss">
.breadcrumb {
  height: 4rem;
  line-height: 4rem;
}
.rightImg {
  width: 100%;
  height: 19rem;
  border-radius: 0.4rem;
}
.editline {
  display: inline-block;
  height: 1rem;
  width: 0.1rem;
  background: #aaaaaa;
  margin: 0 0.6rem;
}
.textBtn {
  color: #606266;
}
.pageDiv {
  text-align: right;
  margin-top: 0.5rem;
  padding: 3rem 0;
}
.tab {
  margin-bottom: 2rem;
}
</style>
<style lang="scss">
.qyrzgs th {
  background: #fd5522;
  color: #fff;
  padding: 0.6rem 0;
  text-align: center;
}
.qyrzgs.el-table td {
  padding: 0.2rem 0;
}
.qyrzgs.el-table--border th,
.el-table--border td {
  border-right: 1px solid #eae1dc;
  border-bottom: 1px solid #eae1dc;
}
.qyrzgs.el-table--border {
  border: 0.1rem solid #fd5522;
}

.qyrzgs .cell {
  text-align: center;
}
</style>