baiyuApp/pages_im/pages/conversation/chating/components/ChatingFooter/SelectLuckBag.vue

<template>
	<view>
		<u-popup :show="show" mode="center" bgColor="transparent" @close="close"
			:customStyle="{background: 'transparent'}">
			<view class="luck-bag-container">
				<!-- 顶部福袋图片 -->
				<image class="bag-image" src="/pages_im/static/images/luckyBag/lucky_bag_img.png"></image>

				<!-- 主体内容区域 -->
				<view class="content-box">
					<view>
						<image class="lucky_bag_font" src="/pages_im/static/images/luckyBag/lucky_bag_font.png" mode="">
						</image>
					</view>

					<!-- 福袋个数 -->
					<view class="form-item es-mt-32" @click="selectCount">
						<text class="label">福袋</text>
						<view class="input-wrap">
							<text v-if="count" class="value">{{ count }}</text>
							<text v-else class="placeholder">请选择</text>
							<u-icon name="arrow-right" color="#999" size="14"></u-icon>
						</view>
					</view>

					<!-- 提交按钮 -->
					<view class="submit-btn" @click="submit">
						<text class="btn-text">塞进福袋</text>
					</view>
				</view>

				<!-- 关闭按钮 -->
				<view class="close-btn" @click="close">
					<image class="es-icon-64" src="/pages_im/static/images/luckyBag/close_tc_icon.png" mode=""></image>
				</view>
			</view>
		</u-popup>

		<!-- 个数选择器 -->
		<u-picker :show="showPicker" keyName="name" :columns="pickerColumns" @confirm="confirmPicker"
			@cancel="showPicker = false" @close="showPicker = false"></u-picker>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	import {
		parseMessageByType
	} from '@/pages_im/util/imCommon';
	import IMSDK, {
		IMMethods,
		MessageStatus
	} from 'openim-uniapp-polyfill';
	import {
		luckyBagList,
		createFdMiniLink,
		receiveLuckyBag
	} from '@/pages_im/api/luckyBag.js'
	export default {
		name: 'SelectLuckBag',
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			...mapGetters(['storeCurrentConversation'])
		},
		data() {
			return {
				count: '',
				showPicker: false,
				list: [],
				pickerColumns: []
			}
		},
		methods: {
			...mapActions('message', ['pushNewMessage', 'updateOneMessage']),
			close() {
				this.$emit('close');
			},
			async selectCount() {
				let companyUserInfo = uni.getStorageSync('companyUserInfo')
				const companyId = companyUserInfo && JSON.parse(companyUserInfo).companyId
				const res = await luckyBagList({
					companyId
				})
				if (res.code == 200) {
					this.list = res.rows
					this.pickerColumns = [res.rows.map(item => item.name)]
					this.showPicker = true;
				} else {
					uni.showToast({
						icon: 'non',
						title: res.msg
					})
				}
			},
			confirmPicker(e) {
				this.count = e.value[0];
				this.luckyBagId = this.list[e.indexs[0]].id;
				this.showPicker = false;
			},
			async submit() {
				if (!this.count) {
					return uni.showToast({
						title: '请选择福袋',
						icon: 'none'
					});
				}
				let companyUserInfo = uni.getStorageSync('companyUserInfo')
				companyUserInfo = companyUserInfo && JSON.parse(companyUserInfo)
				let params = {
					companyId: companyUserInfo.companyId,
					luckyBagId: this.luckyBagId,
					companyUserId: companyUserInfo.userId
				}
				let that = this
				const res = await createFdMiniLink(params)
				if (res.code == 200) {
					if (!res.data.recordId) return
					let payloadJson = {
						payload: {
							data: "luckyBag",
							extension: {
								isReceived: false,
								nickName: companyUserInfo.nickName,
								userName: companyUserInfo.userName,
								companyId: companyUserInfo.companyId,
								avatar: companyUserInfo.avatar,
								recordId: res.data.recordId || '',
							}
						}
					};
					let forwardMessage = {
						data: JSON.stringify(payloadJson),
						extension: '',
						description: 'luckyBag'
					};
					let message = await IMSDK.asyncApi(IMMethods.CreateCustomMessage, IMSDK.uuid(), forwardMessage);
					that.pushNewMessage(message);

					let offlinePushInfo = {
						title: message.senderNickname,
						desc: parseMessageByType(message),
						ex: "",
						iOSPushSound: "",
						iOSBadgeCount: true
					};
					IMSDK.asyncApi(IMMethods.SendMessage, IMSDK.uuid(), {
						recvID: that.storeCurrentConversation.userID,
						groupID: that.storeCurrentConversation.groupID,
						message,
						offlinePushInfo
					}).then(({
						data
					}) => {
						that.close();
						that.updateOneMessage({
							message: data,
							isSuccess: true
						});
					}).catch(({
						data,
						errCode,
						errMsg
					}) => {
						that.updateOneMessage({
							message: data,
							type: UpdateMessageTypes.KeyWords,
							keyWords: [{
									key: 'status',
									value: MessageStatus.Failed
								},
								{
									key: 'errCode',
									value: errCode
								}
							]
						});
					});
				} else {
					uni.showToast({
						icon: 'non',
						title: res.msg
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.luck-bag-container {
		width: 600rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		.bag-image {
			width: 100%;
			height: 308rpx;
			z-index: 10;
			margin-bottom: -50rpx; // 让图片下沉覆盖到红框上
		}

		.content-box {
			width: 100%;
			background: linear-gradient(180deg, #FD303D 0%, #FEB6A7 99.99%);
			border-radius: 30rpx;
			padding: 90rpx 40rpx 50rpx 40rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);

			.lucky_bag_font {
				width: 240rpx;
				height: 80rpx;
			}

			.form-item {
				width: 100%;
				height: 100rpx;
				background: #fff;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				box-sizing: border-box;
				margin-bottom: 16rpx;

				.label {
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
				}

				.input-wrap {
					display: flex;
					align-items: center;
					flex: 1;
					justify-content: flex-end;

					.value {
						font-size: 32rpx;
						color: #333;
						margin-right: 10rpx;
					}

					.placeholder {
						font-size: 30rpx;
						color: #999;
						margin-right: 10rpx;
					}

					.input {
						text-align: right;
						font-size: 32rpx;
						color: #333;
						width: 100%;
						height: 100%;
					}
				}
			}

			.submit-btn {
				width: 100%;
				height: 108rpx;
				background-image: url('@/pages_im/static/images/luckyBag/lucky_bag_btn.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 32rpx;

				.btn-text {
					margin-bottom: 20rpx;
					font-size: 40rpx;
					color: #fff;
					font-weight: bold;
					text-shadow: 0 2rpx 4rpx rgba(186, 76, 0, 0.3);
				}
			}
		}

		.close-btn {
			margin-top: 50rpx;
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>