bigDataApp/pages/cbqxyj/addressbook.vue

<template>
  <view>
    <view class="booxbox">
      <view class="booxbox_item">
        <view class=""> 姓名 </view>
        <view class="booxbox_item_input">
          <u-input v-model="username" maxlength="15" />
        </view>
      </view>
      <view class="booxbox_item">
        <view class=""> 手机号 </view>
        <view class="booxbox_item_input">
          <u-input v-model="userphone" maxlength="15" />
        </view>
      </view>
      <view class="adduser" @click="add"> 添加 </view>
    </view>
    <view class="booxlist">
      <view class="booxlist_tiele"> 通讯录 </view>
      <view class="booxlist_item" v-for="item in userlist" :key="item.d_id">
        <view class="booxlist_item_f">
          {{ item.liaisons }}
        </view>
        <view class="booxlist_item_t">
          {{ item.phone }}
        </view>
        <view class="booxlist_item_i">
          <u-icon
            name="minus-circle"
            color="#FB4E4E"
            size="34"
            @click="del(item.d_id)"
          ></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      userphone: '',
      userlist: [],
    };
  },
  methods: {
    async getuserlist() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=device.device_sms_alert.user_warning_liaisons_list',
        data: {
          page: '1',
          page_size: '99999999',
        },
      });
      console.log(res);
      this.userlist = res.data;
    },
    async add() {
      if (this.username == '') {
        uni.showToast({
          title: '请填写姓名',
          icon: 'none',
        });
      } else if (this.userphone == '') {
        uni.showToast({
          title: '请填写手机号',
          icon: 'none',
        });
      } else if (!/^1(1|2|3|4|5|6|7|8|9)\d{9}$/.test(this.userphone)) {
        uni.showToast({
          title: '请选择正确的手机号格式',
          icon: 'none',
        });
      } else {
        const res = await this.$myRequest({
          url: '/api/api_gateway?method=device.device_sms_alert.create_user_warning_liaisons',
          data: {
            phone: this.userphone,
            user_name: this.username,
          },
        });
        if (res) {
          uni.showToast({
            title: '创建成功',
            icon: 'none',
          });
          this.getuserlist();
        }
      }
    },
    async del(id) {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=device.device_sms_alert.del_user_warning_liaisons',
        data: {
          d_id: id,
        },
      });
      if (res) {
        uni.showToast({
          title: '删除成功',
          icon: 'none',
        });
        this.getuserlist();
      }
    },
  },
  onLoad() {
    this.getuserlist();
  },
};
</script>

<style lang="less">
page {
  background-color: #f6f6fb;
}
.booxbox {
  width: 95%;
  margin: 20rpx auto;
  background-color: #fff;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 5px;
  .booxbox_item {
    display: flex;
    line-height: 70rpx;
    justify-content: space-between;
    border-bottom: 1rpx solid #f2f2f2;
    padding: 20rpx 0;
    .booxbox_item_input {
      width: 70%;
      ::v-deep .uni-input-input {
        text-align: right;
      }
    }
  }
  .adduser {
    margin: 30rpx auto 20rpx;
    width: 80%;
    background-color: #14a478;
    padding: 20rpx 0;
    border-radius: 59px;
    text-align: center;
    color: #fff;
  }
}
.booxlist {
  width: 95%;
  margin: 20rpx auto;
  background-color: #fff;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 5px;
  .booxlist_tiele {
    border-left: 8rpx solid #14a478;
    padding-left: 30rpx;
    margin-bottom: 30rpx;
  }
  .booxlist_item {
    display: flex;
    border-top: 1rpx solid #f2f2f2;
    padding: 30rpx 0;
    .booxlist_item_f {
      width: calc(100% - 320rpx);
      text-align: left;
      overflow: hidden; //溢出隐藏
      white-space: nowrap; //禁止换行
      text-overflow: ellipsis; //...
    }
    .booxlist_item_t {
      width: 270rpx;
      text-align: left;
    }
    .booxlist_item_i {
      width: 50rpx;
      text-align: center;
    }
  }
}
</style>