EnforcementCode-2.0/zdxt-web-client/zdxt-enforcement-code-app/fordelete/enforce/noScan.vue

<template>
    <div class="address_edit">
        <!-- 导航栏 -->
        <!--  <div class="header_body">
            <header-nav
                    :slefBack="true"
                    @goBack="goBack"
                    :titelText="`企业搜索（未扫码）`"
            >
            </header-nav>
        </div>-->
        <!-- 中间 -->
        <div class="warp_body">
            <!--      {{ content }}-->
            <div class="subsearch">
              <input class="searchbox" v-model="searchParam.enterpriseName" placeholder="请输入关键字搜索" name="keyword" id="">
              <van-icon class="ibtn-reset" name="clear" @click="cancel()" title="重置" />
              <button class='btn-search' @click="search()">搜索</button>
            </div>
            <div class="search-result">
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                        <div class="case-item" v-for="(item, index) in enterpriseList" @click="toDetail(item)">
                    <div class="case-title">{{item.enterpriseName}}</div>
                    <div class="case-info">统一社会信用代码：{{item.enterpriseNumber}}</div>
                    <div class="case-info">
                      <span>法定代表人：{{item.legalPerson}}</span><span>联系电话：{{item.enterpriseTel}}</span>
                    </div>
<!--                    <div class="case-info">-->
<!--                      <span>企业联系人：{{item.enterprise}}</span><span>联系电话：{{item.enterpriseTel}}</span>-->
<!--                    </div>-->
                    <div class="case-area">{{item.enterpriseAddress}}</div>

                </div>
                    </van-list>
                </van-pull-refresh>
            </div>


        </div>
    </div>

    <van-popup v-model:show="showPicker" round position="bottom" :close-on-click-overlay="false">
        <van-picker v-model="selectedValues" 
          cancel-button-text=""
          title="请选择不扫码的原因" :columns="columns"
          @confirm="onConfirm" />
  </van-popup>

</template>

<script setup >
    import {queryEnterpriseInfoList} from '../../api/enterprise'
    import {queryRegistrationList} from "../../api/enforce";
    import {getDict} from "@/api/Home";

    //路由参数
    const router = useRouter();
    const isCheck = true;
    const checkCss = ref(1);
    const reason = ref("企业拒绝出示二维码");
    const enterpriseList = ref([]);
    const searchParam =reactive( {
        // 企业名称
        enterpriseName: "",
        params: {},
        // 分页
        pageNum: 1,
        pageSize: 6,
    })
    const dicts = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);
    const curPage=  ref(1);
    const columns= [];
    const showPicker = ref(true)

        const props = defineProps({
        visible: {
          type: Boolean,
          default: false
        },
        enterpriseNumber: {
          type: String,
          default: false
        },
        content: {
            type: String,
            default: ''
        },
        lawEnforcementId: {
            type: String,
            default: ''
        },
    })
    // props: {
    //     visible: {
    //         type: Boolean,
    //         default: true
    //     },
    //     content: {
    //         type: String,
    //         default: ''
    //     }
    // }
    // created() {
    //     // this.queryList();
    //     this.queryDict();
    // },
    onMounted(() =>{
      queryDict();
    })
    const closePopup = () =>{
            this.$emit('close');
    }
    const queryList =() =>{
        searchParam.reason = checkCss;
        searchParam.pageNum = (curPage.value-1)*searchParam.pageSize;
        queryEnterpriseInfoList(searchParam, success => {
            curPage.value++;
            loading.value = false;   // 查出结果停止加载
            if (success.total <= enterpriseList.value.length) {
                // 查到最后没数据
                finished.value = true;
                return;
            }
            // this.enterpriseList.push(...success.data);
            enterpriseList.value.push(...success.rows);
        });
    }
    const search = () =>{
        curPage.value = 1;
        enterpriseList.value = [];
        onRefresh();
    }
    const queryDict = () => {
        dicts.value = []; 
        getDict({"dictType":"no-scan-reason"}, success => {
            if (success.success) {
               dicts.value.push(...success.data);
            }
            for (let index = 0; index < success.data.length; index++) {
              const element = success.data[index];
              console.log(element);
              var obj = {
                "text": element.dictLabel,
                "value":element.dictValue
              }
              columns.push(obj);
            }
        });
    }
    const toDetail = (item) =>{
      router.push({
            // path: "/sign",
            path: "/enterpriseScanPreview",
            query: {
                reason: reason.value,
                checkCss: checkCss.value,
                enterpriseNumber: item.salt,    // 之前因为统一信用码重复, 所以用的盐, 现在设了唯一键了.
                enterpriseNumber: item.enterpriseNumber,
                isNoScan: true,
            }
        });
    }
    const checkReason = (val, key)=> {
        reason = val;
        checkCss = key;
    }
    const closeReason =() =>{
        isCheck = false;
    }
    const cancel = () =>{
        searchParam.enterpriseName = '';
        search()
    }
    // 返回
    const goBack = () =>{
      router.go(-1);
    }

    //下拉刷新
    const onRefresh =() => {
        // 清空列表数据
        enterpriseList.value = [];
        finished.value = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        loading.value = true;
        onLoad();
    }
    // 触底加载
    const onLoad = () => {
        setTimeout(() => {
            if (refreshing.value) {
                refreshing.value = false;
            }
            queryList();
        }, 1000);
    }
    const onConfirm = (item) =>{
        showPicker.value = false;
        var obj = item.selectedOptions[0];
        reason.value = obj.text;
        checkCss.value = obj.value;
        console.log(item);
    }
      
    
</script>

<style scoped>
    .address_edit {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        background-color: #ebf3fb;
    }

    .warp_body {
        background-image: linear-gradient(to bottom, #ebf3fb, #fff);
    }

    .subsearch {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 3%;
      width: 94%;
      height: 1.25rem;
      font-size: 0.37rem;
    }

    .subsearch .ibtn-reset {
      margin: 0 0.5rem 0 -1rem;
      width: 1rem;
      color: #afabab;
      font-size: 0.5rem;
    }

    .subsearch .btn-search {
      margin: 0 0 0 -0.5rem;
      width: 20%;
      height: 1rem;
      border-radius: 0 0.15rem 0.15rem 0;
    }

    .searchbox {
      margin: 2% 0;
      padding: 0.1rem 1.2rem 0.1rem 0.9rem;
      width: 100%;
      height: 1rem;
      background: #f6f7fe url(../../assets/images/icon_sou.png) no-repeat;
      background-position: left 0.25rem center;
      background-size: auto 50%;
      box-sizing: border-box;
      border: 1px solid rgba(0, 0, 0, .1);
      border-radius: 0.15rem 0 0 0.15rem;
      color: #999999;
      outline: none;
    }

    .search-result {
        margin: 1% 3%;
        padding-bottom: 2rem;
        width: 94%;
        height: calc(100% - 4rem);
        background: #fff;
        overflow-y: auto;
    }

    .case-item {
        margin: 3% 4%;
        padding: 2% 0;
        width: 92%;
        font-size: 0.35rem;
        border-bottom: 1px solid #f4f4f4;
        color: #999;
        line-height: 2;
    }

    .case-title {
        margin: 2% 0 1%;
        padding-left: 0.65rem;
        background: url(/src/assets/images/icon_jd.png) no-repeat left top 0.02rem;
        background-size: auto 0.5rem;
        font-size: 0.40rem;
        font-weight: bold;
        color: #000;
        line-height: 1.5;
    }

    .case-area {
      display: table;
      margin: 2% 0 2% -4.5%;
      padding: 1% 0 1% 4%;
      width: auto;
      background: linear-gradient(to right, #d3e6f9, #dfedfb 30%, transparent 70%);
      border-radius: 0 0 0 0.35rem;
      color: #68acf5;
      font-size: 0.35rem;
      line-height: 1.5;
    }

    .case-info {
        display: flex;
        white-space: nowrap;
    }

    .case-info span {
        width: 45%;
    }

    .popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.35);
    }

    .popup-content {
        position: fixed;
        z-index: 999;
        bottom: 0;
        left: 0;
        padding: 0 3%;
        width: 94%;
        height: 35vh;
        background: #fff;
        overflow-y: auto;
        font-size: 0.37rem;
    }

    .subtitle {
        margin: 5% 2% 2%;
        width: 96%;
        /*font-size: 0.4rem;
        font-weight: 600;*/
        border-bottom: 1px solid #f4f4f4;
        line-height: 2;
    }

    .item-btn {
        float: left;
        margin: 0.3rem 0.2rem;
        padding: 0.2rem 0.3rem;
        background-color: #f2f3f4;
        color: #999;
        border-radius: 1rem;
        font-size: 0.35rem;
    }

    .item-btn.active {
        background-color: #e9f2fb;
        color: #1367fe;
    }

    .btnbox {
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 1rem;
        left: 5%;
        width: 90%;
        height: 1rem;
    }

    .btn-reset {
        display: inline-block;
        margin: 0 2%;
        padding: 0;
        width: 60%;
        color: #fff;
        font-size: 0.35rem;
        border-radius: 1rem;
        background: #1367fe;
        border: 1px solid #1367fe;
        text-align: center;
    }
    .btn-search {
      display: inline-block;
      margin: 3% 7%;
      padding: 0;
      width: 70%;
      color: #fff;
      font-size: 0.35rem;
      border-radius: 1rem;
      background: #1367fe;
      border: 1px solid #1367fe;
      text-align: center;
      height: 90%;
    }

    .btn-reset {
        width: 35%;
        background-color: #fff;
        border-color: rgba(19, 103, 254, .7);
        color: #1367fe;
    }

    .close-button {
      position: absolute;
      top: 0.15rem;
      right: 0.1rem;
      width: 0.8rem;
      height: 0.8rem;
      background-color: rgba(255, 255, 255, .5);
      border: 0.05rem solid rgba(255, 255, 255, .7);
      border-radius: 50%;
      transform: rotate(45deg);
    }

    .close-button:before,
    .close-button:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      background: #333;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      height: 0.4rem;
      width: 0.02rem;
    }

    .close-button:after {
      height: 0.02rem;
      width: 0.4rem;
    }
</style>