131 lines
3.3 KiB
Vue
131 lines
3.3 KiB
Vue
<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 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 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" src="./style/index.scss"></style>
|