cashier_app/pageRecharge/add-recharge-item.vue

<template>
	<view class="container">
		<u-form ref="formRef" label-position="top" labelWidth="200" :model="form" :rules="rules">
			<view class="u-form-card">
				<u-form-item label="充值面额" prop="amount">
					<u-input border="bottom" placeholder="请输入充值面额" v-model="form.amount" @change="amountInput" :customStyle="inputStyle"></u-input>
				</u-form-item>
				<u-form-item label="赠送金额">
					<u-input border="bottom" placeholder="请输入赠送金额" v-model="form.rewardAmount" @change="rewardAmountInput" :customStyle="inputStyle"></u-input>
				</u-form-item>
				<u-form-item label="赠送积分">
					<u-input border="bottom" placeholder="请输入赠送积分" v-model="form.rewardPoints" @change="rewardPointsInput" :customStyle="inputStyle"></u-input>
				</u-form-item>
				<u-form-item label="赠送券">
					<view class="column">
						<view>
							<coupon-list v-model="form.couponInfoList" tips="张"></coupon-list>
						</view>
						<view>
							<view style="width: 80px">
								<u-button plain icon="plus" @click="addCouponObj">添加</u-button>
							</view>
						</view>
					</view>
				</u-form-item>
			</view>
		</u-form>
		<my-footer-btn @confirm="submitHandle"></my-footer-btn>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import go from '@/commons/utils/go.js';
import { onLoad, onReady } from '@dcloudio/uni-app';
import CouponList from './components/coupon-list.vue';
import { filterNumberInput } from '@/utils/index.js';
import { shopRechargeGet, shopRechargePost } from '@/http/api/market/index.js';

const inputStyle = {
	paddingLeft: 0
};

// 1添加 2编辑
const type = ref(1);

// 构造规格的基础数据
const rechargeBasicData = {
	id: '',
	amount: '', // 充值金额
	rewardAmount: '', // 赠送金额
	rewardPoints: '', // 赠送积分
	couponInfoList: []
};

const formRef = ref(null);
const form = ref({ ...rechargeBasicData });
const rules = ref({
	amount: [
		{
			required: true,
			trigger: ['blur'],
			message: '请输入充值面额',
			validator: (rule, value, callback) => {
				if (form.value.amount < 0 || form.value.amount === '') {
					return false;
				} else {
					return true;
				}
			}
		}
	]
});

// 添加优惠券
function addCouponObj() {
	form.value.couponInfoList.push({
		id: '',
		num: '',
		title: ''
	});
}

// 校验优惠券信息是否填写完整
function isCouponPass(data) {
	let flag = true;
	if (data.couponInfoList.length) {
		data.couponInfoList.forEach((item) => {
			if (!item.num || item.num == '' || item.num <= 0 || item.id == '') {
				flag = false;
				return flag;
			}
		});
	}
	return flag;
}

// 保存
function submitHandle() {
	formRef.value
		.validate()
		.then(async (res) => {
			try {
				if (!isCouponPass(form.value)) {
					uni.showToast({
						title: '请填写优惠券信息',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '保存中...',
					mask: true
				});

				const data = await shopRechargeGet();
				data.rechargeDetailList.forEach((item) => {
					item.couponInfoList.forEach((val) => {
						if (val.coupon && val.coupon !== null) {
							val.id = val.coupon.id;
							val.title = val.coupon.title;
						}
					});
				});

				if (type.value == 1) {
					data.rechargeDetailList.push(form.value);
				} else {
					let index = data.rechargeDetailList.findIndex((item) => item.id == form.value.id);
					data.rechargeDetailList[index] = form.value;
				}

				await shopRechargePost(data);
				uni.showToast({
					title: '保存成功',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1000);
			} catch (error) {
				console.log(error);
			}
			setTimeout(() => {
				uni.hideLoading();
			}, 500);
		})
		.catch((err) => {});
}

function amountInput(e) {
	setTimeout(() => {
		form.value.amount = filterNumberInput(e);
	}, 50);
}

function rewardAmountInput(e) {
	setTimeout(() => {
		form.value.rewardAmount = filterNumberInput(e);
	}, 50);
}

function rewardPointsInput(e) {
	setTimeout(() => {
		form.value.rewardPoints = filterNumberInput(e, 1);
	}, 50);
}

function getStorageObj() {
	let data = uni.getStorageSync('rechargeCouponInfoListDetail');
	if (data.amount) {
		uni.setStorageSync('rechargeCouponInfoListDetail', '');
		type.value = 2;
		form.value.id = data.id;
		form.value.amount = data.amount;
		form.value.rewardAmount = data.rewardAmount;
		form.value.rewardPoints = data.rewardPoints;
		form.value.couponInfoList = data.couponInfoList;
	}
}

onLoad(() => {
	getStorageObj();
});
</script>
<style>
page {
	background: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.container {
	padding: 28upx;
}
.column {
	display: flex;
	flex-direction: column;
	gap: 20upx;
}
</style>