opms_wechat/components/DistrContact.vue

<!--
  * @Author: liuzhenlin 461480418@qq.ocm
  * @Date: 2023-02-15 10:34:49
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-05-22 17:32:58
  * @Description: file content
 * @FilePath: \oms\components\DistrContact.vue
 -->
<template>
  <view>
    <u-popup :show="selectVisible" @close="close">
      <view class="select-header">
        <view class="tit">选择{{ distrType == '50' ? '经销商' : '代理商' }}联系人</view>
        <view class="save-btn" @click="close()">保存</view>
      </view>
      <view class="search-container">
        <view class="search-input">
          <u-input
            clearable
            placeholderStyle="font-size:26rpx"
            :customStyle="{ height: '66rpx' }"
            v-model="name"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
            placeholder="请输入联系人名称"
            shape="circle"
            @input="getUserList()"
            border="surround"></u-input>
        </view>
      </view>
      <u-empty mode="list" v-if="userList.length == 0"></u-empty>
      <view class="concat-list" v-else>
        <u-radio-group v-model="userValue" placement="column">
          <view class="radio-item" v-for="item in userList" :key="item.id">
            <u-radio :label="item.name" :name="item.id" @change="radioChange"></u-radio>
          </view>
        </u-radio-group>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import distrApi from '@/api/base/distr'
  import to from 'await-to-js'
  export default {
    name: 'OmsCustomerContact',
    props: {
      distrType: {
        type: String | Number,
        required: true,
      },
    },
    data() {
      return {
        selectVisible: false,
        userList: [],
        // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
        userValue: null,
        selected: null,
        distId: 0,
        name: '',
      }
    },

    methods: {
      async getUserList() {
        const params = {
          distId: this.distId,
          name: this.name,
        }
        const [err, res] = await to(distrApi.getContactList(params))
        if (err) return
        if (res.code == 200) {
          this.userList = res.data.list
        }
      },
      open(id) {
        this.distId = id
        this.selectVisible = true
        this.getUserList()
      },
      close() {
        this.selectVisible = false
        this.$emit('close', this.selected)
      },
      radioChange(n) {
        this.selected = this.userList.find((item) => item.id == n)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .search-container {
    padding: 30rpx 30rpx 0 30rpx;
    display: flex;
    align-items: center;
    .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;
    }
  }
  .concat-list {
    padding: 0 0 20rpx 0;
    width: 100%;
    height: 900rpx;
    overflow: auto;
    margin-top: 30rpx;
    .radio-item {
      padding: 20rpx 30rpx;
      border-bottom: 1px solid #ccc;
    }
  }
</style>