index.vue

<!--用户投资产品-->
<template>
  <div>
    <p style="text-align: center; font-size: 28px">请选择产品</p>
    <el-select v-model="selects" placeholder="请选择产品" class="pull">
      <el-option
        :label="item.productName"
        :value="item.productId"
        v-for="(item, index) in productlist"
        :key="index"
      ></el-option>
    </el-select>
    <p style="text-align: center; font-size: 28px">请选择人员</p>
    <el-autocomplete
      v-model="state"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>


  <div style="text-align: center; font-size: 20px" >
    <p>用户列表</p>
  <p v-show="username">{{identityId}}/{{username}}
    <el-divider></el-divider></p>

  </div>
    <el-row class="btn">
      <el-button type="primary" @click="sub">确定</el-button>
      <el-button @click="quxiao">取消</el-button>
    </el-row>
    <!--  <button @click="click1">12313123</button>-->
  </div>
</template>

<script>
import { gettouzi, getprudect, buy } from "@/api/ops/user/touzi";
export default {
  dicts: ['sys_normal_disable'],
  data() {
    return {
      id: null,
      selects: "",
      restaurants: [],
      state: "",
      timeout: null,
      productlist: "",
      data: {},
      identityId:"",
      username:'',


    };
  },

  methods: {
    quxiao(){

      this.$message({
        message: '已取消',
        center: true
      });
      this.state=''
      this.selects=''
      this.username=''
      this.identityId=''
    },

    sub() {
      let data = {
        userId: this.id,
        productId: this.selects,
      };
      buy(data).then((res) => {
        console.log(res.code);
        if (res.code == 200) {
          this.$message({
            message: '新增成功',
            type: "success",
          });
        }
      });
      this.state=''
      this.selects=''
      this.username=''
      this.identityId=''
      // console.log(data)
    },

    getprudectlist() {
      getprudect().then((res) => {
        console.log(res.rows);
        this.productlist = res.rows;
      });
    },
    querySearchAsync(queryString, cb) {
      clearTimeout(this.timeout);
      var results = [];
      if (queryString == "") {
        cb(results);
      } else {
        //掉接口需要的参数
        var find = {
          search: queryString, //上面输入框绑定的数据
        };
        //这里去掉后端的接口.根据自己接口的情况进行赋值
        gettouzi(find).then((res) => {
          if (res.code == 200) {
            var result = res.rows;

            //循环放到一个远程搜索需要的数组
            for (let i = 0; i < result.length; i++) {
              const element = result[i];
              results.push({
                identityId:element.identityId,
                value: element.userName,
                id: element.userId,
                username:element.userName
              });
            }
            cb(results);
          } else {
            results = [];
            cb(results);
          }
        });
      }
    },

    createStateFilter(queryString) {
      return (state) => {
        gettouzi({ search: queryString }).then((res) => {

          console.log(res.rows)
          return res.rows.userName;

        });
      };
    },
    handleSelect(item) {

      if(item.identityId){
        this.identityId='已实名'
      }else {
        this.identityId='未实名'
      }
      // this.identityId=item.identityId
      this.id = item.id;
      this.username=item.username
      console.log(1, item.username);
    },
  },
  created() {
    gettouzi().then((res) => {
      console.log(res.rows)})
    this.getprudectlist();
  },
};
</script>
<style scoped lang="scss">
.el-autocomplete {
  width: 100%;
}
.btn {
  margin-top: 25px;
  text-align: center;
  width: 100%;
  //margin: auto;
}
.pull {
  width: 100%;
}
</style>