Lexus-media/src/views/account/AccountIndex.vue

<template>
  <!-- 厂商账号管理 -->
  <div class="accounts_manage">
    <div class="search">
      <div class="input">
        <img src="../../img/search.png" />
        <input type="text" @focus="focusInput" v-model="inputValue" />
      </div>
      <div class="current_button" @click="search">搜索</div>
    </div>
    <div class="option">
      <div class="selectArea">
        <p>选择区域</p>
        <select v-model="areaValue" @change="areaOption">
          <option value="">请选择</option>
          <option v-for="(item, index) in areaList" :key="index">
            {{ item.area }}
          </option>
        </select>
      </div>
      <div class="selectPlate">
        <p>媒体平台</p>
        <select v-model="plateValue" @change="plateOption">
          <option v-for="(item, index) in platesList" :key="index">
            {{ item }}
          </option>
        </select>
      </div>
      <div class="current_button" @click="submit">确定</div>
    </div>
    <Table
      :tableData='getDateList'
      @edit_data='editData'
    > </Table>
  </div>
</template>

<script>
import Table from "./components/AccountTable";
export default {
  components: {
    Table,
  },
  data() {
    return {
      inputValue: "请输入要搜索的经销商或DLR Code",
      areaList: [
        {
          sign: "all",
          area: "全区",
          checked: false,
        },
        {
          sign: "n",
          area: "北区",
          checked: false,
        },
        {
          sign: "s",
          area: "南区",
          checked: false,
        },
        {
          sign: "e",
          area: "东区",
          checked: false,
        },
        {
          sign: "self",
          area: "自定义分组",
          checked: false,
        },
      ],
      platesList: ["全部", "微信订阅号", "微信服务号", "抖音", "今日头条", "微信视频号"],
      areaValue: "",
      plateValue: "",
      tableData: [],
      getDateList: [
        // { num: "1", id: "123", dlr: 'L0201', area: '北区', distributor: '北京博瑞',plate:'微信公众号', account: '雷克萨斯北京博瑞4S店', isAttest: 0, fans: 118529},
        // { num: "1", id: "123", dlr: 'L0201', area: '北区', distributor: '北京博瑞',plate:'微信公众号', account: '雷克萨斯北京博瑞4S店', isAttest: 0, fans: 118529},
        // { num: "1", id: "123", dlr: 'L0201', area: '北区', distributor: '北京博瑞',plate:'微信公众号', account: '雷克萨斯北京博瑞4S店', isAttest: 0, fans: 118529},
        // { num: "1", id: "123", dlr: 'L0201', area: '北区', distributor: '北京博瑞',plate:'微信公众号', account: '雷克萨斯北京博瑞4S店', isAttest: 1, fans: 118529}
      ],
      functionData: [],
    };
  },
  methods: {
    focusInput: function () {
      this.inputValue = "";
    },
    search: function () { //通过经销商或DLR CODE查询
      console.log(this.inputValue);
      this.$http({
        method: 'post',
        url: '/sys/agent/selectAgentInfoPage',
        data: {
          queryParams:this.inputValue
        },
      }).then((res) => {
        if(res.data.code === 200) {
          this.getDateList = res.data.data;
        }else {
          console.log('message', res.data.message);
        }
      }).catch((err) => {
        console.log(err);
      })

    },
    areaOption: function () {
      console.log(this.areaValue);
    },
    plateOption: function () {
      console.log(this.plateValue);
    },
    submit: function () {
      console.log(this.plateValue);
      console.log(this.areaValue);
        this.$http({
            method: 'post',
            url: '/sys/agent/selectAgentInfoPage',
            data: {
                queryParams:this.areaValue
            },
        }).then((res) => {
            if(res.data.code === 200) {
                this.getDateList = res.data.data;
            }else {
                console.log('message', res.data.message);
            }
        }).catch((err) => {
            console.log(err);
        })
    },
    getData: function () {
      this.tableData = [];
      this.functionData = [];
      this.getDateList.forEach((element) => {
        this.tableData.push({
          num: element.num,
          dlr: element.dlr,
          area: element.area,
          distributor: element.distributor,
          plate: element.plate,
          account: element.account,
          isAttest: element.isAttest,
          fans: element.fans

        });
        this.functionData.push({
          id: element.id,
        });
      });
    },
    editData: function (i, isAttesta, fansNum) {
      console.log('完成编辑', i, isAttesta, fansNum);
    },
    getDealerListRequest(){//获取经销商列表
      this.$http({
        method: 'post',
        url: '/sys/mediaAccount/selectMediaAccountPage',
        data: {
        },
      }).then((res) => {
          if(res.data.code === 200) {
            this.getDateList = res.data.data;
           // alert('success!')
          }else {
            console.log('message', res.data.message);
          }
      }).catch((err) => {
        console.log(err);
      })
    }
    // testSyncInterFace(){//测试同步接口
    //   this.$http({
    //     method: 'post',
    //     url: '/interface/loadBaseData',
    //     data: {
    //       user: '111'
    //     },
    //   }).then((res) => {
    //     console.log(res);
    //     if(res.status === 200){
    //       if(res.data.code === 200) {
    //         console.log(res.data, '200');
    //       }else {
    //         let message = res.data.message;
    //         console.log('message', message);
    //       }
    //     }
    //   }).catch((err) => {
    //     console.log(err);
    //   })
    // }
  },
  mounted() {
    this.plateValue = this.platesList[0];
    this.getData();
    this.getDealerListRequest();
  },
};
</script>

<style scoped lang="less">
.accounts_manage {
  .search {
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    align-items: center;
    .input {
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 2px;
      display: flex;
      img {
        width: 28px;
        height: 28px;
        border: 1px solid #ccc;
      }
      input {
        background-color: #fff;
        border: 1px solid #ccc;
        width: 220px;
        margin-left: 3px;
        color: #555;
        font-size: 12px;
      }
    }
  }
  .option {
    display: flex;
    margin-top: 10px;
    .selectArea {
      display: flex;
      height: 28px;
      p {
        height: 28px;
        line-height: 28px;
        margin-right: 20px;
      }
      select {
        width: 144px;
        height: 28px;
        margin-right: 35px;
        border: 1px solid #ccc;
      }
    }
    .selectPlate {
      display: flex;
      height: 28px;
      p {
        height: 28px;
        line-height: 28px;
        margin-right: 20px;
      }
      select {
        width: 144px;
        height: 28px;
        margin-right: 20px;
        border: 1px solid #ccc;
      }
    }
  }
}
</style>