FarmingWx_V2_message/pages/group/add.vue

<template>
  <div style="padding-top: 20px">
    <u--input
      placeholder="请输入手机号"
      prefixIcon="search"
      prefixIconStyle="font-size: 22px;color: #909399"
      border="surround"
      v-model="phone"
    >
      <template slot="suffix">
        <u-button
          @click="query"
          text="搜索"
          style="
            height: 30px;
            border-radius: 20px;
            background: linear-gradient(87deg, #28d141 0%, #28ef8c 100%);
            color: white;
          "
        ></u-button>
      </template>
    </u--input>
    <div v-if="userInfo">
      <view class="main">
        <view class="item">
          <view class="left">
            <img :src="userInfo.headUrl" alt="" class="img" />
          </view>
          <view class="right">
            <view class="right_contont">
              <view style="width: 80%">
                <view class="title">{{ userInfo.nick }}</view>
              </view>
              <view @click="addUser(userInfo)">
                <u-button
                  type="primary"
                  text="添加"
                  color="linear-gradient( 275deg, #01CF6C 0%, #07E278 100%)"
                  shape="circle"
                  style="height: 30px"
                ></u-button>
              </view>
            </view>
            <view class="remake"> {{ userInfo.introduction }} </view>
          </view>
        </view>
      </view>
    </div>
  </div>
</template>

<script>
import TUIChatEngine, {
  TUIFriendService,
  TUIConversationService,
  TUIGroupService,
  TUIUserService,
  TUITranslateService,
  AddFriendParams,
  JoinGroupParams,
} from "@tencentcloud/chat-uikit-engine";
import { Toast, TOAST_TYPE } from "../../TUIKit/components/common/Toast/index";
export default {
  data() {
    return {
      phone: "",
      userInfo: "",
    };
  },
  methods: {
    query() {
      this.api.getUserInfoByPhone(this.phone).then((res) => {
        if (res.code === 200) {
          console.log(res);
          this.userInfo = res.data;
        }
      });
    },
    addUser(record) {
      let params = {
        remark: "",
        source: "AddSource_Type_Web",
        to: JSON.stringify(record.id),
        wording: "",
      };
      TUIFriendService.addFriend(params)
        .then(() => {
          Toast({
            message: TUITranslateService.t("TUIContact.申请已发送"),
            type: TOAST_TYPE.SUCCESS,
          });
        })
        .catch((error) => {
          console.log(error);
          Toast({
            message: TUITranslateService.t("TUIContact.申请发送失败"),
            type: TOAST_TYPE.ERROR,
          });
        });
    },
  },
};
</script>

<style lang="scss" scope>
::v-deep .u-input {
  border: 1px solid #00d36e;
  border-radius: 20px;
}
.main {
  .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 20px;
    background: white;
    .left {
      width: 20%;
      margin-right: 10px;
      .img {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
      }
    }
    .right {
      width: 80%;
      line-height: 25px;
      .remake {
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
      }
      .right_contont {
        display: flex;
        flex-direction: row;
        align-items: center;
        .gys {
          width: 168rpx;
          height: 28rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #ff8b2f;
          line-height: 28rpx;
          font-style: normal;
        }
        .cgs {
          width: 168rpx;
          height: 28rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #00d36d;
          line-height: 28rpx;
          font-style: normal;
        }
      }
      .value {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 60rpx;
      }
      .title {
        font-weight: 600;
        font-size: 32rpx;
        color: #333333;
      }
    }
  }
}
</style>