红包需要添加样式

TUIKit/components/TUIChat/message-input-toolbar/red-envelope/index.vue

@@ -1,20 +1,130 @@
 <script setup lang="ts">
+  import { computed, reactive, ref } from '../../../../adapter-vue'
   import ToolbarItemContainer from '../toolbar-item-container/index.vue'
   import custom from '../../../../assets/icon/red-packet.svg'
   import { isUniFrameWork } from '../../../../utils/env'
 
-  const evaluateIcon = custom;
+  const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666; font-size: 32rpx; font-style: normal; text-transform: none;`
+
+  const evaluateIcon = custom
+
+  /** 提示框 */
+  const message = ref()
+  const container = ref()
+  const formData = reactive({
+    //  积分
+    integral: '',
+    // 红包标题
+    title: ''
+  })
+
+  /** 监听积分输入值 */
+  const monitorPoints = computed(() => {
+    const data = {
+      valid: false,
+      message: ''
+    }
+    if (!formData.integral) {
+      data.valid = true
+      data.message = '请输入积分'
+      message.value.open()
+      return data
+    }
+    if (Number(formData.integral) > 2000) {
+      data.valid = true
+      data.message = '积分不能大于2000'
+      message.value.open()
+      return data
+    }
+
+    return data
+  })
+
+  const onDialogShow = () => {
+    console.log('弹出窗口')
+    formData.integral = ''
+    formData.title = ''
+  }
+
+  const onDialogClose = () => {
+    console.log('关闭窗口')
+  }
+
+  const closeDialog = () => {
+    container?.value?.toggleDialogDisplay(false)
+  }
+
+  const onSubmit = () => {
+    if (!formData.integral) return
+    console.log('确认')
+  }
 </script>
 
 <template>
   <ToolbarItemContainer
+    ref="container"
+    needBottomPopup
     :iconFile="evaluateIcon"
     :iconWidth="isUniFrameWork ? '26px' : '20px'"
     :iconHeight="isUniFrameWork ? '26px' : '20px'"
     title="红包"
+    @onDialogShow="onDialogShow"
+    @onDialogClose="onDialogClose"
   >
-    <view>弹出窗口</view>
+    <view class="red-envelope">
+      <view class="top-title">
+        <text class="title">发红包</text>
+        <uni-icons
+          type="closeempty"
+          color="#333333"
+          size="24"
+          @click.stop="closeDialog"
+        ></uni-icons>
+      </view>
+      <!-- 输入框 -->
+      <view
+        :class="{ 'on-reminder': monitorPoints.valid }"
+        class="input-box"
+      >
+        <text>积分</text>
+        <input
+          v-model="formData.integral"
+          :placeholder-style="placeholderStyle"
+          confirm-type="done"
+          type="number"
+          placeholder="0.00"
+          @confirm="onSubmit"
+        />
+      </view>
+
+      <view class="input-box title-box">
+        <input
+          v-model="formData.title"
+          :placeholder-style="placeholderStyle"
+          placeholder="恭喜发财，大吉大利"
+        />
+      </view>
+
+      <!-- 底部显示 -->
+      <view class="bottom-box">
+        <view class="text-box">
+          <text>积分：</text>
+          <text v-if="formData.integral">{{ formData.integral }}</text>
+          <text v-else>0.00</text>
+        </view>
+        <button class="btn" @click.stop="onSubmit">塞进红包</button>
+      </view>
+    </view>
+
+    <!-- 提示框 -->
+    <uni-popup ref="message" type="message">
+      <uni-popup-message
+        type="error"
+        :message="monitorPoints.message"
+        :duration="2000"
+      ></uni-popup-message>
+    </uni-popup>
   </ToolbarItemContainer>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss" src="./style/index.scss"></style>