jiuyiUniapp/jiuyi/pages/news/redPacket.vue

<script setup>
	import {
		ref,
		reactive,
		computed,
	} from 'vue';
	import {
		useStore
	} from 'vuex'
	// 
	import api from '@/api/index'
	// 
	import util from '@/common/js/util.js'
	import {
		onLoad,
	} from "@dcloudio/uni-app"
	const store = useStore()
	// 
	const form = reactive({
		status: 0,
	})
	// 红包类型列表
	const typeList = reactive([{
		id: 1,
		name: '积分红包',
	}, {
		id: 2,
		name: '余额红包',
	}])
	// 红包金额
	const total = ref('')
	// 红包祝福语
	const greeting = ref('恭喜发财，大吉大利')
	// 群成员数量
	const groupNum = ref('')
	// 红包类型下标
	const typeIndex = ref(0)
	// 当前下标
	const typeCurrent = computed(() => {
		let result = typeList[typeIndex.value]
		return result
	})
	// 格式化总价
	const formatTotal = computed(() => {
		let result = Number(total.value || 0)
		result = result.toFixed(2)
		return result
	})
	// 用户信息
	const userinfo = computed(() => {
		let result = store.state.userinfo
		return result
	})

	onLoad((option) => {
		const type = option.sendType
		if (type) {
			form.sendType = type
			form[{
				1: 'sendId',
				2: 'roomId',
			} [type]] = option.msgId
			// 
			if (type == 2) getGroup()
		}
	})

	// 获取群信息
	function getGroup() {
		// 验证sdk是否准备完毕
		let isReady = uni.$chat.isReady();

		if (!isReady && userinfo.value.userId) {
			setTimeout(function() {
				getGroup()
			}, 200);
			return
		}

		uni.$chat.getGroupProfile({
			groupID: form.roomId,
		}).then(rs => {
			if (rs.code == 0) {
				const result = rs.data.group
				groupNum.value = result.memberCount
			}
		})
	}

	// 切换下标
	function handleTypeIndex(ev) {
		const index = ev.detail.value
		if (index === typeIndex.value) return
		typeIndex.value = index
	}

	// 发送数量监听
	function onNumBlur() {
		if (form.num > groupNum.value) form.num = groupNum.value
	}

	// 发布红包
	function handleSubmit() {
		// 
		const data = {
			...form
		}

		if (data.sendType == 2) {
			if (!data.num) {
				util.alert('数量不能为空')
				return
			}
		}
		if (!total.value) {
			util.alert('总金额不能为空')
			return
		}
		// 积分或余额
		data[{
			1: 'score',
			2: 'balance',
		} [typeCurrent.value.id]] = total.value
		// 红包祝福语
		if (!data.name) data.name = greeting.value
		// 类型
		data.type = typeCurrent.value.id
		// 发送人id
		data.userId = userinfo.value.userId
		console.log('data', data)

		// 
		api.news.sendRedBag({
			data,
		}).then(rs => {
			if (rs.code == 200) {
				uni.navigateBack()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>

<template>
	<view class="app">
		<view class="container">
			<picker mode="selector" :range="typeList" range-key="name" @change="handleTypeIndex">
				<view class="form-group rows mtb30 ptb25 bfff">
					<view>红包类型：</view>
					<view class="f1 tar mr10">{{ typeCurrent.name }}</view>
					<uni-icons type="right" />
				</view>
			</picker>

			<view class="form-group rows mtb30 bfff">
				<text>总金额：</text>
				<view class="easyinput f1 tar">
					<input class="f34" type="text" v-model="total" placeholder="0.00" />
				</view>
			</view>

			<!-- 群聊才有 -->
			<view class="mtb30 " v-if="form.sendType == 2">
				<view class="form-group rows bfff">
					<text>数量：</text>
					<view class="easyinput f1 tar">
						<input class="f34" type="text" v-model="form.num" placeholder="填写个数" @blur="onNumBlur" />
					</view>
					<view class="ml10">个</view>
				</view>
				<view class="hint mt10 ml20 f24 c999" v-if="groupNum">本群{{groupNum}}共人</view>
			</view>

			<view class="form-group rows mtb30 bfff">
				<text>祝福语：</text>
				<view class="f1 tar">
					<input class="f34" type="text" v-model="form.name" :placeholder="greeting" />
				</view>
			</view>

			<view class="total df jcc mt30 ptb50">
				<text>￥</text>
				<text>{{ formatTotal }}</text>
			</view>
			<view class="btn-primary btn plus mauto" @click="handleSubmit">发送红包</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	// 
	.container {
		padding: 0 20rpx;

		.form-group {
			padding: 30rpx 30rpx;
			font-size: 34rpx;
			border-radius: 20rpx;
		}

		.total {
			font-size: 72rpx;
			font-weight: bold;
		}

		.btn-primary {
			width: 400rpx;
			background: #FB5352;
			color: #fff;
		}
	}
</style>