xinkeaboard/xinkeaboard-web/pages/member/enquiry/list.vue

<template>
  <div class="sld_myenquiry_wrapper">
    <MemberTitle :memberTitle="L['我的询盘']"></MemberTitle>
    <div class="container">
      <h3 class="mb-30">{{ L["我的询盘"] }}</h3>

      <div class="search_con flex_row_between_center search_info">
        <div class="search_incon1 flex_row_start_center">
          <el-input
            class="search_input"
            v-model="keyword"
            :placeholder="L['姓名/邮箱/公司/内容']"
            clearable
            @clear="clear"
          >
          </el-input>
          <div class="search pointer" @click="getEnquiryList">
            {{ L["搜索"] }}
          </div>
        </div>
      </div>

      <div class="point_list">
        <!-- <table class="point_table">
          <tbody>
            <tr class="voucher_tabeltitle">
              <th>{{ L["序号"] }}</th>
              <th>{{ L["姓名"] }}</th>
              <th>{{ L["邮箱"] }}</th>
              <th>{{ L["电话"] }}</th>
              <th>{{ L["公司"] }}</th>
              <th>{{ L["内容"] }}</th>
              <th>{{ L["发送时间"] }}</th>
              <th class="oprate">{{ L["操作"] }}</th>
            </tr>
            <tr v-for="(item, index) in enquiryList.list" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.email }}</td>
              <td>{{ item.phoneCode }}-{{ item.phone }}</td>
              <td>{{ item.company }}</td>
              <td>{{ item.message }}</td>
              <td>{{ item.createTime }}</td>
              <td>

              </td>
            </tr>
          </tbody>
        </table> -->
        <el-table :data="enquiryList.list" style="width: 100%">

          <el-table-column :label="L['序号']" type="index" :index="indexMethod" width="80"/>
          <el-table-column prop="name" :label="L['姓名']"/>
          <el-table-column prop="email" :label="L['邮箱']"   />
          <el-table-column prop="itemType" :label="L['类型']"  >
            <template #default="scope">
              <template v-if="scope.row.itemType == 'GOODS'">
                <nuxt-link style="color:#00985e;text-decoration: underline;"  :to="'/goods/detail/'+ calcProductName(scope.row.itemName) +'_'+ scope.row.itemId"   target="_blank">{{scope.row.itemName}}
                </nuxt-link>
              </template>
              <template v-if="scope.row.itemType == 'SHOP'">
                <nuxt-link style="color:#00985e;text-decoration: underline;" :to="'/store/'+ calcProductName(scope.row.itemName) +'_'+ scope.row.storeId"  target="_blank">{{scope.row.itemName}}
                </nuxt-link>
              </template>
              <template v-if="scope.row.itemType == 'MALL'">
                <nuxt-link style="color:#00985e;text-decoration: underline;" :to="`/home/contact`" target="_blank">{{scope.row.itemTypeStr}}
                </nuxt-link>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="quantity" :label="L['采购数量']"  >
            <template #default="scope">
              <template v-if="scope.row.itemType == 'GOODS'">
                {{scope.row.quantity}}
              </template>
              <template v-if="scope.row.itemType != 'GOODS'">
                -
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" :label="L['发送时间']" width="180">
          </el-table-column>


  <el-table-column  fixed="right"  :label="L['内容']" width="80" type="expand" >
            <template #default="scope">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item :label="L['姓名']+':'">
                  <span>{{ scope.row.name}}</span>
                </el-form-item>
                <el-form-item :label="L['邮箱']+':'">
                  <span>{{ scope.row.email}}</span>
                </el-form-item>
                <el-form-item :label="L['类型']+':'">
                    <template v-if="scope.row.itemType == 'GOODS'">
                      <nuxt-link style="color:#00985e;text-decoration: underline;"   :to="'/goods/detail/'+ calcProductName(scope.row.itemName) +'_'+ scope.row.itemId"  target="_blank">{{scope.row.itemName}}
                      </nuxt-link>
                    </template>
                    <template v-if="scope.row.itemType == 'SHOP'">
                      <nuxt-link style="color:#00985e;text-decoration: underline;"  :to="'/store/'+ calcProductName(scope.row.itemName) +'_'+ scope.row.storeId"  target="_blank">{{scope.row.itemName}}
                      </nuxt-link>
                    </template>
                    <template v-if="scope.row.itemType == 'MALL'">
                      <nuxt-link style="color:#00985e;text-decoration: underline;" :to="`/home/contact`" target="_blank">{{scope.row.itemTypeStr}}
                      </nuxt-link>
                    </template>
                </el-form-item>
                <el-form-item :label="L['采购数量']+':'">
                  <template v-if="scope.row.itemType == 'GOODS'">
                    {{scope.row.quantity}}
                  </template>
                  <template v-if="scope.row.itemType != 'GOODS'">
                    -
                  </template>
                </el-form-item>
                <el-form-item :label="L['电话']+':'">
                  <span>{{ scope.row.phoneCode}}-{{scope.row.phone}}</span>
                </el-form-item>
                <el-form-item :label="L['公司名称']+':'">
                  <span>{{ scope.row.company }}</span>
                </el-form-item>
                <el-form-item :label="L['内容']+':'">
                  <span style="word-break: break-word;">{{ scope.row.message }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
        </el-table>

        <SldCommonEmpty
          v-if="!enquiryList.list.length"
          totalHeight="587"
          totalWidth="1003"
          :tip="L['暂无询盘记录~']"
        />
      </div>
      <div class="flex_row_end_center sld_pagination mt-15">
        <el-pagination
          @current-change="handleCurrentChange"
          v-model:currentPage="pageData.page.current"
          :page-size="pageData.page.pageSize"
          layout="prev, pager, next, jumper"
          :total="pageData.page.total"
          :hide-on-single-page="true"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 询盘弹窗详情 start -->
    <el-dialog
      :title="L['询盘详情']"
      v-model="enquiryDetail"
      customClass="select_reason_width"
      :before-close="(current_reason_id = '')"
      append-to-body="true"
      lock-sroll="false"
    >
      <div class="cancel_list_con">
        <div class="address_item flex_column_start_start">
          <span>{{ L["姓名"] }}：{{ enquiryInfoData.data.name }}</span>
          <span>{{ L["邮箱"] }}：{{ enquiryInfoData.data.email }}</span>
          <span
            >{{ L["电话"] }}：{{ enquiryInfoData.data.phoneCode }}-{{
              enquiryInfoData.data.phone
            }}</span
          >
          <span>{{ L["数量"] }}：{{ enquiryInfoData.data.quantity }}</span>
          <span>{{ L["公司"] }}：{{ enquiryInfoData.data.company }}</span>
          <span>{{ L["内容"] }}：{{ enquiryInfoData.data.message }}</span>
          <span
            >{{ L["发送时间"] }}：{{ enquiryInfoData.data.createTime }}</span
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, getCurrentInstance, ref, onMounted } from "vue";
// import { lang_zn } from "@/assets/language/zh";
import { getCurLanguage } from '@/composables/common.js';
import { useFiltersStore } from "@/store/filter.js";
import { ElForm,ElFormItem,ElPopover,ElTooltip,ElDialog,ElPagination,ElInput,ElTable,ElTableColumn,ElTag,ElButton } from "element-plus";
const filtersStore = useFiltersStore();
// const L = lang_zn;
const L = getCurLanguage();
definePageMeta({
  layout: "member",
  middleware: ["auth"],
});
const { proxy } = getCurrentInstance();
const enquiryDetail = ref(false); //是否显示询盘弹窗
const enquiryList = reactive({ list: [] });
const enquiryInfoData = reactive({ data: {} });
const pageData = reactive({ page: {} });
const keyword = ref("");
const params = reactive({
  current: 1,
  pageSize: 20,
  type: "",
  keyword: "",
});

const getEnquiryList = () => {

  if (
    keyword.value != "" &&
    keyword.value != null &&
    keyword.value != undefined
  ) {
    params.keyword = keyword.value;
  } else {
    params.keyword = "";
  }
  get("v3/member/front/enquiry/list", params).then((res) => {
    if (res.state == 200) {
      enquiryList.list = res.data.list;
      pageData.page = res.data.pagination;
    }
  });
};

//清空搜索订单
const clear = () => {
  keyword.value = "";
  getEnquiryList();
};

//显示弹窗
const showSelectReasonDialog = (enquiryItem) => {
  enquiryInfoData.data = enquiryItem;
  enquiryDetail.value = true;
};

const handleSwitch = (index) => {
  params.type = index;
  params.current = 1;
  getEnquiryList();
};
const handlePrevCilickChange = (e) => {
  params.current = e;
  getEnquiryList();
};

const handleNextCilickChange = (e) => {
  params.current = e;
  getEnquiryList();
};

const handleCurrentChange = (e) => {
  params.current = e;
  getEnquiryList();
};

onMounted(() => {
  getEnquiryList();
});

const getDealEnquiryContent = (text) => {
  return !text ? '' : (text.length > 50 ? text.substr(0, 50)+'......' : text);
};

const indexMethod = (index) => {
  let cur_page = params.current != undefined ? params.current : 1;
  return (cur_page - 1) * params.pageSize + index + 1;
}

</script>
<style>
  .enquiry-content-tip{
    max-width: 25%!important;
  }
  .el-table__expand-icon--expanded{
    transform: rotate(180deg);
  }
  .el-table .cell{
    padding: 0 4px;
  }
  .sld_myenquiry_wrapper i.el-icon:before {
    content: '';
    width: 100%;
    height: 12px;
    background: url(/plus.svg);
    background-size: cover;
    background-repeat: no-repeat;
}
.sld_myenquiry_wrapper i.el-icon svg{
  display: none;

}
</style>
<style lang="scss" scoped>
  .mt-15 {
    margin-top: 15px;
  }

  .mb-30 {
  margin-bottom: 30px;
}

.sld_pagination {
  margin-right: 40px;
  margin-bottom: 20px;
}

.sld_myenquiry_wrapper {
  width: 957px;
  margin-left: 10px;
  float: left;
}

.sld_myenquiry_wrapper {
  .container {
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
}

.sld_myenquiry_wrapper {
  .point_table {
    border-left: none;
    border-right: none;
    width: 100%;
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: transparent;
    .detail{
      cursor: pointer;
    }
  }
}

.sld_myenquiry_wrapper {
  .point_table {
    .voucher_tabeltitle {
      height: 39px;
      background-color: #ececec;
    }
  }
}

.sld_myenquiry_wrapper {
  .point_table {
    .voucher_tabeltitle {
      th {
        text-align: center;
        font-weight: 400;
        border: 1px solid #e3e3e3;
      }
    }
  }
}

.sld_myenquiry_wrapper {
  .point_table {
    td {
      text-align: center;
      line-height: 50px;
      background: #fff;
      border: 1px solid #e3e3e3;
      font-weight: 400;
    }
  }
}

.address_item span:not(:first-child) {
  margin-top: 12px;
}

.search_incon1 {
  height: 34px;
  background: #ffffff;
}

.search_con {
  .search_input {
    border-right: none;
    width: 300px;
  }
}

.search_con {
  .el-input__inner {
    height: 29px;
    padding-left: 11px;
    border: none;
    box-sizing: border-box;
    outline: none;
    font-size: 12px;
    font-weight: 400;
  }
}

.search_con {
  height: 44px;
  padding-top: 18px;
  padding-bottom: 25px;
  box-sizing: border-box;
}

.search_con {
  .search {
    width: 105px;
    height: 32px;
    border: none;
    background-color: #f7f7f7;
    color: #000;
    line-height: 32px;

    text-align: center;
    font-size: 12px;
  }
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>