628 lines
16 KiB
Vue
628 lines
16 KiB
Vue
<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>
|
||
<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>
|
||
</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>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import mySwitch from '@/components/my-components/my-switch.vue';
|
||
import myButton from '@/components/my-components/my-button.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: '必填'
|
||
}
|
||
]
|
||
}
|
||
};
|
||
|
||
const quans = reactive([
|
||
{
|
||
value: 0,
|
||
text: '充值18元优惠券'
|
||
},
|
||
{
|
||
value: 1,
|
||
text: '邀新10元优惠券'
|
||
},
|
||
{
|
||
value: 2,
|
||
text: '10元新人券'
|
||
}
|
||
]);
|
||
|
||
// 构造规格的选项值的基础数据
|
||
const rechargeOptionsBasicData = {
|
||
quan: null,
|
||
quanNumber: 1
|
||
};
|
||
|
||
function returnOptionsBasicData() {
|
||
return {
|
||
...rechargeOptionsBasicData
|
||
};
|
||
}
|
||
// 构造规格的基础数据
|
||
const rechargeBasicData = {
|
||
GroupName: '',
|
||
miane: '',
|
||
jine: '',
|
||
jifen: '',
|
||
zengJie: '',
|
||
zengJifen: '',
|
||
isFirst: false,
|
||
options: [],
|
||
zengOptions: []
|
||
};
|
||
|
||
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;
|
||
}
|
||
}
|
||
};
|
||
}
|
||
|
||
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
|
||
});
|
||
});
|
||
});
|
||
}
|
||
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;
|
||
}
|
||
//判断验证是否通过
|
||
if (isAllPassForm === recharge.list.length) {
|
||
console.log('pass');
|
||
emitrechargeSave();
|
||
go.back();
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
page {
|
||
background: #f9f9f9;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
$icon-size: 34rpx;
|
||
$icon-line-width: 20rpx;
|
||
$icon-line-height: 4rpx;
|
||
|
||
.page {
|
||
background: #f9f9f9;
|
||
padding: 30rpx;
|
||
padding-bottom: 200rpx;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
</style>
|