admin-manage/src/views/operationManage/shopManage/index.vue

<template>
  <div class="shopManage app-container">
    <div class="search">
      <div>
        <el-input
          v-model="query.shopNameOrPhoneNum"
          size="small"
          placeholder="请输入门店名称或账号"
          class="item-width-200"
        ></el-input>
         <el-select
          v-model="platformType"
          multiple
          size="small"
          clearable
          class="item-width-200 ml10"
          placeholder="请选择所属平台"
        >
          <el-option
            v-for="item in masterShopOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="query.shopMenuId"
          size="small"
          clearable
          class="item-width-200 ml10"
          placeholder="请选择栏目"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="query.state"
          size="small"
          class="item-width-200 ml10"
          placeholder="请选择状态"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button
        class="ml10"
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleSearch"
      >
        搜索
      </el-button>
      </div>

      <el-button
        class="add-btn"
        type="primary"
        size="small"
        @click="handleAdd(0)"
      >
        添加
      </el-button>

      <!-- <el-dropdown @command="handleAdd">
        <el-button class="add-btn" type="primary" size="small">
          添加<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="0">小微商户</el-dropdown-item>
          <el-dropdown-item :command="1">个体工商户</el-dropdown-item>
          <el-dropdown-item :command="2">企业</el-dropdown-item>
          <el-dropdown-item :command="3">机关事业单位</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->
    </div>

    <el-table
      :data="tableData"
      tooltip-effect="dark"
      border
      v-loading="loading"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="店铺名称"
        prop="shopName"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column
        prop="shopMenuId"
        align="center"
        label="店铺经营类型"
        show-overflow-tooltip
      >
      <template slot-scope="scope">
          {{ scope.row.shopMenuId | filterType(that) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="shopMainName"
        align="center"
        label="所属主体"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="shopMenuId"
        align="center"
        label="所属平台"
        show-overflow-tooltip
      >
      <template slot-scope="scope">
        <div class="flex">
          {{ filterMasterName(scope.row.platformType) }}
        </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="shopId"
        align="center"
        label="店铺账号"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="applyTime"
        align="center"
        label="申请时间"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column
        align="center"
        prop="state"
        label="店铺状态"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span :class="[scope.row.state == 1?'green':'red']">{{ scope.row.state == 1 ? "正常" : "禁用" }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        prop="authStatus"
        label="银联状态"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span :class="[filterColor(scope.row.authStatus)]">{{ scope.row.authStatus | filterAuth }}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="address" width="180px" fixed="right" align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleDetail(scope.row.shopId)"
            >店铺资料</el-button
          >
          <!-- <el-button
            type="text"
            size="small"
            @click="jump(scope.row.shopId,scope.row.shopType)"
            >银联</el-button
          > -->
          <el-button
            type="text"
            size="small"
            @click="checkCode(scope.row.shopId,scope.row.shopName)"
            >收款码</el-button
          >
           <el-button type="text" size="small" @click="handle(scope.row)">{{
            scope.row.state == 1 ? "禁用" : "启用"
          }}</el-button>
          <el-button type="text" size="small" @click="handleDel(scope.row.shopId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="query.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog
    :visible.sync="showCode"
    width="400px"
    center>
    <div v-loading="codeLoading">
      <img style="width:300px;height:300px;margin:0 auto;display:block" :src="codeImg" alt="">
    </div>
    <span slot="footer" class="dialog-footer">
      <a id="downBtn" v-show="false" :download="downName" :href="codeImg" >下载</a>
      <el-button @click="download">下载</el-button>
    </span>
    </el-dialog>

  </div>
</template>

  <script>
import { debounce } from "@/utils/index";
import { getList, updateState } from "@/api/shop";
import {getMenuName} from '@/api/appConfig';
import axios from 'axios'
const BASE_URL = require('@/utils/config')
export default {
  name: "shopManage",
  data() {
    return {
      that:this,
      codeImg:'',//收款码
      downName:'',//下载名称
      showCode:false,
      codeLoading:false,
      tableData: [],
      options: [],
      options1: [
        {
          value: null,
          label: "全部状态",
        },
        {
          value: "1",
          label: "启用",
        },
        {
          value: "4",
          label: "禁用",
        },
      ],
      loading: false,
      platformType:'',
      query: {
        platformType:null,
        state: null,
        province: "",
        city: "",
        district: "",
        checkStartTime: "",
        checkEndTime: "",
        shopMainId: "",
        shopMenuId:"",
        shopNameOrPhoneNum: "",
        currentPage: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  watch: {
    platformType(val) {
        if(val.length){
          this.query.platformType = val.join(',')
        }else{
          this.query.platformType = null
        }
      }
  },
  filters: {
    filterType: function(value,that) {
       let msg = ''
      let arr = value.split(',')
      that.options.map(item=>{
        arr.map(i=>{
          if(item.value == i){
            msg+=item.label + '/'
          }
        })
      })
      return msg.substring(0,msg.length-1);

    },
    filterAuth: function(val) {
      if(val == 0){
        return '未认证'
      }else if(val == 1){
        return '审核中'
      }else if(val == 2){
        return '审核通过'
      }else if(val == 3){
        return '被驳回'
      }
    },
    filterShopType(val){
      if(val == 1){
        return '小微商户'
      }else if(val == 2){
        return '个体工商户'
      }else if(val == 3){
        return '企业'
      }else if(val == 4){
        return '机关事业单位或社会团体'
      }
    },
  },
  methods: {
    handleSearch(){
      this.query.currentPage = 1
      this.getList();

    },
    filterColor(val) {
      if(val == 0){
        return 'gray'
      }else if(val == 1){
        return 'gray'
      }else if(val == 2){
        return 'green'
      }else if(val == 3){
        return 'red'
      }
    },
    handleAdd(val) {
      this.$router.push({
        path: "/operationManage/shopManage/shopAdd" + (val || ""),
      });
    },
    handle(row) {
      let msg;
      if (row.state == 1) {
        msg = "禁用";
      } else {
        msg = "启用";
      }
      this.$confirm(`此操作将${msg}该商铺, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        updateState({
          shopId: row.shopId,
          state: row.state == 1 ? 4 : 1,
        }).then((res) => {
          if (res.state == "Success") {
            this.$notify({
              title: "成功",
              message: "操作成功",
              type: "success",
            });
            this.getList();
          }
        });
      });
    },
    handleEdit(id) {
      this.$router.push({
        path: "/operationManage/shopManage/shopAdd",
        query: {
          title: "店铺编辑",
          id,
        },
      });
    },
    handleDetail(id,title) {
      this.$router.push({
        path: "/operationManage/shopManage/shopAdd",
        query: {
          title: "店铺详情",
          id,
        },
      });
    },
    // 转化base64
    getBase64(data) {
      return new Promise((resolve, reject) => {
        const blob = new Blob([data], { type: 'image/jpeg' }) // 必须指定type类型
        const reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onload = () => resolve(reader.result)
        reader.onerror = (error) => reject(error)
      })
    },
    checkCode(shopId,shopName){
      this.showCode = true
      this.codeLoading = true
      this.downName = shopName + "收款码"
      axios(
        {
      url: BASE_URL.BASE_URL+'zswl-cloud-bdb/promotion/qrcode',
      method: 'post',
      responseType: "arraybuffer",
      data:{
        "page": "pay/offlinePayment",
        "scene": shopId
      }
    }).then(res=>{
      this.codeLoading = false

       let blob = new Blob([res.data], { type: "image/png" });
       this.codeImg =  (window.URL || window.webkitURL).createObjectURL(blob);
      })
    },
    // 下载
    download(){
      document.getElementById('downBtn').click()
    },
    handleDel(shopId){
      this.$confirm(`此操作将删除该商铺, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        updateState({
          shopId,
          state: 3,
        }).then((res) => {
          if (res.state == "Success") {
            this.$notify({
              title: "成功",
              message: "操作成功",
              type: "success",
            });
            this.getList();
          }
        });
      });
    },
    jump(id,type){
      this.$router.push({
        path: "/operationManage/shopManage/shopAdd"+type,
        query: {
          id,
          mode:'detail'
        },
      });
    },
    handleSizeChange(val) {
      this.query.currentPage = 1;
      this.query.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.getList();
    },

    getList() {
      this.loading = true;
      getList(this.query).then((res) => {
        this.loading = false;
        if (res.state == "Success") {
          this.tableData = res.content.records;
          this.total = res.content.total;
        }
      });
    },
    getMenuName(){
      getMenuName().then(res=>{
        if(res.state == 'Success'){
          for (const key in res.content) {
            if (res.content.hasOwnProperty.call(res.content, key)) {
                this.options.push({
                  label:res.content[key],
                  value:Number(key)
                })
            }
          }
        }
      })
    },
  },
  created() {
    this.getList();
    this.getMenuName();
  },
};
</script>

<style lang="scss" scoped>
.shopManage {
  .search {
    justify-content: space-between;
    .flex{
      display: flex;
      
    }
    .add-btn {
      // margin-right: 20px;
    }
  }
}
</style>