jiaqingjiayi-Web/src/views/business/verify/index.vue

<template>
  <el-card>
    <el-row :gutter="20" class="header">
      <el-col :span="7">
        <el-input placeholder="请输入用户昵称..." clearable  v-model="formPage.businessName"></el-input>
      </el-col>
      <el-button type="button" :icon="Search" @click="initBusinessList">搜索</el-button>

<!--      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;margin-left: 20px">-->
<!--        <el-radio-button :value="true" @click="handleCollapse(true)">审核</el-radio-button>-->
<!--        <el-radio-button :value="false"  @click="handleCollapse(false)">未审核</el-radio-button>-->
<!--      </el-radio-group>-->
    </el-row>
    <el-table :data="tableData" stripe style="width: 100%;" showOverflowTooltip>
      <el-table-column prop="id" label="#ID" width="80" fixed="fixed" />
      <el-table-column  prop="businessName"  label="商家昵称" width="200" />
      <el-table-column prop="businessAvatar" label="头像" width="150" >
        <template v-slot="scope">
          <el-popover
              placement="right-start"
              :width="200"
              trigger="hover"
              :content="scope.row.businessAvatar"
          >
            <template #reference>
              <img :src="scope.row.businessAvatar" width="50" height="50"/>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="businessPhone"  label="电话号码" width="120" />
<!--      <el-table-column prop="state"  label="状态" width="80">-->
<!--        <template v-slot="scope">-->
<!--            <div v-if="scope.row.state===0" style="color: red">-->
<!--              禁用-->
<!--            </div>-->
<!--            <div style="color: lawngreen" v-else>-->
<!--              启用-->
<!--            </div>-->

<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="storeStatus"  label="店铺状态" width="80">-->
<!--        <template v-slot="scope">-->
<!--            <div v-if="scope.row.storeStatus===0" style="color: red">-->
<!--              休业-->
<!--            </div>-->
<!--            <div style="color: lawngreen" v-else>-->
<!--              营业-->
<!--            </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="createTime" label="注册日期" width="200"/>
      <el-table-column prop="updateTime" label="最后登录日期" width="200"/>

      <el-table-column prop="action" fixed="right" label="操作" min-width="120" >
        <template v-slot="scope" >
          <el-button  type="primary" size="small" @click="handleClick(scope.row.id)">审核</el-button>
        </template>

      </el-table-column>
    </el-table>
    <el-pagination
        v-model:currentPage="formPage.current"
        v-model:page-size="formPage.pageSize"
        :page-sizes="[10, 20, 30, 40,50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </el-card>


  <Dialog v-model="BdialogVisible" :bussinessId="bussinessId" :dialogTitle="dialogTitle"
          @initBusinessList="initBusinessList"></Dialog>
  <AddDialog v-model="BdialogaddVisible"  :dialogTitle="dialogTitle"
             @initBusinessList="initBusinessList"></AddDialog>
  <UpdateDialog v-model="BdialogUpdateVisible" :bussinessId="bussinessId"  :dialogTitle="dialogTitle"
                @initBusinessList="initBusinessList"></UpdateDialog>


</template>
<script setup>
import {Search,DocumentAdd,Edit} from '@element-plus/icons-vue'
import {ref, watch} from 'vue'
import axios from "@/util/axios";
import Dialog from '@/views/business/dialog/index.vue'
import AddDialog from '@/views/business/addDialog/index.vue'
import UpdateDialog from '@/views/business/updateDialog/index.vue'

import axiosUtil from "@/util/axios";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router"

const isCollapse=ref(false);
const RCollapse=ref([]);
const LCollapse=ref([]);
const router=useRouter();
const bussinessId=ref('')
const dialogTitle=ref('');
const BdialogaddVisible=ref(false)
const BdialogVisible=ref(false)
const BdialogUpdateVisible=ref(false)



const handleClick=(id)=>{
  bussinessId.value=id;
  // console.log(bussinessId.value)
  dialogTitle.value="审核商家"
  BdialogVisible.value=true
}
const handleRouter=(temp)=>{
  console.log(temp.id)
  router.push({path:'/product',query:{product: JSON.stringify(temp)}})
}




const formPage=ref({
  businessName:'',
  current:1,
  pageSize:10
})


// watch(formPage.value.businessName,()=>{
//   // console.log(id.value)
//   initBusinessList();
// })


const total=ref(0)
const tableData =ref([])


const handleCollapse=async (temp)=>{
  console.log(temp)
  const res=await axios.post("business/list");
  RCollapse.value.splice(0,RCollapse.value.length);
  LCollapse.value.splice(0,LCollapse.value.length);
  // console.log(res.data.data.records)
  tableData.value=res.data.data;
  tableData.value.forEach(item => {
    if(item.state){
      RCollapse.value.push(item)
    }
    else{
      LCollapse.value.push(item)
    }

    //console.log(item.state);
  });
  console.log("RCollapse"+RCollapse.value);
  console.log("LCollapse"+LCollapse.value);
  if (temp){
    tableData.value=RCollapse.value
    total.value=Number(RCollapse.value.length);
  }else {
    tableData.value=LCollapse.value
    total.value=Number(LCollapse.value.length);
  }


}
const initBusinessList=async()=>{
 // console.log(formPage.value)
    const res=await axios.post("business/list/page",formPage.value);
     // console.log(res.data.data.records)
     isCollapse.value=undefined;
    tableData.value=res.data.data.records;
    total.value=Number(res.data.data.total);

 }


// const initBusinessList=async()=>{
//
//   if(!id.value)
//   {
//     const res=await axios.post("business/list/page",formPage.value);
//     //  console.log(res.data.data.records)
//     tableData.value=res.data.data.records;
//     // console.log(res.data.data.total)
//     total.value=res.data.data.records.length;
//   }
//   else{
//     const res=await axios.post("business/list/page", {businessName:id.value});
//     // console.log(res.data.data)
//     //const temp=[];
//    // temp.push(res.data.data)
//     tableData.value=res.data.data.records;
//     total.value=res.data.data.records.length;
//   }
//
//  }



handleCollapse();
const handleSizeChange = (pageSize) => {
  formPage.value.current=1;
  formPage.value.pageSize=pageSize;
  initBusinessList();
}
const handleCurrentChange = (pageNum) => {
  formPage.value.current=pageNum;
  initBusinessList();
}
</script>
<style lang="scss" scoped>
.header{
  padding-bottom: 16px;
  box-sizing: border-box;

}
.el-pagination{
  padding-top: 15px;
  box-sizing: border-box;
}


</style>