FarmingWx_V2_message/pages/group/add.vue

<template>
  <div style="padding: 10px">
    <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>
    <u-loading-icon
      :show="loading"
      size="50"
      vertical
      text="加载中..."
      textSize="30"
      style="margin-top: 20px"
    ></u-loading-icon>
    <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 v-if="userInfo.userTypes.includes(4)" class="tag">
                    <image
                      style="width: 70px; height: 25px"
                      src="https://bucket.sxdirectpurchase.com/wx/static/images/my/tags/driver.png"
                      mode=""
                    />
                  </view>
                  <view v-else-if="userInfo.userTypes.includes(7)" class="tag">
                    <image
                      style="width: 70px; height: 25px"
                      src="https://bucket.sxdirectpurchase.com/wx/static/images/my/tags/supplier.png"
                      mode=""
                    />
                  </view>
                  <view v-else-if="userInfo.userTypes.includes(2)" class="tag">
                    <image
                      style="width: 70px; height: 25px"
                      src="https://bucket.sxdirectpurchase.com/wx/static/images/my/tags/supplier.png"
                      mode=""
                    />
                  </view>

                  <view v-else-if="userInfo.userTypes.includes(5)" class="tag">
                    <image
                      style="width: 70px; height: 25px"
                      src="https://bucket.sxdirectpurchase.com/wx/static/images/my/tags/agent.png"
                      mode=""
                    />
                  </view>

                  <view
                    v-else-if="userInfo.userTypes.includes(6)"
                    class="tag"
                  >
                  <image
                      style="width: 70px; height: 25px"
                      src="https://bucket.sxdirectpurchase.com/wx/static/images/my/tags/partner.png"
                      mode=""
                    />
                  </view>
                  <!-- <view>
                    {{
                      userInfo.userTypes.includes(2)
                        ? "供应商"
                        : userInfo.userTypes.includes(4)
                        ? "司机"
                        : userInfo.userTypes.includes(7)
                        ? "同城供应商"
                        : userInfo.userTypes.includes(8)
                        ? "同城司机"
                        : "采购商"
                    }}
                  </view> -->
                </view>
                <view class="phone">{{ userInfo.phone }}</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: "",
      loading: false,
    };
  },
  methods: {
    query() {
      this.loading = true;
      this.api.getUserInfoByPhone(this.phone).then((res) => {
        if (res.code === 200) {
          console.log(res);
          this.userInfo = res.data;
          this.loading = false;
        } else {
          this.loading = false;
        }
      });
    },
    addUser(record) {
      console.log(record.id);

      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(error),
            type: TOAST_TYPE.ERROR,
          });
        });
    },
  },
};
</script>

<style lang="scss" scope>
::v-deep .u-input {
  border: 1px solid #00d36e;
  border-radius: 20px;
}
.tag {
  margin-left:10px
  // padding: 0px 20rpx;
  // height: 45rpx;
  // border-radius: 4rpx;
  // display: flex;
  // flex-direction: row;
  // justify-content: center;
  // align-items: center;
  // font-size: 24rpx;
  // color: #ffffff;
  // width: 100px;
  // margin-left: 5px;
}
.main {
  .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    background: white;
    .left {
      width: 20%;
      .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 {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
      }
      .phone {
        font-weight: 600;
        font-size: 28rpx;
        color: #999999;
      }
    }
  }
}
</style>