feat: 增加美团抖音扫码核销

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

@@ -0,0 +1,208 @@
+<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;
+  }
+}
+::v-deep .el-input--small .el-input__inner {
+  height: 36px;
+  line-height: 36px;
+}
+
+::v-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>
+