chat-app/src/pages/creatGroupChat/index.vue

<template>
  <div class="outer-layer">
    <div>
      <tm-navbar :hideBack="false" hideHome title="发起群聊" :leftWidth="320">
      </tm-navbar>
    </div>
    <div class="root">
      <div class="w-full pl-[32rpx] pr-[32rpx]" >
        <div class="w-full mt-[60rpx] flex justify-center" >
          <div v-if="!groupChatType" class="avatar-placeholder">
            
          </div>
          <div class="mb-[40rpx]" v-else>
            <tm-image
              :width="192"
              :height="192"
              :round="12"
              :src="avatarImg"
            ></tm-image>
          </div>
        </div>
        <div class="input-group">
          <div class="input-item">
            群名称
          </div>
          <div class="input-box" >
            <tm-input 
              :followTheme="false" 
              color="#fff" 
              placeholderStyle="color: #B4B4B4"
              focusColor="#FFF" 
              :fontSize="28"
              :maxlength="20"
              :transprent="true" 
              placeholder="请输入群名称（1~20个字）"
              :padding="[0]"
            >
            </tm-input>
          </div>
        </div>
        <div class="input-group mt-[20rpx]">
          <div class="input-item">
            群类型
          </div>
          <div @click="chooseGroupType" class="left-box" >
            <div class="text-[#B4B4B4] text-[28rpx]" >
              请选择群类型
            </div>
            <div class="ml-[32rpx]" >
              <tm-icon :font-size="22" color="#747474" name="tmicon-angle-right"></tm-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="h-[162rpx] flex justify-center bg-[#FFFFFF]">
        <div class="mt-[14rpx]" >
          <tm-button 
            color="#46299D" 
            disabled="true"
            disabledColor="#E6E6E6"
            :margin="[0]"
            :shadow="0" 
            :width="426"
            :height="76"
            size="large" 
            label="按钮"
          >
          </tm-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch, computed } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { useChatList } from "@/store/chatList/index.js";
import { useAuth } from "@/store/auth";
import { useTalkStore, useUserStore } from "@/store";
import addCircle from "@/static/image/chatList/addCircle.png";
import cahtPopover from "@/static/image/chatList/cahtPopover.png";
import zu4992 from "@/static/image/chatList/zu4992@2x.png";
import zu4991 from "@/static/image/chatList/zu4991@2x.png";
import zu4989 from "@/static/image/chatList/zu4989@2x.png";

const talkStore = useTalkStore();
const userStore = useUserStore();
const { userInfo } = useAuth();

const groupChatName = ref("");
const groupChatType = ref('');

const avatarImg = computed(() => {
  let srcT = "";
  switch (groupChatType.value) {
    case '普通群':
      srcT = zu4992;
      break;
    case '项目群':
      srcT = zu4991;
      break;
    case '部门群':
      srcT = zu4989;
      break;
    default:
      srcT = zu4992;
  }
  return srcT;
})

const chooseGroupType = () => {
  uni.navigateTo({
    url: '/pages/chooseGroupType/index'
  })
}


</script>
<style scoped lang="scss">
uni-page-body,
page {
  height: 100%;
}
.outer-layer {
  overflow-y: auto;
  flex: 1;
  background-image: url("@/static/image/clockIn/z3280@3x.png");
  background-size: cover;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}
.root {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.divider{
  height: 1rpx;
  background-color: #7C7C7C;
  opacity: 0.6;
}
.avatar-placeholder {
  width: 192rpx;
  height: 192rpx;
  background-color: #e0e0e0;
  border-radius: 50%;
  margin-bottom: 40rpx;
}
.input-group {
  height: 110rpx;
  background-color: #fff;
  padding-left: 32rpx;
  padding-right: 40rpx;
  display: flex;
  align-items: center;
}
.input-item {
  line-height: 54rpx;
  font-size: 28rpx;
  color: #000;
  font-weight: bold;
}
.input-box {
  margin-left: 84rpx;
  width: 404rpx;

}
.left-box {
  margin-left: 290rpx;
  display: flex;
  align-items: center;
}
</style>