Initial commit

pages/contact/applicationList/ApplicationItem.vue

@@ -0,0 +1,246 @@
+<template>
+  <view @click="clickItem" class="application_item">
+    <my-avatar
+      :src="getAvatarUrl"
+      :isGroup="isGroupApplication"
+      :desc="application[isRecv ? 'fromNickname' : 'toNickname']"
+      size="42"
+    />
+    <view class="application_item_details">
+      <view class="content">
+        <text class="user_name">{{ getShowName }}</text>
+
+        <view v-if="isGroupApplication" class="title">
+          申请加入
+          <text class="group_name">{{ application.groupName }}</text>
+        </view>
+        <text class="req_message">{{ application.reqMsg }}</text>
+      </view>
+
+      <view class="application_action">
+        <text v-if="showStateStr" class="status_tip">{{ getStateStr }}</text>
+        <text v-if="showGreet" @tap.stop="greetToUser" class="status_tip greet"
+          >打招呼</text
+        >
+        <button
+          :loading="accessLoading"
+          v-if="showAccept"
+          class="access_btn"
+          @tap.stop="acceptApplication"
+          type="primary"
+          :plain="true"
+          size="mini"
+        >
+          {{ isGroupApplication ? "同意" : "接受" }}
+        </button>
+      </view>
+
+      <view class="bottom_line"> </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { navigateToDesignatedConversation } from "@/util/imCommon";
+import IMSDK, { SessionType } from "openim-uniapp-polyfill";
+import MyAvatar from "@/components/MyAvatar/index.vue";
+export default {
+  name: "ApplicationItem",
+  components: {
+    MyAvatar,
+  },
+  props: {
+    application: Object,
+    isRecv: Boolean,
+  },
+  data() {
+    return {
+      accessLoading: false,
+    };
+  },
+  computed: {
+    isGroupApplication() {
+      return this.application.groupID !== undefined;
+    },
+    getShowName() {
+      if (this.isRecv) {
+        return this.application[
+          this.isGroupApplication ? "nickname" : "fromNickname"
+        ];
+      }
+      return this.application[
+        this.isGroupApplication ? "groupName" : "toNickname"
+      ];
+    },
+    showGreet() {
+      return !this.isGroupApplication && this.application.handleResult === 1;
+    },
+    showStateStr() {
+      if (
+        (this.isRecv && this.application.handleResult === 0) ||
+        this.showGreet
+      ) {
+        return false;
+      }
+      return true;
+    },
+    showAccept() {
+      return this.application.handleResult === 0 && this.isRecv;
+    },
+    getStateStr() {
+      if (this.application.handleResult === -1) {
+        return "已拒绝";
+      }
+      if (this.application.handleResult === 0) {
+        return "等待验证";
+      }
+      return "已同意";
+    },
+    getAvatarUrl() {
+      if (this.isGroupApplication) {
+        return this.application.groupFaceURL;
+      }
+      return this.application[this.isRecv ? "fromFaceURL" : "toFaceURL"];
+    },
+  },
+  methods: {
+    clickItem() {
+      if (this.showAccept) {
+        uni.navigateTo({
+          url: `/pages/contact/applicationDetails/index?application=${JSON.stringify(
+            this.application,
+          )}`,
+        });
+      } else {
+        let sourceID =
+          this.application.groupID ??
+          (this.isRecv
+            ? this.application.fromUserID
+            : this.application.toUserID);
+        let cardType = this.isGroupApplication ? "groupCard" : "userCard";
+        const url = `/pages/common/${cardType}/index?sourceID=${sourceID}`;
+        uni.navigateTo({
+          url,
+        });
+      }
+    },
+    acceptApplication() {
+      this.accessLoading = true;
+      let func;
+      if (this.isGroupApplication) {
+        func = IMSDK.asyncApi(
+          IMSDK.IMMethods.AcceptGroupApplication,
+          IMSDK.uuid(),
+          {
+            groupID: this.application.groupID,
+            fromUserID: this.application.userID,
+            handleMsg: "",
+          },
+        );
+      } else {
+        func = IMSDK.asyncApi(
+          IMSDK.IMMethods.AcceptFriendApplication,
+          IMSDK.uuid(),
+          {
+            toUserID: this.application.fromUserID,
+            handleMsg: "",
+          },
+        );
+      }
+      func
+        .then(() => uni.$u.toast("操作成功"))
+        .catch(() => uni.$u.toast("操作失败"))
+        .finally(() => (this.accessLoading = false));
+    },
+    greetToUser() {
+      navigateToDesignatedConversation(
+        this.application[this.isRecv ? "fromUserID" : "toUserID"],
+        SessionType.Single,
+      ).catch(() => uni.$u.toast("获取会话信息失败"));
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.application_item {
+  // @include vCenterBox();
+  display: flex;
+  justify-content: flex-start;
+  padding: 24rpx 44rpx;
+  color: $uni-text-color;
+  background-color: #fff;
+
+  &_details {
+    @include vCenterBox();
+    margin-left: 24rpx;
+    width: 100%;
+    position: relative;
+
+    .content {
+      @include colBox(false);
+      font-size: 26rpx;
+      width: 100%;
+
+      .user_name {
+        @include nomalEllipsis();
+        max-width: 400rpx;
+        font-size: 28rpx;
+        color: $uni-text-color;
+        margin-bottom: 10rpx;
+      }
+
+      .req_message {
+        @include ellipsisWithLine(2);
+        max-width: 80%;
+        color: #999;
+      }
+
+      .title {
+        margin-bottom: 20rpx;
+        word-break: break-all;
+        width: 75%;
+
+        .group_name {
+          margin-left: 12rpx;
+          color: $uni-color-primary;
+        }
+      }
+    }
+
+    .application_action {
+      position: absolute;
+      right: 0;
+
+      .status_tip {
+        font-size: 28rpx;
+        color: #666;
+      }
+
+      .access_btn {
+        padding: 0 12rpx;
+        height: 48rpx;
+        line-height: 48rpx;
+      }
+
+      .greet {
+        color: #418ae5;
+      }
+    }
+
+    .bottom_line {
+      height: 1px;
+      width: 100%;
+      background-color: #f0f0f0;
+      position: absolute;
+      bottom: -24rpx;
+    }
+  }
+}
+
+.u-list-item:last-child {
+  .bottom_line {
+    height: 0;
+  }
+}
+</style>