jiuyiUniapp/jiuyi2/pages/news/redPacket.vue

<script setup>
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
	} from 'vue';
	import {
		useStore
	} from 'vuex'
	// 
	import api from '@/api/index'
	// 
	import util from '@/common/js/util.js'
	import {
		onLoad,
		onReady
	} from "@dcloudio/uni-app"
	// 二级密码
	import payPwd from '@/components/mine/payPwd.vue'

	// 
	const store = useStore()
	// 
	const {
		proxy
	} = getCurrentInstance()
	// 红包表单
	const form = reactive({
		status: 0,
		totalAmount: '',
		totalCount: '',
	})
	// 金额类型列表
	const priceList = reactive([{
		id: 2,
		name: '积分红包',
	}, {
		id: 1,
		name: '余额红包',
	}])
	// 金额类型下标
	const priceIndex = ref(0)

	// 红包类型
	const typeList = reactive([{
		id: 0,
		name: '普通红包',
	}, {
		id: 1,
		name: '拼手气红包',
	}])
	// 红包类型下标
	const typeIndex = ref(0)

	// 红包祝福语
	const greeting = ref('恭喜发财，大吉大利')
	// 群成员数量
	const groupNum = ref('')
	// 红包类型
	const typeCurrent = computed(() => {
		let result = typeList[typeIndex.value]
		return result
	})
	// 金额类型
	const priceCurrent = computed(() => {
		let result = priceList[priceIndex.value]
		return result
	})
	// 格式化总价
	const formatTotal = computed(() => {
		let result = Number(form.totalAmount || 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) {
			// 1私聊 2群聊
			form.sendType = type
			form[{
				1: 'toId',
				2: 'groupId',
			} [type]] = option.msgId
		}
		// 群成员人数
		if (option.num) groupNum.value = option.num
	})

	onReady(() => {
		// proxy.$refs.payPwdRef.open()
	})

	// 切换红包类型
	function handleTypeIndex(ev) {
		const index = ev.detail.value
		if (index === typeIndex.value) return
		typeIndex.value = index
	}

	// 切换金额发送下标
	function handlePriceIndex(ev) {
		const index = ev.detail.value
		if (index === priceIndex.value) return
		priceIndex.value = index
	}

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

	/**
	 * 发布红包
	 * @param {Object} secPwd 二级密码
	 */
	function handleSubmit(secPwd) {
		// 
		const data = {
			...form
		}
		console.log('data', data)

		if (data.sendType == 2) {
			if (!data.totalCount) {
				util.alert('数量不能为空')
				return
			}
			if (Number(data.totalCount) > Number(groupNum.value)) {
				util.alert('红包数量不能大于群成员数量')
				return
			}
		}
		if (!data.totalAmount) {
			util.alert('总金额不能为空')
			return
		}
		// 红包数量
		if (!data.totalCount) data.totalCount = 1
		// 红包祝福语
		if (!data.blessing) data.blessing = greeting.value
		// 如果大于32
		if (data.blessing.length > 32) {
			util.alert('祝福语不能超过32个字')
			return
		}
		// 金额类型
		data.payType = priceCurrent.value.id
		// 发送人id
		data.userId = userinfo.value.id
		// 群成员
		data.limitColumn = groupNum.value

		console.log('data', data)

		// 发送红包
		api.news.sendRedPacket({
			query: {
				// 二级密码
				secondLevelCipher: secPwd,
				// 红包类型
				type: typeCurrent.value.id
			},
			data,
		}).then(rs => {
			if (rs.code == 200) {
				uni.navigateBack()
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 发送红包
	function handleSend() {
		// 支付二级密码
		proxy.$refs.payPwdRef.open()
	}
</script>

<template>
	<view class="app">
		<view class="container">
			<template v-if="form.sendType == 2">
				<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>
			</template>

			<picker mode="selector" :range="priceList" range-key="name" @change="handlePriceIndex">
				<view class="form-group rows mtb30 ptb25 bfff">
					<view>金额类型：</view>
					<view class="f1 tar mr10">{{ priceCurrent.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="form.totalAmount" 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.totalCount" 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 class="fs0">祝福语：</text>
				<view class="f1 tar">
					<textarea class="textarea f34" maxlength="100" auto-height="auto" v-model="form.blessing" :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="handleSend">发送红包</view>
		</view>
	</view>

	<!-- 红包接口 -->
	<payPwd ref="payPwdRef" @confirm="handleSubmit" />
</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;
		}
	}

	// 多行文本框
	.textarea {
		width: 100%;
	}
</style>