277 lines
5.8 KiB
Vue
277 lines
5.8 KiB
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> |