优化智慧充值
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view>
|
||||
<up-radio-group v-model="useType" placement="row">
|
||||
<up-radio-group v-model="useType" placement="row" @change="useTypeChange">
|
||||
<up-radio v-for="item in useTypeList" :key="item.value" :name="item.value" :label="item.label" :customStyle="customStyle"></up-radio>
|
||||
</up-radio-group>
|
||||
<view class="box" v-if="useType == 'part'" @click.stop="openPopup">
|
||||
@@ -44,7 +44,7 @@ const customStyle = ref({
|
||||
});
|
||||
|
||||
const show = ref(false);
|
||||
const selShops = defineModel('selShops', {
|
||||
let selShops = defineModel('selShops', {
|
||||
default: () => [],
|
||||
type: Array
|
||||
});
|
||||
@@ -63,6 +63,11 @@ const useTypeList = [
|
||||
}
|
||||
];
|
||||
|
||||
const emits = defineEmits(['useTypeChange']);
|
||||
function useTypeChange(e) {
|
||||
emits('useTypeChange', e);
|
||||
}
|
||||
|
||||
function returnShopName(shopId) {
|
||||
const item = list.value.find((v) => v.shopId == shopId);
|
||||
return item?.shopName || '';
|
||||
|
||||
@@ -153,3 +153,27 @@ export function couponGetRecord(params) {
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 智慧充值规/配置信息修改
|
||||
* @param {Object} data
|
||||
*/
|
||||
export function shopRechargePost(data) {
|
||||
return request({
|
||||
url: `${urlType}/admin/shopRecharge`,
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 智慧充值规/配置信息获取
|
||||
* @param {Object} parmas
|
||||
*/
|
||||
export function shopRechargeGet(parmas) {
|
||||
return request({
|
||||
url: `${urlType}/admin/shopRecharge`,
|
||||
method: 'get',
|
||||
parmas
|
||||
});
|
||||
}
|
||||
@@ -2,23 +2,27 @@
|
||||
<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">
|
||||
<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-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" v-model="item.miane" placeholder="填输入面额" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="赠送金额" required name="jine">
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.jine" placeholder="请输入金额" />
|
||||
<uni-forms-item label="赠送金额">
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" v-model="item.jine" placeholder="请输入金额" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="赠送积分" required name="jifen">
|
||||
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
|
||||
v-model="item.jifen" placeholder="请输入赠送积分" />
|
||||
<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">
|
||||
@@ -26,20 +30,23 @@
|
||||
<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">
|
||||
|
||||
<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']"
|
||||
<uni-forms-item
|
||||
:key="optionIndex"
|
||||
:name="['options', optionIndex, 'quan']"
|
||||
:ref="setFormInputRef(index, optionIndex)"
|
||||
:rules="[{'required': true,errorMessage: '赠送券必选'}]" label-width="0"
|
||||
label="" required>
|
||||
|
||||
: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>
|
||||
@change="inpuChange(index, optionIndex)"
|
||||
></uni-data-select>
|
||||
|
||||
<!-- <uni-easyinput v-model="recharge.list[index].options[optionIndex].quan"
|
||||
@input="inpuChange(index,optionIndex)"
|
||||
@@ -47,41 +54,40 @@
|
||||
: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: '必填'}]"
|
||||
<uni-forms-item
|
||||
:key="optionIndex"
|
||||
:rules="[{ required: true, errorMessage: '必填' }]"
|
||||
:ref="setFormInputRef(index, optionIndex)"
|
||||
:name="['options',optionIndex,'quanNumber']" label-width="0" label=""
|
||||
required>
|
||||
: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="填写数量 张" />
|
||||
:placeholderStyle="placeholderStyle"
|
||||
:inputBorder="inputBorder"
|
||||
type="number"
|
||||
placeholder="填写数量 张"
|
||||
/>
|
||||
|
||||
<view class="icon icon-reduce u-m-l-38"
|
||||
@click="delOption(index,optionIndex)">
|
||||
|
||||
</view>
|
||||
<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="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)">
|
||||
@@ -104,15 +110,12 @@
|
||||
</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-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-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">
|
||||
@@ -120,20 +123,23 @@
|
||||
<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">
|
||||
|
||||
<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']"
|
||||
<uni-forms-item
|
||||
:key="optionIndex"
|
||||
:name="['zengOptions', optionIndex, 'quan']"
|
||||
:ref="setFormInputRef(index, optionIndex)"
|
||||
:rules="[{'required': true,errorMessage: '赠送券必选'}]" label-width="0"
|
||||
label="" required>
|
||||
|
||||
: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>
|
||||
@change="inpuChange(index, optionIndex)"
|
||||
></uni-data-select>
|
||||
|
||||
<!-- <uni-easyinput v-model="recharge.list[index].options[optionIndex].quan"
|
||||
@input="inpuChange(index,optionIndex)"
|
||||
@@ -141,46 +147,43 @@
|
||||
: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: '必填'}]"
|
||||
<uni-forms-item
|
||||
:key="optionIndex"
|
||||
:rules="[{ required: true, errorMessage: '必填' }]"
|
||||
:ref="setFormInputRef(index, optionIndex)"
|
||||
:name="['zengOptions',optionIndex,'quanNumber']" label-width="0" label=""
|
||||
required>
|
||||
: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="填写数量 张" />
|
||||
:placeholderStyle="placeholderStyle"
|
||||
:inputBorder="inputBorder"
|
||||
type="number"
|
||||
placeholder="填写数量 张"
|
||||
/>
|
||||
|
||||
<view class="icon icon-reduce u-m-l-38"
|
||||
@click="delZengOption(index,optionIndex)">
|
||||
|
||||
</view>
|
||||
<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="icon icon-add u-m-r-22"></view>
|
||||
<view class="color-main">添加</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</template>
|
||||
|
||||
|
||||
</view>
|
||||
</uni-forms>
|
||||
</view>
|
||||
@@ -198,103 +201,108 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 100rpx;"></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 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';
|
||||
import { onLoad, onReady } from '@dcloudio/uni-app';
|
||||
import { onMounted, reactive, nextTick, ref, onBeforeMount } from 'vue';
|
||||
// 表单样式
|
||||
const placeholderStyle = ref('font-size:28rpx;')
|
||||
const placeholderStyle = ref('font-size:28rpx;');
|
||||
//表单边框
|
||||
const inputBorder = ref(false)
|
||||
const form = ref(null)
|
||||
const bottom = ref(null)
|
||||
const inputBorder = ref(false);
|
||||
const form = ref(null);
|
||||
const bottom = ref(null);
|
||||
//表单验证
|
||||
const rules = {
|
||||
miane: {
|
||||
rules: [{
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
jine: {
|
||||
rules: [{
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
zengJie: {
|
||||
rules: [{
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
zengJifen: {
|
||||
rules: [{
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
jifen: {
|
||||
rules: [{
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
quan: {
|
||||
rules: [{
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
quanNumber: {
|
||||
rules: [{
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '必填'
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const quans = reactive([{
|
||||
const quans = reactive([
|
||||
{
|
||||
value: 0,
|
||||
text: "充值18元优惠券"
|
||||
text: '充值18元优惠券'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "邀新10元优惠券"
|
||||
text: '邀新10元优惠券'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: "10元新人券"
|
||||
},
|
||||
])
|
||||
text: '10元新人券'
|
||||
}
|
||||
]);
|
||||
|
||||
// 构造规格的选项值的基础数据
|
||||
const rechargeOptionsBasicData = {
|
||||
quan: null,
|
||||
quanNumber: 1
|
||||
}
|
||||
};
|
||||
|
||||
function returnOptionsBasicData() {
|
||||
return {
|
||||
...rechargeOptionsBasicData
|
||||
}
|
||||
};
|
||||
}
|
||||
// 构造规格的基础数据
|
||||
const rechargeBasicData = {
|
||||
@@ -307,18 +315,18 @@
|
||||
isFirst: false,
|
||||
options: [],
|
||||
zengOptions: []
|
||||
}
|
||||
};
|
||||
|
||||
function back() {
|
||||
go.back()
|
||||
go.back();
|
||||
}
|
||||
|
||||
function returnrechargeOptionsBasicData() {
|
||||
return {
|
||||
...rechargeBasicData,
|
||||
options: [],
|
||||
zengOptions: [returnOptionsBasicData()],
|
||||
}
|
||||
zengOptions: [returnOptionsBasicData()]
|
||||
};
|
||||
}
|
||||
|
||||
function onFieldChange(e) {
|
||||
@@ -327,47 +335,45 @@
|
||||
// 规格列表
|
||||
const recharge = reactive({
|
||||
list: [returnrechargeOptionsBasicData()]
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
|
||||
//添加规格组
|
||||
function addrechargeGroup() {
|
||||
recharge.list.push(returnrechargeOptionsBasicData())
|
||||
scrollPageBottom()
|
||||
recharge.list.push(returnrechargeOptionsBasicData());
|
||||
scrollPageBottom();
|
||||
}
|
||||
//删除规格组
|
||||
function delrechargeGroup(index) {
|
||||
recharge.list.splice(index, 1)
|
||||
recharge.list.splice(index, 1);
|
||||
}
|
||||
// 向指定索引的优惠券添加规格项
|
||||
function addOptions(index) {
|
||||
recharge.list[index].options.push(returnOptionsBasicData())
|
||||
recharge.list[index].options.push(returnOptionsBasicData());
|
||||
}
|
||||
// 向指定索引的赠送优惠券添加规格项
|
||||
function addZengOptions(index) {
|
||||
recharge.list[index].zengOptions.push(returnOptionsBasicData())
|
||||
recharge.list[index].zengOptions.push(returnOptionsBasicData());
|
||||
}
|
||||
// 删除指定索引的优惠券添加规格项
|
||||
function delOption(index, optionIndex) {
|
||||
recharge.list[index].options.splice(optionIndex, 1)
|
||||
recharge.list[index].options.splice(optionIndex, 1);
|
||||
}
|
||||
// 删除指定索引的赠送优惠券添加规格项
|
||||
function delZengOption(index, optionIndex) {
|
||||
recharge.list[index].zengOptions.splice(optionIndex, 1)
|
||||
recharge.list[index].zengOptions.splice(optionIndex, 1);
|
||||
}
|
||||
//页面滚动到最底部
|
||||
function scrollPageBottom() {
|
||||
nextTick(() => {
|
||||
uni.pageScrollTo({
|
||||
duration: 100, // 过渡时间
|
||||
scrollTop: 100000, // 滚动的实际距离
|
||||
})
|
||||
})
|
||||
scrollTop: 100000 // 滚动的实际距离
|
||||
});
|
||||
});
|
||||
}
|
||||
//设置表单验证规则
|
||||
function setFormRules() {
|
||||
form.value.setRules(rules)
|
||||
form.value.setRules(rules);
|
||||
}
|
||||
const formRefs = ref([]);
|
||||
//绑定表单元素
|
||||
@@ -380,99 +386,98 @@
|
||||
};
|
||||
}
|
||||
// 绑定option input元素
|
||||
const refFormInput = ref([])
|
||||
const refFormInput = ref([]);
|
||||
|
||||
function setFormInputRef(index, index1) {
|
||||
const newIndex = 1000 + index * 10000 + 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()
|
||||
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()
|
||||
const newIndex = 1000 + index * 10000 + index1;
|
||||
refFormInput.value[newIndex] && refFormInput.value[newIndex].onFieldChange();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let emitName = ''
|
||||
let emitName = '';
|
||||
|
||||
function triggerEvent(emitName, data) {
|
||||
if (emitName) {
|
||||
uni.$emit(emitName, data)
|
||||
uni.$emit(emitName, data);
|
||||
}
|
||||
}
|
||||
let type='add'
|
||||
onLoad(opt => {
|
||||
const arr = uni.getStorageSync('guige')
|
||||
let type = 'add';
|
||||
onLoad((opt) => {
|
||||
const arr = uni.getStorageSync('guige');
|
||||
if (arr.length) {
|
||||
recharge.list = arr
|
||||
recharge.list = arr;
|
||||
console.log(arr);
|
||||
}
|
||||
console.log(opt);
|
||||
if (opt && JSON.stringify(opt) !== '{}' && opt.emitName) {
|
||||
emitName = opt.emitName
|
||||
emitName = opt.emitName;
|
||||
}
|
||||
|
||||
uni.setNavigationBarTitle({
|
||||
title: type === 'add' ? '添加充值面额' : '编辑充值面额'
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
function emitrechargeSave() {
|
||||
// emitrechargeSave 触发规格保存事件将数据给到添加商品页面
|
||||
// guigeEdit 触发规格保存事件将数据给到添加规格页面
|
||||
uni.removeStorageSync('guige')
|
||||
triggerEvent(emitName, recharge.list)
|
||||
|
||||
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 => {
|
||||
prosise
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
resolve({
|
||||
sucees: true
|
||||
});
|
||||
})
|
||||
}).catch(err => {
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
resolve({
|
||||
sucees: false
|
||||
})
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
async function save() {
|
||||
let isAllPassForm = 0
|
||||
let isAllPassForm = 0;
|
||||
for (let i in recharge.list) {
|
||||
const res = await returnPromise(i, formRefs.value[i].validate())
|
||||
isAllPassForm += res.sucees ? 1 : 0
|
||||
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()
|
||||
emitrechargeSave();
|
||||
go.back();
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
page {
|
||||
background: #F9F9F9;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
@@ -481,7 +486,7 @@
|
||||
$icon-line-height: 4rpx;
|
||||
|
||||
.page {
|
||||
background: #F9F9F9;
|
||||
background: #f9f9f9;
|
||||
padding: 30rpx;
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
@@ -560,7 +565,7 @@
|
||||
font-size: 28rpx;
|
||||
|
||||
.block {
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
@@ -572,7 +577,6 @@
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
bottom: 60rpx;
|
||||
|
||||
}
|
||||
|
||||
::v-deep.uni-forms-item {
|
||||
@@ -598,12 +602,12 @@
|
||||
}
|
||||
|
||||
.btn-hover-class {
|
||||
opacity: .6;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.zuofa {
|
||||
padding: 28rpx 0;
|
||||
background: #F9F9F9;
|
||||
background: #f9f9f9;
|
||||
padding-left: 42rpx;
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
}
|
||||
@@ -614,7 +618,7 @@
|
||||
|
||||
.option {
|
||||
padding: 26rpx 30rpx 24rpx 24rpx;
|
||||
background: #F9F9F9;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.option-item {
|
||||
|
||||
@@ -20,32 +20,57 @@
|
||||
<recharge-item @del="rechargeItemDel" :index="index" :data="item"></recharge-item>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
<template v-if="tabsCurrent === 1">
|
||||
<view class="card-wrap">
|
||||
<view class="card">
|
||||
<view class="header">
|
||||
<text class="title">自定义金额</text>
|
||||
<my-switch v-model="settingForm.isCustom"></my-switch>
|
||||
</view>
|
||||
<view class="tips">
|
||||
<text class="t">自定义金额不参与赠送优惠</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-wrap">
|
||||
<view class="card no-bg">
|
||||
<view class="header">
|
||||
<text class="title">可用门店</text>
|
||||
</view>
|
||||
<my-shop-select v-model:useType="settingForm.useType" v-model:selShops="settingForm.shopIdList" @useTypeChange="useTypeChange"></my-shop-select>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-wrap">
|
||||
<view class="card">
|
||||
<view class="header">
|
||||
<text class="title">充值并下单</text>
|
||||
<my-switch v-model="settingForm.isOrder"></my-switch>
|
||||
</view>
|
||||
<view class="tips">
|
||||
<text class="t">开启后,订单支付页面显示充值选项</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-p-30">
|
||||
<view class="bg-fff u-p-30 border-r-12">
|
||||
<view>充值说明</view>
|
||||
<view class="u-p-30 border-r-12 border u-m-t-30">
|
||||
<view class="">
|
||||
<textarea placeholder="请填写充值说明"/>
|
||||
<textarea placeholder="请填写充值说明" v-model="settingForm.remark" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="bg-fff u-m-t-30 u-overflow-hide border-r-12 u-p-30 u-flex u-row-between">
|
||||
<!-- <view class="bg-fff u-m-t-30 u-overflow-hide border-r-12 u-p-30 u-flex u-row-between">
|
||||
<view class="">充值前绑定手机</view>
|
||||
<view>
|
||||
<my-switch v-model="mustBindPhone"></my-switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-60" style="padding: 80rpx;">
|
||||
<my-button showShadow shape="circle">保存</my-button>
|
||||
</view> -->
|
||||
<view class="u-m-t-60" style="padding: 80rpx">
|
||||
<my-button showShadow shape="circle" @click="rechargeSetting">保存</my-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
<template v-if="tabsCurrent === 2">
|
||||
<view class="bg-fff u-font-28">
|
||||
@@ -63,26 +88,25 @@
|
||||
<uni-icons type="right" :color="nowStatusIndex >= 1 ? $utils.ColorMain : '#000'" size="16"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 164rpx;"></view>
|
||||
<view style="width: 164rpx"></view>
|
||||
<view class="search-box">
|
||||
<view class="search-btn u-flex" @tap="showSearch" :style="{ width: searchShow ? '690rpx' : '164rpx' }">
|
||||
<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
|
||||
<view class="u-flex-1 u-p-l-10"><input v-model="keyword" @confirm="searchConfirm" type="text"
|
||||
placeholder-style="font-size:28rpx;" placeholder="搜索" /></view>
|
||||
<view class="u-flex-1 u-p-l-10">
|
||||
<input v-model="keyword" @confirm="searchConfirm" type="text" placeholder-style="font-size:28rpx;" placeholder="搜索" />
|
||||
</view>
|
||||
<view @tap.stop="hideSearch" v-if="searchShow">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view :style="{ height: showStatus ? statusHeight : 0 }" class="tranistion status overflow-hide">
|
||||
<view @tap="changeNowStatusIndex(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
|
||||
v-for="(item,index) in status" :key="index">
|
||||
<view @tap="changeNowStatusIndex(index)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between" v-for="(item, index) in status" :key="index">
|
||||
<view :class="{ 'color-main': nowStatusIndex === index }">{{ item }}</view>
|
||||
<uni-icons v-if="nowStatusIndex === index" type="checkmarkempty" :color="$utils.ColorMain"></uni-icons>
|
||||
</view>
|
||||
<view :style="{ height: statusBootom + 'px' }"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-p-30">
|
||||
@@ -100,7 +124,7 @@
|
||||
<view>充值总额</view>
|
||||
<view class="u-font-32 u-m-t-10">0.00</view>
|
||||
</view>
|
||||
<view style="margin-left: 240rpx;" class="u-flex u-flex-col u-row-center u-col-center">
|
||||
<view style="margin-left: 240rpx" class="u-flex u-flex-col u-row-center u-col-center">
|
||||
<view>充值人次</view>
|
||||
<view class="u-font-32 u-m-t-10">0</view>
|
||||
</view>
|
||||
@@ -110,14 +134,13 @@
|
||||
<view>退款总额</view>
|
||||
<view class="u-font-32 u-m-t-10">0.00</view>
|
||||
</view>
|
||||
<view style="margin-left: 240rpx;" class="u-flex u-flex-col u-row-center u-col-center">
|
||||
<view style="margin-left: 240rpx" class="u-flex u-flex-col u-row-center u-col-center">
|
||||
<view>退款金额</view>
|
||||
<view class="u-font-32 u-m-t-10">0</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<my-model ref="model" :desc="modelData.desc"></my-model>
|
||||
@@ -126,32 +149,30 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
import myTabs from '@/components/my-components/my-tabs.vue'
|
||||
import myIcons from '@/components/my-components/my-icons.vue'
|
||||
import mySwitch from '@/components/my-components/my-switch.vue'
|
||||
import myButton from '@/components/my-components/my-button.vue'
|
||||
import myModel from '@/components/my-components/my-model.vue'
|
||||
import myDatePickerview from '@/components/my-components/my-date-pickerview'
|
||||
import rechargeItem from './components/recharge-item.vue'
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import myTabs from '@/components/my-components/my-tabs.vue';
|
||||
import myIcons from '@/components/my-components/my-icons.vue';
|
||||
import mySwitch from '@/components/my-components/my-switch.vue';
|
||||
import myButton from '@/components/my-components/my-button.vue';
|
||||
import myModel from '@/components/my-components/my-model.vue';
|
||||
import myDatePickerview from '@/components/my-components/my-date-pickerview';
|
||||
import rechargeItem from './components/recharge-item.vue';
|
||||
import $util from '@/commons/utils/getDateArea.js';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import { shopRechargePost, shopRechargeGet } from '@/http/api/market/index.js';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
|
||||
const model=ref(null)
|
||||
const model = ref(null);
|
||||
const modelData = reactive({
|
||||
desc: ''
|
||||
})
|
||||
});
|
||||
function rechargeItemDel(e) {
|
||||
modelData.desc=`确定删除【${Number(e.data.price).toFixed(2)}】面额吗?`
|
||||
model.value.open()
|
||||
modelData.desc = `确定删除【${Number(e.data.price).toFixed(2)}】面额吗?`;
|
||||
model.value.open();
|
||||
console.log(e);
|
||||
}
|
||||
function toAddRecharge() {
|
||||
go.to('PAGES_RECHARGE_ADD_RECHARGE')
|
||||
go.to('PAGES_RECHARGE_ADD_RECHARGE');
|
||||
}
|
||||
|
||||
const rechargeLists = ref([
|
||||
@@ -165,68 +186,114 @@
|
||||
price: 500,
|
||||
desc: '60.00元、4张券'
|
||||
}
|
||||
])
|
||||
]);
|
||||
|
||||
|
||||
|
||||
let mustBindPhone=ref(true)
|
||||
const nowDate=new Date()
|
||||
let mustBindPhone = ref(true);
|
||||
const nowDate = new Date();
|
||||
const filters = reactive({
|
||||
time: {
|
||||
start: $util.getDayArea(nowDate, 'start'),
|
||||
end: $util.getDayArea(nowDate, 'end')
|
||||
}
|
||||
})
|
||||
const tabsList = ['充值面额', '充值设置', '充值记录']
|
||||
let tabsCurrent = ref(2)
|
||||
});
|
||||
const tabsList = ['充值面额', '充值设置', '充值记录'];
|
||||
let tabsCurrent = ref(0);
|
||||
|
||||
let showStatus=ref(false)
|
||||
function showStatusToggle(){
|
||||
showStatus.value=!showStatus.value
|
||||
const settingForm = ref({
|
||||
id: '',
|
||||
isCustom: 1, // 自定义金额
|
||||
useType: 'all',
|
||||
shopIdList: [], // 可用门店
|
||||
isOrder: 1, // 充值并下单
|
||||
remark: ''
|
||||
});
|
||||
|
||||
function useTypeChange(e) {
|
||||
if (e == 'all') {
|
||||
settingForm.value.shopIdList = [];
|
||||
}
|
||||
}
|
||||
|
||||
const statusBootom=14
|
||||
// 获取设置
|
||||
async function shopRechargeGetAjax() {
|
||||
try {
|
||||
const res = await shopRechargeGet();
|
||||
settingForm.value = res;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 保存充值设置
|
||||
async function rechargeSetting() {
|
||||
console.log('settingForm', settingForm.value);
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '保存中...'
|
||||
});
|
||||
await shopRechargePost(settingForm.value);
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'none'
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
let showStatus = ref(false);
|
||||
function showStatusToggle() {
|
||||
showStatus.value = !showStatus.value;
|
||||
}
|
||||
|
||||
const statusBootom = 14;
|
||||
const statusHeight = computed(() => {
|
||||
return 30*status.length+statusBootom +'px'
|
||||
})
|
||||
return 30 * status.length + statusBootom + 'px';
|
||||
});
|
||||
|
||||
|
||||
let searchShow = ref(false)
|
||||
let searchShow = ref(false);
|
||||
|
||||
function showSearch() {
|
||||
searchShow.value = true
|
||||
searchShow.value = true;
|
||||
}
|
||||
const status = ['全部', '未支付', '支付成功']
|
||||
let nowStatusIndex = ref(0)
|
||||
const status = ['全部', '未支付', '支付成功'];
|
||||
let nowStatusIndex = ref(0);
|
||||
function changeNowStatusIndex(i) {
|
||||
nowStatusIndex.value = i
|
||||
showStatus.value=false
|
||||
nowStatusIndex.value = i;
|
||||
showStatus.value = false;
|
||||
}
|
||||
function hideSearch() {
|
||||
searchShow.value = false
|
||||
searchShow.value = false;
|
||||
}
|
||||
|
||||
function tabsChange(i) {
|
||||
console.log(i);
|
||||
tabsCurrent.value = i
|
||||
tabsCurrent.value = i;
|
||||
}
|
||||
|
||||
let keyword = ref('')
|
||||
let keyword = ref('');
|
||||
|
||||
function searchConfirm(e) {
|
||||
console.log(e)
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
const datePicker=ref(null)
|
||||
const datePicker = ref(null);
|
||||
function timeToggle() {
|
||||
datePicker.value.toggle()
|
||||
showStatus.value=false
|
||||
datePicker.value.toggle();
|
||||
showStatus.value = false;
|
||||
}
|
||||
function datePickerConfirm(e) {
|
||||
console.log(e);
|
||||
filters.time.start=e.start
|
||||
filters.time.end=e.end
|
||||
filters.time.start = e.start;
|
||||
filters.time.end = e.end;
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
shopRechargeGetAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -234,13 +301,13 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
.border {
|
||||
border: 1px solid #E5E5E5;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
.border-r-12 {
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
.recoreds {
|
||||
background: linear-gradient( 127deg, #33A0FF 0%, #6699FF 100%);
|
||||
background: linear-gradient(127deg, #33a0ff 0%, #6699ff 100%);
|
||||
box-shadow: 0rpx 20rpx 60rpx 2rpx rgba(92, 112, 248, 0.2);
|
||||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||||
padding: 32rpx 40rpx 40rpx 48rpx;
|
||||
@@ -249,7 +316,8 @@
|
||||
line-height: 30px;
|
||||
}
|
||||
.status {
|
||||
position: absolute;top: 100%;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
@@ -279,13 +347,13 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// width: 164rpx;
|
||||
transition: all .3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
background-color: rgb(247, 247, 247);
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
.time-area {
|
||||
background: #E6F0FF;
|
||||
background: #e6f0ff;
|
||||
border-radius: 100px;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
@@ -295,4 +363,27 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.card-wrap {
|
||||
padding: 28upx 28upx 0;
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 20upx;
|
||||
padding: 28upx;
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 12upx;
|
||||
.title {
|
||||
font-size: 28upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
.t {
|
||||
font-size: 28upx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user