czg_team/cashier_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成智慧充值模块

Browse Source
This commit is contained in:
gyq
2025-11-24 10:53:19 +08:00
parent e4f5cc8519
commit 046437ce54
14 changed files with 1342 additions and 1132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

760
pageRecharge/add-recharge-item.vue
View File

@@ -1,627 +1,201 @@
<template>
<view class="page">
<view class="box">
<view v-for="(item, index) in recharge.list" :key="index">
<uni-forms
:model="item"
:rules="rules"
err-show-type="undertext"
validateTrigger="blur"
:ref="setFormRef(index)"
:border="true"
label-position="top"
label-width="350"
>
<view class="block">
<uni-forms-item label="充值面额" required name="miane">
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" v-model="item.miane" placeholder="填输入面额" />
</uni-forms-item>
<uni-forms-item label="赠送金额">
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" v-model="item.jine" placeholder="请输入金额" />
</uni-forms-item>
<uni-forms-item label="赠送积分">
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" v-model="item.jifen" placeholder="请输入赠送积分" />
</uni-forms-item>
<uni-forms-item label="赠送券">
<view class="option">
<template v-if="item.options.length">
<view class="u-flex">
<view class="u-flex-1">赠送券</view>
<view class="u-flex-1 u-p-l-60">赠送数量</view>
</view>
<view class="">
<view class="u-flex option-item" v-for="(option, optionIndex) in item.options" :key="optionIndex">
<!-- <buton @tap="testVaildata(index,optionIndex)">test</buton> -->
<view class="u-flex-1">
<uni-forms-item
:key="optionIndex"
:name="['options', optionIndex, 'quan']"
:ref="setFormInputRef(index, optionIndex)"
:rules="[{ required: true, errorMessage: '赠送券必选' }]"
label-width="0"
label=""
required
>
<uni-data-select
v-model="recharge.list[index].options[optionIndex].quan"
:localdata="quans"
@change="inpuChange(index, optionIndex)"
></uni-data-select>
<!-- <uni-easyinput v-model="recharge.list[index].options[optionIndex].quan"
@input="inpuChange(index,optionIndex)"
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
placeholder="选项名" /> -->
</uni-forms-item>
</view>
<view class="u-p-l-60 u-flex-1 u-flex">
<uni-forms-item
:key="optionIndex"
:rules="[{ required: true, errorMessage: '必填' }]"
:ref="setFormInputRef(index, optionIndex)"
:name="['options', optionIndex, 'quanNumber']"
label-width="0"
label=""
required
>
<view class="u-flex">
<uni-easyinput
v-model="recharge.list[index].options[optionIndex].quanNumber"
@input="inpuChange(index, optionIndex)"
:placeholderStyle="placeholderStyle"
:inputBorder="inputBorder"
type="number"
placeholder="填写数量 张"
/>
<view class="icon icon-reduce u-m-l-38" @click="delOption(index, optionIndex)"></view>
</view>
</uni-forms-item>
</view>
</view>
</view>
</template>
<view class="u-flex u-m-t-32">
<view class="u-flex" @click="addOptions(index)">
<view class="icon icon-add u-m-r-22"></view>
<view class="color-main">添加</view>
</view>
</view>
</view>
</uni-forms-item>
<!-- <view class="u-flex u-m-t-48 u-m-b-24" @click="delrechargeGroup(index)">
<view class="icon icon-reduce u-m-r-22 ">
</view>
<view class="color-red">删除规格组</view>
</view> -->
</view>
<view class="block u-m-t-30" v-if="false">
<view class="u-p-t-30 u-p-b-30">
<view class="u-flex u-row-between">
<view class="">首冲赠送</view>
<view>
<my-switch v-model="item.isFirst"></my-switch>
</view>
</view>
<view class="color-999" v-if="item.isFirst">当用户首次充值时，仅赠送以下内容:</view>
<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>
<template v-if="item.isFirst">
<uni-forms-item label="赠送金额" required name="zengJie">
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" v-model="item.zengJie" placeholder="请输入金额" />
</uni-forms-item>
<uni-forms-item label="赠送积分" required name="zengJifen">
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" v-model="item.zengJifen" placeholder="请输入积分" />
</uni-forms-item>
<uni-forms-item label="赠送券">
<view class="option">
<template v-if="item.zengOptions.length">
<view class="u-flex">
<view class="u-flex-1">赠送券</view>
<view class="u-flex-1 u-p-l-60">赠送数量</view>
</view>
<view class="">
<view class="u-flex option-item" v-for="(option, optionIndex) in item.zengOptions" :key="optionIndex">
<!-- <buton @tap="testVaildata(index,optionIndex)">test</buton> -->
<view class="u-flex-1">
<uni-forms-item
:key="optionIndex"
:name="['zengOptions', optionIndex, 'quan']"
:ref="setFormInputRef(index, optionIndex)"
:rules="[{ required: true, errorMessage: '赠送券必选' }]"
label-width="0"
label=""
required
>
<uni-data-select
v-model="recharge.list[index].zengOptions[optionIndex].quan"
:localdata="quans"
@change="inpuChange(index, optionIndex)"
></uni-data-select>
<!-- <uni-easyinput v-model="recharge.list[index].options[optionIndex].quan"
@input="inpuChange(index,optionIndex)"
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
placeholder="选项名" /> -->
</uni-forms-item>
</view>
<view class="u-p-l-60 u-flex-1 u-flex">
<uni-forms-item
:key="optionIndex"
:rules="[{ required: true, errorMessage: '必填' }]"
:ref="setFormInputRef(index, optionIndex)"
:name="['zengOptions', optionIndex, 'quanNumber']"
label-width="0"
label=""
required
>
<view class="u-flex">
<uni-easyinput
v-model="recharge.list[index].zengOptions[optionIndex].quanNumber"
@input="inpuChange(index, optionIndex)"
:placeholderStyle="placeholderStyle"
:inputBorder="inputBorder"
type="number"
placeholder="填写数量 张"
/>
<view class="icon icon-reduce u-m-l-38" @click="delZengOption(index, optionIndex)"></view>
</view>
</uni-forms-item>
</view>
</view>
</view>
</template>
<view class="u-flex u-m-t-32">
<view class="u-flex" @click="addZengOptions(index)">
<view class="icon icon-add u-m-r-22"></view>
<view class="color-main">添加</view>
</view>
</view>
</view>
</uni-forms-item>
</template>
</view>
</uni-forms>
</u-form-item>
</view>
<!-- <view class="u-flex block u-p-l-20 u-p-r-20 u-p-t-28 u-p-b-28" @click="addrechargeGroup">
<view class="icon icon-add u-m-r-22 ">
</view>
<view class="color-main">添加规格组</view>
</view> -->
<view class="save-btn-box">
<my-button @tap="save" showShadow shape="circle">保存</my-button>
<view class="u-m-t-20">
<my-button @tap="back" type="cancel">取消</my-button>
</view>
</view>
</view>
<view style="height: 100rpx"></view>
<view class="bottom" ref="bottom"></view>
</u-form>
<my-footer-btn @confirm="submitHandle"></my-footer-btn>
</view>
</template>
<script setup>
import mySwitch from '@/components/my-components/my-switch.vue';
import myButton from '@/components/my-components/my-button.vue';
import { ref } from 'vue';
import go from '@/commons/utils/go.js';
import { onLoad, onReady } from '@dcloudio/uni-app';
import { onMounted, reactive, nextTick, ref, onBeforeMount } from 'vue';
// 表单样式
const placeholderStyle = ref('font-size:28rpx;');
//表单边框
const inputBorder = ref(false);
const form = ref(null);
const bottom = ref(null);
//表单验证
const rules = {
miane: {
rules: [
{
required: true,
errorMessage: '必填'
}
]
},
jine: {
rules: [
{
required: true,
errorMessage: '必填'
}
]
},
zengJie: {
rules: [
{
required: true,
errorMessage: '必填'
}
]
},
zengJifen: {
rules: [
{
required: true,
errorMessage: '必填'
}
]
},
jifen: {
rules: [
{
required: true,
errorMessage: '必填'
}
]
},
quan: {
rules: [
{
required: true,
errorMessage: '必填'
}
]
},
quanNumber: {
rules: [
{
required: true,
errorMessage: '必填'
}
]
}
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
};
const quans = reactive([
{
value: 0,
text: '充值18元优惠券'
},
{
value: 1,
text: '邀新10元优惠券'
},
{
value: 2,
text: '10元新人券'
}
]);
// 1添加 2编辑
const type = ref(1);
// 构造规格的选项值的基础数据
const rechargeOptionsBasicData = {
quan: null,
quanNumber: 1
};
function returnOptionsBasicData() {
return {
...rechargeOptionsBasicData
};
}
// 构造规格的基础数据
const rechargeBasicData = {
GroupName: '',
miane: '',
jine: '',
jifen: '',
zengJie: '',
zengJifen: '',
isFirst: false,
options: [],
zengOptions: []
id: '',
amount: '', // 充值金额
rewardAmount: '', // 赠送金额
rewardPoints: '', // 赠送积分
couponInfoList: []
};
function back() {
go.back();
}
function returnrechargeOptionsBasicData() {
return {
...rechargeBasicData,
options: [],
zengOptions: [returnOptionsBasicData()]
};
}
function onFieldChange(e) {
console.log(e);
}
// 规格列表
const recharge = reactive({
list: [returnrechargeOptionsBasicData()]
});
//添加规格组
function addrechargeGroup() {
recharge.list.push(returnrechargeOptionsBasicData());
scrollPageBottom();
}
//删除规格组
function delrechargeGroup(index) {
recharge.list.splice(index, 1);
}
// 向指定索引的优惠券添加规格项
function addOptions(index) {
recharge.list[index].options.push(returnOptionsBasicData());
}
// 向指定索引的赠送优惠券添加规格项
function addZengOptions(index) {
recharge.list[index].zengOptions.push(returnOptionsBasicData());
}
// 删除指定索引的优惠券添加规格项
function delOption(index, optionIndex) {
recharge.list[index].options.splice(optionIndex, 1);
}
// 删除指定索引的赠送优惠券添加规格项
function delZengOption(index, optionIndex) {
recharge.list[index].zengOptions.splice(optionIndex, 1);
}
//页面滚动到最底部
function scrollPageBottom() {
nextTick(() => {
uni.pageScrollTo({
duration: 100, // 过渡时间
scrollTop: 100000 // 滚动的实际距离
});
});
}
//设置表单验证规则
function setFormRules() {
form.value.setRules(rules);
}
const formRefs = ref([]);
//绑定表单元素
function setFormRef(index) {
formRefs.value[index] = null;
return (el) => {
if (el) {
formRefs.value[index] = el;
}
};
}
// 绑定option input元素
const refFormInput = ref([]);
function setFormInputRef(index, index1) {
const newIndex = 1000 + index * 10000 + index1;
return (el) => {
if (el) {
if (!refFormInput.value[newIndex]) {
refFormInput.value[newIndex] = el;
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 testVaildata(index, index1) {
const newIndex = 1000 + index * 10000 + index1;
recharge.list[0].options[0].quanNumber = 1;
refFormInput.value[newIndex] && refFormInput.value[newIndex].onFieldChange();
}
// 当表单内容输入变化根据配置的rules进行验证
function inpuChange(index, index1) {
const newIndex = 1000 + index * 10000 + index1;
refFormInput.value[newIndex] && refFormInput.value[newIndex].onFieldChange();
}
let emitName = '';
function triggerEvent(emitName, data) {
if (emitName) {
uni.$emit(emitName, data);
}
}
let type = 'add';
onLoad((opt) => {
const arr = uni.getStorageSync('guige');
if (arr.length) {
recharge.list = arr;
console.log(arr);
}
console.log(opt);
if (opt && JSON.stringify(opt) !== '{}' && opt.emitName) {
emitName = opt.emitName;
}
uni.setNavigationBarTitle({
title: type === 'add' ? '添加充值面额' : '编辑充值面额'
});
]
});
function emitrechargeSave() {
// emitrechargeSave 触发规格保存事件将数据给到添加商品页面
// guigeEdit 触发规格保存事件将数据给到添加规格页面
console.log('recharge.list', recharge.list);
uni.removeStorageSync('guige');
triggerEvent(emitName, recharge.list);
}
function returnPromise(index, prosise) {
return new Promise((resolve, reject) => {
prosise
.then((res) => {
console.log(res);
resolve({
sucees: true
});
})
.catch((err) => {
console.log(err);
resolve({
sucees: false
});
});
// 添加优惠券
function addCouponObj() {
form.value.couponInfoList.push({
id: '',
num: '',
title: ''
});
}
async function save() {
let isAllPassForm = 0;
for (let i in recharge.list) {
const res = await returnPromise(i, formRefs.value[i].validate());
isAllPassForm += res.sucees ? 1 : 0;
// 校验优惠券信息是否填写完整
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;
}
});
}
//判断验证是否通过
if (isAllPassForm === recharge.list.length) {
console.log('pass');
emitrechargeSave();
go.back();
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 scoped>
<style>
page {
background: #f9f9f9;
background: #f7f7f7;
}
</style>
<style lang="scss" scoped>
$icon-size: 34rpx;
$icon-line-width: 20rpx;
$icon-line-height: 4rpx;
.page {
background: #f9f9f9;
padding: 30rpx;
padding-bottom: 200rpx;
.container {
padding: 28upx;
}
.my-switch {
transform: scale(0.7);
}
::v-deep .uni-forms-item__error {
display: none !important;
}
::v-deep .option .uni-forms-item {
padding: 0;
min-height: inherit;
background-color: transparent;
border-top: none;
}
.icon {
width: $icon-size;
height: $icon-size;
position: relative;
border-radius: 50%;
&:before,
&::after {
position: absolute;
display: block;
content: '';
background-color: #fff;
}
}
.icon-add {
background-color: $my-main-color;
&::before {
width: $icon-line-height;
height: $icon-line-width;
top: calc(($icon-size / 2) - ($icon-line-width / 2));
left: calc(($icon-size / 2) - ($icon-line-height / 2));
}
&::after {
width: $icon-line-width;
height: 4rpx;
top: calc(($icon-size / 2) - ($icon-line-height / 2));
left: calc(($icon-size / 2) - ($icon-line-width / 2));
}
}
.icon-reduce {
background-color: $my-red-color;
&::after {
width: $icon-line-width;
height: $icon-line-height;
top: calc(($icon-size / 2) - ($icon-line-height / 2));
left: calc(($icon-size / 2) - ($icon-line-width / 2));
}
}
.label-title {
font-size: 28rpx;
font-weight: bold;
font-family: Source Han Sans CN, Source Han Sans CN;
}
.lh40 {
line-height: 40rpx;
}
.box {
margin-top: 70rpx;
font-size: 28rpx;
.block {
background: #ffffff;
border-radius: 18rpx 18rpx 18rpx 18rpx;
padding: 12rpx 24rpx;
margin-bottom: 32rpx;
}
}
.save-btn-box {
position: fixed;
left: 30rpx;
right: 30rpx;
bottom: 60rpx;
}
::v-deep.uni-forms-item {
align-items: inherit;
}
::v-deep .uni-forms-item .uni-forms-item__label {
text-indent: 0;
font-size: 28rpx !important;
font-weight: bold;
color: #333;
}
::v-deep .border-top-0 .uni-forms-item.is-direction-top {
border-color: transparent !important;
}
.save-btn {
background-color: $my-main-color;
color: #fff;
border-radius: 12rpx;
font-size: 28rpx;
}
.btn-hover-class {
opacity: 0.6;
}
.zuofa {
padding: 28rpx 0;
background: #f9f9f9;
padding-left: 42rpx;
border-radius: 14rpx 14rpx 14rpx 14rpx;
}
::v-deep .uni-input-placeholder {
font-size: 28rpx;
}
.option {
padding: 26rpx 30rpx 24rpx 24rpx;
background: #f9f9f9;
}
.option-item {
margin-bottom: 10rpx;
.column {
display: flex;
flex-direction: column;
gap: 20upx;
}
</style>