nowwa-system/vue-admin-template-master/src/views/merchant/index.vue

<template>
  <div class="app-container">
    <!-- 门店列表 -->
    <el-card class="box-card">
      <div class="pd-30">
        <!-- <el-input
          clearable
          prefix-icon="el-icon-search"
          v-model="listQuery.name"
          placeholder="请输入门店名称"
          style="width: 300px;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        /> -->

        <el-cascader
          size="large"
          :options="options3"
          v-model="listQuery.selectedOptions"
          @change="handleChange"
        >
        </el-cascader>

        <el-select
          style="margin-left: 10px;"
          v-model="listQuery.type"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            clearable
            :disabled="item.disabled"
          >
          </el-option>
        </el-select>

        <el-select
          style="margin-left: 10px;"
          v-model="listQuery.name"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            clearable
            :disabled="item.disabled"
          >
          </el-option>
        </el-select>

        <el-button
          style="margin-left: 10px;"
          :loading="searchLoading"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
          disabled
        >
          搜索
        </el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%;fontSize:12px;"
        v-loading="listLoading"
        :cell-style="{ padding: '6px 0' }"
      >
        <el-table-column prop="_id" label="ID" width="90px"></el-table-column>
        <el-table-column
          prop="storeName"
          label="storeName"
          width="210"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="shipping_time"
          label="shipping_time"
        ></el-table-column>
        <el-table-column
          prop="shipping_fee"
          width="100"
          label="shipping_fee"
        ></el-table-column>
        <el-table-column
          prop="score"
          width="100"
          label="score"
        ></el-table-column>
        <el-table-column prop="sales" label="sales"></el-table-column>
        <el-table-column
          prop="phone_list"
          show-overflow-tooltip
          label="phone_list"
        ></el-table-column>
        <el-table-column
          prop="min_price"
          width="100"
          label="min_price"
        ></el-table-column>

        <el-table-column
          prop="comment_num"
          width="120"
          show-overflow-tooltip
          label="comment_num"
        ></el-table-column>
        <el-table-column
          prop="call_center"
          show-overflow-tooltip
          label="call_center"
        ></el-table-column>
        <el-table-column
          prop="address"
          show-overflow-tooltip
          label="address"
        ></el-table-column>

        <!-- <el-table-column
          label="操作"
          align="center"
          width="230"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
            <el-button type="primary" size="mini" @click="handleUpdate(row)">商品管理</el-button>
          </template>
        </el-table-column>-->
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getCoffeeStore } from "@/api/store";
import {
  provinceAndCityData,
  CodeToText,
  TextToCode
} from "element-china-area-data";
const options1 = [
  {
    value: "饿了么",
    label: "饿了么",
    disabled: true
  },
  {
    value: "美团",
    label: "美团"
  },
  {
    value: "高德地图",
    label: "高德地图",
    disabled: true
  },
  {
    value: "大众点评",
    label: "大众点评",
    disabled: true
  }
];
const options2 = [
  {
    value: "烘焙",
    label: "烘焙",
    disabled: true
  },
  {
    value: "咖啡馆",
    label: "咖啡馆"
  },
  {
    value: "甜点",
    label: "甜点",
    disabled: true
  },
  {
    value: "饮品",
    label: "饮品",
    disabled: true
  },
  {
    value: "网咖",
    label: "网咖",
    disabled: true
  },
  {
    value: "西餐厅",
    label: "西餐厅",
    disabled: true
  },
  {
    value: "便利店",
    label: "便利店",
    disabled: true
  },
  {
    value: "美食城",
    label: "美食城",
    disabled: true
  },
  {
    value: "酒店",
    label: "酒店",
    disabled: true
  },
  {
    value: "猫咖",
    label: "猫咖",
    disabled: true
  },
  {
    value: "书吧",
    label: "书吧",
    disabled: true
  }
];
export default {
  data() {
    return {
      tableData: [],
      listQuery: {
        type: "美团",
        name: "咖啡馆",
        selectedOptions: [
          TextToCode["上海市"].code,
          TextToCode["上海市"]["市辖区"].code
        ]
      },
      listLoading: true,
      searchLoading: false,
      options1,
      options2,
      options3: provinceAndCityData
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      getCoffeeStore().then(res => {
        console.log(res);
        this.listLoading = false;
        this.tableData = res;
      });
    },
    handleFilter() {},
    selectChange() {},
    handleChange(value) {
      console.log(CodeToText[value[0]], CodeToText[value[1]]);
      console.log(value);
    }
  }
};
</script>

<style lang="scss" scoped>
.pd-30 {
  padding: 10px 0 30px;
}
.shop-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .shop-message-l {
    display: flex;
    align-items: center;
  }
  .shop-message-l > div {
    margin: 0 30px;
    text-align: center;
  }
  .line {
    width: 1px;
    height: 70px;
    background: #dddddd;
  }
}
.black-20 {
  height: 20px;
  overflow: hidden;
  clear: both;
}
</style>