opms_wechat/pages/project/components/contacts.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-02-16 11:31:40
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-02-21 10:00:48
 * @Description: file content
 * @FilePath: \frontend_mobile\pages\project\components\contacts.vue
-->
<template>
  <view class="contact-main">
    <view class="search-container">
      <view class="search-input">
        <u-input
          clearable
          placeholderStyle="font-size:26rpx"
          :customStyle="{ height: '66rpx' }"
          v-model="queryForm.cuctName"
          prefixIcon="search"
          prefixIconStyle="font-size: 22px;color: #909399"
          placeholder="请输入姓名"
          shape="circle"
          border="surround"
          @change="change"></u-input>
      </view>
      <view class="search-btn" @click="getContacts()">搜索</view>
    </view>
    <view class="todo-list">
      <u-empty mode="list" v-if="contactList.length == 0"></u-empty>
      <view v-else v-for="(v, i) in contactList" :key="i">
        <view class="contact-item">
          <view class="flex_l">
            <view class="label">姓名：</view>
            <view class="val">{{ v.cuctName }}</view>
          </view>
          <view class="flex_l">
            <view class="label">岗位：</view>
            <view class="val">{{ v.postion }}</view>
          </view>
          <view class="flex_l">
            <view class="label">电话：</view>
            <view class="val">{{ v.telephone }}</view>
          </view>
          <view class="flex_l">
            <view class="label">微信：</view>
            <view class="val">{{ v.wechat }}</view>
          </view>
          <view class="flex_l">
            <view class="label">邮箱：</view>
            <view class="val">{{ v.email }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import to from 'await-to-js'
  import userApi from '../../../api/system/user'
  export default {
    name: 'OmsCustomerDetail',
    props: {
      projectId: {
        type: [String, Number],
        default: '0',
      },
    },
    data() {
      return {
        queryForm: {
          busId: this.projectId,
          cuctName: '',
          pageNum: 1,
          pageSize: 9999,
        },
        contactList: [],
      }
    },

    mounted() {
      this.getContacts()
    },

    methods: {
      async getContacts() {
        const [err, res] = await to(userApi.getProjectContact(this.queryForm))
        if (err) return
        if (res.code == 200) this.contactList = res.data.list || []
      },
    },
  }
</script>

<style lang="scss" scoped>
  .contact-main {
    height: 100%;
    .search-container {
      display: flex;
      align-items: center;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #ccc;
      .search-input {
        flex: 1;
      }
      .search-btn {
        text-align: center;
        line-height: 60rpx;
        border-radius: 12rpx;
        width: 100rpx;
        height: 60rpx;
        font-size: 26rpx;
        margin: 0 0 0 12rpx;
        background: $u-primary;
        color: #ffffff;
      }
    }
    .todo-list {
      height: 100%;
      overflow: auto;
      padding: 20rpx 20rpx 0;
      .contact-item {
        padding: 20rpx;
        box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
        border-radius: 8px;
        margin: 30rpx 0;
        .label,
        .val {
          font-size: 28rpx;
          padding-bottom: 14rpx;
        }
        .label {
          color: #646464;
        }
      }
    }
  }
</style>