@zfqh/uniapp 0.1.1

package/lib/components/g-trtc-tui/g-trtc-tui.vue

@@ -0,0 +1,245 @@
+<template>
+  <g-mask :show="visible" :customStyle="maskStyle" :maskClickAble="false">
+    <g-trtc-room
+      ref="room"
+      v-if="roomId"
+      :title="profile.title"
+      :avatar="profile.avatar"
+      :description="profile.description"
+      :roomId="roomId"
+      :appId="imInfo.appId"
+      :userId="imInfo.userId"
+      :userSig="imInfo.userSig"
+      :callType="callType"
+      @zoom="zoom"
+      @hangup="hangup"
+      @accept="accept"
+      @leave="hangup('leave')"
+    />
+  </g-mask>
+</template>
+
+<script>
+import TUIChatEngine, { TUIUserService, TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
+
+export default {
+  props: {
+    // 房间名称
+    title: {
+      type: String,
+      default: '',
+    },
+    // 房间头像
+    avatar: {
+      type: String,
+      default: '',
+    },
+    // 房间简介
+    description: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      float: false,
+      roomId: 0,
+      callType: 1,
+      calling: {
+        conversationID: '',
+        conversationType: '',
+      },
+      inviter: {},
+      userList: [],
+    };
+  },
+  watch: {
+    visible(e) {
+      if (e) {
+        this.$refs.room?.createBells();
+      } else {
+        this.$refs.room?.destroyBells();
+      }
+    },
+  },
+  computed: {
+    maskStyle() {
+      if (this.float) {
+        // 解决缩小通话界面无法点击底部问题
+        return { width: 0, height: 0 };
+      } else {
+        return {};
+      }
+    },
+    imInfo() {
+      return this.$store.state.im.info;
+    },
+    profile() {
+      const inviter = this.inviter || {};
+      const title = this.title || inviter.nick;
+      const avatar = this.avatar || inviter.avatar;
+      const description = this.description || inviter.description;
+      return {
+        title,
+        avatar,
+        description,
+      };
+    },
+  },
+  methods: {
+    zoom(e) {
+      this.float = e;
+    },
+    hangup(type) {
+      const { data, callData, conversationID, conversationType } = this.calling;
+      const { room } = this.$refs;
+      if (room.duration) {
+        data.actionType = 1;
+        callData.call_end = room.duration;
+        if (type === 'leave') {
+          this.sendMessage({
+            conversationID,
+            conversationType,
+            data,
+            callData,
+          });
+          uni.showToast({
+            icon: 'none',
+            position: 'bottom',
+            title: '对方已挂断，通话结束',
+          });
+        }
+      } else {
+        data.actionType = 4;
+        this.sendMessage({
+          conversationID,
+          conversationType,
+          data,
+          callData,
+        });
+      }
+      this.visible = false;
+      setTimeout(() => {
+        this.roomId = 0;
+      }, 500);
+    },
+    accept() {
+      const { data, callData, conversationID, conversationType } = this.calling;
+      this.sendMessage({
+        conversationID,
+        conversationType,
+        data: {
+          ...data,
+          actionType: 3,
+        },
+        callData,
+      });
+    },
+    async getMemberList(e) {
+      try {
+        const userIDList = e.map(({ userID }) => userID);
+        const { data } = await TUIUserService.getUserProfile({ userIDList });
+        this.userList = data;
+      } catch (e) {}
+    },
+    sendMessage({ data, callData, conversationID, conversationType }) {
+      TUIChatEngine.chat.sendMessage(
+        TUIChatEngine.chat.createCustomMessage({
+          conversationType,
+          to: conversationID.substring(conversationType.length),
+          payload: {
+            data: JSON.stringify({
+              ...data,
+              data: JSON.stringify(callData),
+            }),
+          },
+        }),
+      );
+    },
+    receivedMessage(event) {
+      event.data.forEach((message) => {
+        const { conversationID, conversationType, flow, type, from, payload } = message;
+        if (type === TUIChatEngine.TYPES.MSG_CUSTOM) {
+          try {
+            const data = JSON.parse(payload.data);
+            // 1呼叫、1结束（call_end > 0）、2挂断、3接听、4拒接、4忙线（line_busy="line_busy"）、5无人接听
+            if (data.actionType != null) {
+              const callData = JSON.parse(data.data || '{}');
+              if (flow === 'in') {
+                TUIChatEngine.chat.setMessageRead({
+                  conversationID,
+                });
+                if (data.actionType === 1) {
+                  // 对方发起音视频通话
+                  if (!callData.call_end) {
+                    if (!this.visible) {
+                      // 当前未通话
+                      this.inviter = this.userList.find(({ userID }) => userID === from);
+                      if (this.inviter) {
+                        // 通话发起人是群成员，才能显式通话界面
+                        this.visible = true;
+                        this.callType = callData.call_type;
+                        this.roomId = callData.room_id;
+                        this.calling = {
+                          conversationID,
+                          conversationType,
+                          data,
+                          callData,
+                        };
+                      }
+                    } else {
+                      // 通话中，提示忙线
+                      this.sendMessage({
+                        conversationID,
+                        conversationType,
+                        data: {
+                          ...data,
+                          actionType: 4,
+                        },
+                        callData: {
+                          ...callData,
+                          line_busy: 'line_busy',
+                        },
+                      });
+                    }
+                  } else {
+                    // 自己结束通话
+                    this.visible = false;
+                  }
+                } else if (conversationID === this.calling.conversationID) {
+                  if ([2, 4, 5].includes(data.actionType)) {
+                    this.visible = false;
+                    uni.showToast({
+                      icon: 'none',
+                      position: 'bottom',
+                      title: '对方取消通话',
+                    });
+                  }
+                }
+              } else {
+                // 其他设备接听或挂断，当前设备关闭通话
+                if ([3, 4].includes(data.actionType)) {
+                  this.visible = false;
+                }
+              }
+            }
+          } catch (e) {}
+        }
+      });
+    },
+  },
+  mounted() {
+    TUIStore.watch(StoreName.GRP, {
+      currentGroupMemberList: this.getMemberList,
+    });
+    TUIChatEngine.chat.on(TUIChatEngine.EVENT.MESSAGE_RECEIVED, this.receivedMessage);
+  },
+  beforeUnmount() {
+    TUIStore.unwatch(StoreName.GRP, {
+      currentGroupMemberList: this.getMemberList,
+    });
+    TUIChatEngine.chat.off(TUIChatEngine.EVENT.MESSAGE_RECEIVED, this.receivedMessage);
+  },
+};
+</script>

package/lib/components/g-upload/g-upload.vue

@@ -0,0 +1,294 @@
+<template>
+  <view class="upload" :style="[_customStyle]">
+    <view
+      v-for="(item, i) in list"
+      :key="i"
+      class="upload-item"
+      :class="[item.title ? 'has-title' : '']"
+      :style="[_itemStyle]"
+      @tap="previewImage(item)"
+    >
+      <view class="upload-loading" v-if="!item.url" :style="[_loadingStyle]">
+        <uv-loading-icon mode="circle" :size="loadingSize" />
+      </view>
+      <view v-if="!disabled" class="upload-close" @tap.stop="removeFile(item, i)" :style="[_closeStyle]">
+        <uv-icon name="close-circle-fill" :size="closeSize" :color="closeColor" />
+      </view>
+      <view class="upload-title" v-if="item.title">
+        <text>{{ item.title }}</text>
+      </view>
+      <image :src="item.path || compress(item.url)" style="max-width: 100%; max-height: 100%" mode="aspectFit" />
+    </view>
+    <template v-if="!disabled">
+      <view v-if="list.length < count" class="upload-item" :style="[_itemStyle]" @tap="$uv.throttle(chooseImage)">
+        <slot name="default">
+          <uv-icon name="plus" :size="iconSize" :color="iconColor" />
+        </slot>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script>
+import { cosCompress } from '../../utils';
+import { requestPermission } from '../../utils/permit';
+import deep from '../../mixins/deep';
+import model from '../../mixins/model';
+import color from '../../configs/color';
+
+export default {
+  mixins: [
+    deep,
+    model({
+      type: Array,
+      default: null,
+    }),
+  ],
+  props: {
+    files: {
+      type: Array,
+      default: () => [],
+    },
+    size: {
+      type: [String, Number],
+      default: 70,
+    },
+    iconSize: {
+      type: [String, Number],
+      default: 30,
+    },
+    iconColor: {
+      type: String,
+      default: () => color.borderColor,
+    },
+    loadingSize: {
+      type: [String, Number],
+      default: 20,
+    },
+    col: {
+      type: [String, Number],
+      default: 4,
+    },
+    count: {
+      type: [String, Number],
+      default: 8,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    custom: {
+      type: Boolean,
+      default: false,
+    },
+    border: {
+      type: Boolean,
+      default: true,
+    },
+    borderStyle: {
+      type: String,
+      default: 'solid',
+    },
+    borderColor: {
+      type: String,
+      default: () => color.borderColor,
+    },
+    borderRadius: {
+      type: [String, Number],
+      default: 4,
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    itemStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    gutter: {
+      type: [Array, Number, String],
+      default: () => 8,
+    },
+    bgColor: {
+      type: String,
+      default: '#fff',
+    },
+    closeSize: {
+      type: [String, Number],
+      default: 16,
+    },
+    closeColor: {
+      type: String,
+      default: () => color.contentColor,
+    },
+    closeStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    action: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      list: this.files,
+    };
+  },
+  computed: {
+    _gutter({ gutter }) {
+      return [].concat(gutter);
+    },
+    _customStyle({ _gutter, col, customStyle }) {
+      const [_row, _col] = _gutter;
+      return Object.assign(
+        {
+          display: col ? 'grid' : 'flex',
+          gridGap: `${uni.$uv.addUnit(_row)} ${uni.$uv.addUnit(_col || _row)}`,
+          gridTemplateColumns: new Array(Number(col))
+            .fill(undefined)
+            .map(() => '1fr')
+            .join(' '),
+        },
+        customStyle,
+      );
+    },
+    _itemStyle({ itemStyle, borderColor, borderStyle, border, borderRadius, bgColor, size }) {
+      const style = {
+        height: uni.$uv.addUnit(size),
+        width: uni.$uv.addUnit(size),
+        borderRadius: uni.$uv.addUnit(borderRadius),
+        backgroundColor: bgColor,
+      };
+      if (border) {
+        style.border = `1px ${borderStyle} ${borderColor}`;
+      }
+      return Object.assign(style, itemStyle);
+    },
+    _loadingStyle({ borderRadius }) {
+      return {
+        borderRadius: uni.$uv.addUnit(borderRadius),
+      };
+    },
+    _closeStyle({ closeSize, closeStyle }) {
+      const unit = String(closeSize).replace(/\d+/, '');
+      const offsetValue = uni.$uv.addUnit(-1 * (parseFloat(closeSize) / 2) + unit);
+      return Object.assign(
+        {
+          top: offsetValue,
+          right: offsetValue,
+        },
+        closeStyle,
+      );
+    },
+  },
+  watch: {
+    files: {
+      immediate: true,
+      handler(e) {
+        this.list = e;
+      },
+    },
+    value: {
+      immediate: true,
+      handler(e) {
+        if (e) {
+          if (e.length !== this.list.length) {
+            this.list = e.map((url) => ({ url }));
+          } else {
+            e?.forEach((url, i) => {
+              this.list[i].url = url;
+            });
+          }
+        }
+      },
+    },
+    list(e) {
+      this.$emit('update:files', e);
+      this.updateModel(e.map(({ url }) => url || ''));
+    },
+  },
+  methods: {
+    compress(url) {
+      if (url) {
+        let width = parseFloat(this.size);
+        if (String(this.size).endsWith('rpx')) {
+          width = uni.upx2px(width);
+        }
+        return cosCompress(url, `${width}x`);
+      }
+      return '';
+    },
+    previewImage({ path, url }) {
+      uni.previewImage({
+        urls: this.list.map(({ path, url }) => path || url),
+        current: path || url,
+        longPressActions: true,
+      });
+    },
+    removeFile(file, index) {
+      this.list = this.list.slice(0, index).concat(this.list.slice(index + 1));
+    },
+    chooseSuccess({ tempFiles }) {
+      const newList = [];
+      tempFiles.forEach((file) => {
+        if (/\.(png|jpg|jpeg|gif|bmp|webp)$/i.test(file.name || file.path)) {
+          newList.push(file);
+          this.action(file)?.then((data) => {
+            this.list = this.list.map((item) => {
+              if (item.path === file.path) {
+                file.url = data.url;
+                return file;
+              }
+              return item;
+            });
+          });
+        }
+      });
+      this.list = this.list.concat(newList);
+    },
+    async chooseImage() {
+      const count = this.count - this.list.length;
+      if (this.custom) {
+        this.$emit('choose', { count });
+      } else {
+        await requestPermission('storage');
+        await requestPermission('camera');
+        uni.chooseImage({
+          count,
+          success: this.chooseSuccess,
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.upload {
+  flex-wrap: wrap;
+  &-item {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  &-close {
+    position: absolute;
+    z-index: 1;
+  }
+  &-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+  }
+}
+</style>

package/lib/components/g-waterfall/g-waterfall.vue

@@ -0,0 +1,101 @@
+<template>
+  <view class="flex items-start" id="waterfall-container">
+    <view class="flex-1 w-0" id="waterfall-column-left">
+      <slot name="left" :data="leftList" :props="props"></slot>
+    </view>
+    <view class="flex-1 w-0" id="waterfall-column-right" :style="[marginStyle]">
+      <slot name="right" :data="rightList" :props="props"></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    gutter: {
+      type: [String, Number],
+      default: 16,
+    },
+    props: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      leftList: [],
+      rightList: [],
+      tempList: [],
+    };
+  },
+  watch: {
+    list(newList, oldList) {
+      if (newList.length > oldList.length && this.leftList.length > 0) {
+        this.push(newList.slice(oldList.length));
+      } else {
+        this.update(newList);
+      }
+    },
+  },
+  computed: {
+    marginStyle({ gutter }) {
+      return {
+        marginLeft: uni.$uv.addUnit(gutter),
+      };
+    },
+  },
+  methods: {
+    async calc(data) {
+      if (!data) {
+        return;
+      }
+      let leftRect = { height: 0 };
+      let rightRect = { height: 0 };
+      if (this.leftList.length) {
+        leftRect = await this.$uvGetRect('#waterfall-column-left');
+      }
+      if (this.rightList.length) {
+        rightRect = await this.$uvGetRect('#waterfall-column-right');
+      }
+      if (rightRect.height < leftRect.height || (!this.rightList.length && this.leftList.length > 0)) {
+        this.rightList = this.rightList.concat(data);
+      } else {
+        this.leftList = this.leftList.concat(data);
+      }
+      await this.$nextTick();
+      // #ifdef MP
+      await this.$uvGetRect('#waterfall-container');
+      // #endif
+      if (this.tempList.length) {
+        const [data] = this.tempList.splice(0, 1);
+        this.calc(data);
+      }
+    },
+    push(list) {
+      this.tempList = [].concat(list);
+      const [data] = this.tempList.splice(0, 1);
+      this.$nextTick(() => {
+        this.calc(data);
+      });
+    },
+    clear() {
+      this.leftList = [];
+      this.rightList = [];
+      this.tempList = [];
+    },
+    update(list) {
+      this.clear();
+      this.push(list);
+    },
+  },
+  mounted() {
+    this.push(this.list);
+  },
+};
+</script>
+
+<style></style>

package/lib/configs/api.d.ts

@@ -0,0 +1,7 @@
+/** 接口配置 */
+declare const api: {
+    /** 接口请求地址 */
+    baseUrl: string;
+};
+export type ApiConfig = Partial<typeof api>;
+export default api;

package/lib/configs/api.js

@@ -0,0 +1,6 @@
+/** 接口配置 */
+const api = {
+    /** 接口请求地址 */
+    baseUrl: '',
+};
+export default api;

package/lib/configs/app.d.ts

@@ -0,0 +1,26 @@
+/** 应用配置 */
+declare const $app: {
+    /** 应用标识 */
+    code: string;
+    /** 应用名称 */
+    name: string;
+    /** 应用主题色 */
+    primary: string;
+    /** APP应用ID */
+    appId: string;
+    /** 小程序应用ID */
+    weappId: string;
+    /** 小程序应用原始ID */
+    weappOrigId: string;
+    /** 应用渠道标识 */
+    channel: number;
+};
+type App = typeof $app;
+type Keys = keyof App;
+export type AppConfig = {
+    [key in Keys]?: string;
+};
+export declare const app: {
+    [key in 'patient' | 'doctor' | 'merchant']: App;
+};
+export default $app;