cashier-web/src/views/tool/Instead/components/douyin-quan-bind-shop.vue

<template>
  <el-dialog title="绑定门店" width="450px" v-model="show">
    <div class="app-container">
      <div class="head-container">
        <el-table :data="tableData.data" v-loading="tableData.loading" @cell-click="cellClick">
          <el-table-column label="店铺名称" prop="poi_name"></el-table-column>
          <el-table-column label="店铺地址" prop="address"></el-table-column>
          <el-table-column label="操作" width="90" fixed="right">
            <template v-slot="scope">
              <el-button type="primary" size="mini" @click="choose(scope.row)">绑定门店</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="head-container">
        <el-pagination
          :total="tableData.total"
          :current-page="tableData.page + 1"
          :page-size="tableData.size"
          @size-change="sizeChange"
          @current-change="paginationChange"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </div>
  </el-dialog>
</template>
    
    <script>
import { $douyin_storelist, $douyin_bindstore } from "@/api/coup/index";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";

let cacheData = {};
export default {
  data() {
    return {
      show: false,
      query: {},
      shopInfo: {
        balanceTotal: 0,
        userTotal: 0,
        chageTotal: 0,
      },
      tableData: {
        data: [],
        page: 0,
        size: 10,
        loading: false,
        total: 0,
      },
    };
  },
  filters: {
    timeFilter(s) {
      return dayjs(s).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  mounted() {
    // this.getTableData();
  },
  methods: {
    cellClick(user) {
      this.choose(user);
    },
    async choose(user) {
      this.$emit("chooseUser", user);
      const res = $douyin_bindstore({
        poi_id: user.poi_id,
      }).then((res) => {
        this.close();
      });
      console.log(user);
    },
    charge(user) {
      console.log(user);
    },
    close() {
      this.show = false;
    },
    open() {
      this.getTableData();
      this.show = true;
    },
    toPage(type) {
      const pages = {
        charge: "charge_list",
        cost: "cost_list",
      };
      this.$router.push({
        name: pages[type],
      });
      console.log(pages[type]);
    },
    // 获取商家用户概述信息

    sizeChange() {
      this.tableData.page = 0;
      this.getTableData();
    },
    // 切换状态
    async statusChange(e, row) {
      try {
        this.tableData.loading = true;
        const data = { ...row };
        data.status = e;
        await modityActivate(data);
        this.getTableData();
      } catch (error) {
        console.log(error);
        this.tableData.loading = false;
      }
    },
    // 重置查询
    resetHandle() {
      this.query.name = "";
      this.getTableData();
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e - 1;
      this.getTableData();
    },
    async getTableData() {
      this.tableData.loading = true;
      try {
        const res = await $douyin_storelist({
          ...this.query,
          size: this.tableData.size,
          page: this.tableData.page + 1,
        });
        console.log(res);
        this.tableData.loading = false;
        this.tableData.data = res.list;
        this.tableData.total = res.count;
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
    
    <style scoped lang="scss">
.user_info {
  display: flex;
  align-items: center;

  .name {
    margin-left: 10px;
  }
}
:deep(.el-input--small .el-input__inner) {
  height: 36px;
  line-height: 36px;
}

:deep(.image-slot) {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #efefef;
  font-size: 20px;
  color: #999;
}

.card {
  background-color: #f5f5f5;
  padding: 0 14px;

  .title {
    font-size: 22px;
    padding-top: 14px;
  }

  .row {
    display: flex;
    padding: 20px 0;

    .item {
      flex: 1;

      .t {
        text-align: center;
        color: #555;
      }

      .n {
        color: #000;
        font-size: 20px;
        font-weight: bold;
        padding-top: 6px;
        text-align: center;
      }
    }
  }
}
.flex {
  display: flex;
  align-items: center;
}
.gap-20 {
  gap: 20px;
}
</style>