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-22 10:15:00 +08:00
parent 96220b2c04
commit e4f5cc8519
4 changed files with 788 additions and 664 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/my-components/my-shop-select.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<view> <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 v-for="item in useTypeList" :key="item.value" :name="item.value" :label="item.label" :customStyle="customStyle"></up-radio>
</up-radio-group> </up-radio-group>
<view class="box" v-if="useType == 'part'" @click.stop="openPopup"> <view class="box" v-if="useType == 'part'" @click.stop="openPopup">
@@ -44,7 +44,7 @@ const customStyle = ref({
}); });
const show = ref(false); const show = ref(false);
const selShops = defineModel('selShops', { let selShops = defineModel('selShops', {
default: () => [], default: () => [],
type: Array type: Array
}); });
@@ -63,6 +63,11 @@ const useTypeList = [
} }
]; ];
const emits = defineEmits(['useTypeChange']);
function useTypeChange(e) {
emits('useTypeChange', e);
}
function returnShopName(shopId) { function returnShopName(shopId) {
const item = list.value.find((v) => v.shopId == shopId); const item = list.value.find((v) => v.shopId == shopId);
return item?.shopName || ''; return item?.shopName || '';

24
http/api/market/index.js
View File

@@ -153,3 +153,27 @@ export function couponGetRecord(params) {
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
});
}

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

@@ -2,23 +2,27 @@
<view class="page"> <view class="page">
<view class="box"> <view class="box">
<view v-for="(item, index) in recharge.list" :key="index"> <view v-for="(item, index) in recharge.list" :key="index">
<uni-forms :model="item" :rules="rules" err-show-type="undertext" validateTrigger="blur" <uni-forms
:ref="setFormRef(index)" :border="true" label-position="top" label-width="350"> :model="item"
:rules="rules"
err-show-type="undertext"
validateTrigger="blur"
:ref="setFormRef(index)"
:border="true"
label-position="top"
label-width="350"
>
<view class="block"> <view class="block">
<uni-forms-item label="充值面额" required name="miane"> <uni-forms-item label="充值面额" required name="miane">
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" <uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" v-model="item.miane" placeholder="填输入面额" />
v-model="item.miane" placeholder="填输入面额" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="赠送金额" required name="jine"> <uni-forms-item label="赠送金额">
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" <uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" v-model="item.jine" placeholder="请输入金额" />
v-model="item.jine" placeholder="请输入金额" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="赠送积分" required name="jifen"> <uni-forms-item label="赠送积分">
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" <uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" v-model="item.jifen" placeholder="请输入赠送积分" />
v-model="item.jifen" placeholder="请输入赠送积分" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="赠送券"> <uni-forms-item label="赠送券">
<view class="option"> <view class="option">
<template v-if="item.options.length"> <template v-if="item.options.length">
<view class="u-flex"> <view class="u-flex">
@@ -26,20 +30,23 @@
<view class="u-flex-1 u-p-l-60">赠送数量</view> <view class="u-flex-1 u-p-l-60">赠送数量</view>
</view> </view>
<view class=""> <view class="">
<view class="u-flex option-item" v-for="(option,optionIndex) in item.options" <view class="u-flex option-item" v-for="(option, optionIndex) in item.options" :key="optionIndex">
:key="optionIndex">
<!-- <buton @tap="testVaildata(index,optionIndex)">test</buton> --> <!-- <buton @tap="testVaildata(index,optionIndex)">test</buton> -->
<view class="u-flex-1"> <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)" :ref="setFormInputRef(index, optionIndex)"
:rules="[{'required': true,errorMessage: '赠送券必选'}]" label-width="0" :rules="[{ required: true, errorMessage: '赠送券必选' }]"
label="" required> label-width="0"
label=""
required
>
<uni-data-select <uni-data-select
v-model="recharge.list[index].options[optionIndex].quan" v-model="recharge.list[index].options[optionIndex].quan"
:localdata="quans" :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" <!-- <uni-easyinput v-model="recharge.list[index].options[optionIndex].quan"
@input="inpuChange(index,optionIndex)" @input="inpuChange(index,optionIndex)"
@@ -47,41 +54,40 @@
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder" :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
placeholder="选项名" /> --> placeholder="选项名" /> -->
</uni-forms-item> </uni-forms-item>
</view> </view>
<view class="u-p-l-60 u-flex-1 u-flex"> <view class="u-p-l-60 u-flex-1 u-flex">
<uni-forms-item :key="optionIndex" <uni-forms-item
:rules="[{'required': true,errorMessage: '必填'}]" :key="optionIndex"
:rules="[{ required: true, errorMessage: '必填' }]"
:ref="setFormInputRef(index, optionIndex)" :ref="setFormInputRef(index, optionIndex)"
:name="['options',optionIndex,'quanNumber']" label-width="0" label="" :name="['options', optionIndex, 'quanNumber']"
required> label-width="0"
label=""
required
>
<view class="u-flex"> <view class="u-flex">
<uni-easyinput <uni-easyinput
v-model="recharge.list[index].options[optionIndex].quanNumber" v-model="recharge.list[index].options[optionIndex].quanNumber"
@input="inpuChange(index, optionIndex)" @input="inpuChange(index, optionIndex)"
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder" :placeholderStyle="placeholderStyle"
type="number" placeholder="填写数量 张" /> :inputBorder="inputBorder"
type="number"
placeholder="填写数量 张"
/>
<view class="icon icon-reduce u-m-l-38" <view class="icon icon-reduce u-m-l-38" @click="delOption(index, optionIndex)"></view>
@click="delOption(index,optionIndex)">
</view>
</view> </view>
</uni-forms-item> </uni-forms-item>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<view class="u-flex u-m-t-32"> <view class="u-flex u-m-t-32">
<view class="u-flex" @click="addOptions(index)"> <view class="u-flex" @click="addOptions(index)">
<view class="icon icon-add u-m-r-22 "> <view class="icon icon-add u-m-r-22"></view>
</view>
<view class="color-main">添加</view> <view class="color-main">添加</view>
</view> </view>
</view> </view>
</view> </view>
</uni-forms-item> </uni-forms-item>
<!-- <view class="u-flex u-m-t-48 u-m-b-24" @click="delrechargeGroup(index)"> <!-- <view class="u-flex u-m-t-48 u-m-b-24" @click="delrechargeGroup(index)">
@@ -104,15 +110,12 @@
</view> </view>
<template v-if="item.isFirst"> <template v-if="item.isFirst">
<uni-forms-item label="赠送金额" required name="zengJie"> <uni-forms-item label="赠送金额" required name="zengJie">
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" <uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" v-model="item.zengJie" placeholder="请输入金额" />
v-model="item.zengJie" placeholder="请输入金额" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="赠送积分" required name="zengJifen"> <uni-forms-item label="赠送积分" required name="zengJifen">
<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" <uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="inputBorder" v-model="item.zengJifen" placeholder="请输入积分" />
v-model="item.zengJifen" placeholder="请输入积分" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="赠送券"> <uni-forms-item label="赠送券">
<view class="option"> <view class="option">
<template v-if="item.zengOptions.length"> <template v-if="item.zengOptions.length">
<view class="u-flex"> <view class="u-flex">
@@ -120,20 +123,23 @@
<view class="u-flex-1 u-p-l-60">赠送数量</view> <view class="u-flex-1 u-p-l-60">赠送数量</view>
</view> </view>
<view class=""> <view class="">
<view class="u-flex option-item" v-for="(option,optionIndex) in item.zengOptions" <view class="u-flex option-item" v-for="(option, optionIndex) in item.zengOptions" :key="optionIndex">
:key="optionIndex">
<!-- <buton @tap="testVaildata(index,optionIndex)">test</buton> --> <!-- <buton @tap="testVaildata(index,optionIndex)">test</buton> -->
<view class="u-flex-1"> <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)" :ref="setFormInputRef(index, optionIndex)"
:rules="[{'required': true,errorMessage: '赠送券必选'}]" label-width="0" :rules="[{ required: true, errorMessage: '赠送券必选' }]"
label="" required> label-width="0"
label=""
required
>
<uni-data-select <uni-data-select
v-model="recharge.list[index].zengOptions[optionIndex].quan" v-model="recharge.list[index].zengOptions[optionIndex].quan"
:localdata="quans" :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" <!-- <uni-easyinput v-model="recharge.list[index].options[optionIndex].quan"
@input="inpuChange(index,optionIndex)" @input="inpuChange(index,optionIndex)"
@@ -141,46 +147,43 @@
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder" :placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
placeholder="选项名" /> --> placeholder="选项名" /> -->
</uni-forms-item> </uni-forms-item>
</view> </view>
<view class="u-p-l-60 u-flex-1 u-flex"> <view class="u-p-l-60 u-flex-1 u-flex">
<uni-forms-item :key="optionIndex" <uni-forms-item
:rules="[{'required': true,errorMessage: '必填'}]" :key="optionIndex"
:rules="[{ required: true, errorMessage: '必填' }]"
:ref="setFormInputRef(index, optionIndex)" :ref="setFormInputRef(index, optionIndex)"
:name="['zengOptions',optionIndex,'quanNumber']" label-width="0" label="" :name="['zengOptions', optionIndex, 'quanNumber']"
required> label-width="0"
label=""
required
>
<view class="u-flex"> <view class="u-flex">
<uni-easyinput <uni-easyinput
v-model="recharge.list[index].zengOptions[optionIndex].quanNumber" v-model="recharge.list[index].zengOptions[optionIndex].quanNumber"
@input="inpuChange(index, optionIndex)" @input="inpuChange(index, optionIndex)"
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder" :placeholderStyle="placeholderStyle"
type="number" placeholder="填写数量 张" /> :inputBorder="inputBorder"
type="number"
placeholder="填写数量 张"
/>
<view class="icon icon-reduce u-m-l-38" <view class="icon icon-reduce u-m-l-38" @click="delZengOption(index, optionIndex)"></view>
@click="delZengOption(index,optionIndex)">
</view>
</view> </view>
</uni-forms-item> </uni-forms-item>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<view class="u-flex u-m-t-32"> <view class="u-flex u-m-t-32">
<view class="u-flex" @click="addZengOptions(index)"> <view class="u-flex" @click="addZengOptions(index)">
<view class="icon icon-add u-m-r-22 "> <view class="icon icon-add u-m-r-22"></view>
</view>
<view class="color-main">添加</view> <view class="color-main">添加</view>
</view> </view>
</view> </view>
</view> </view>
</uni-forms-item> </uni-forms-item>
</template> </template>
</view> </view>
</uni-forms> </uni-forms>
</view> </view>
@@ -198,103 +201,108 @@
</view> </view>
</view> </view>
</view> </view>
<view style="height: 100rpx;"></view> <view style="height: 100rpx"></view>
<view class="bottom" ref="bottom"></view> <view class="bottom" ref="bottom"></view>
</view> </view>
</template> </template>
<script setup> <script setup>
import mySwitch from '@/components/my-components/my-switch.vue' import mySwitch from '@/components/my-components/my-switch.vue';
import myButton from '@/components/my-components/my-button.vue' import myButton from '@/components/my-components/my-button.vue';
import go from '@/commons/utils/go.js'; import go from '@/commons/utils/go.js';
import { import { onLoad, onReady } from '@dcloudio/uni-app';
onLoad, import { onMounted, reactive, nextTick, ref, onBeforeMount } from 'vue';
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 inputBorder = ref(false);
const form = ref(null) const form = ref(null);
const bottom = ref(null) const bottom = ref(null);
//表单验证 //表单验证
const rules = { const rules = {
miane: { miane: {
rules: [{ rules: [
{
required: true, required: true,
errorMessage: '必填' errorMessage: '必填'
}] }
]
}, },
jine: { jine: {
rules: [{ rules: [
{
required: true, required: true,
errorMessage: '必填' errorMessage: '必填'
}] }
]
}, },
zengJie: { zengJie: {
rules: [{ rules: [
{
required: true, required: true,
errorMessage: '必填' errorMessage: '必填'
}] }
]
}, },
zengJifen: { zengJifen: {
rules: [{ rules: [
{
required: true, required: true,
errorMessage: '必填' errorMessage: '必填'
}] }
]
}, },
jifen: { jifen: {
rules: [{ rules: [
{
required: true, required: true,
errorMessage: '必填' errorMessage: '必填'
}] }
]
}, },
quan: { quan: {
rules: [{ rules: [
{
required: true, required: true,
errorMessage: '必填' errorMessage: '必填'
}] }
]
}, },
quanNumber: { quanNumber: {
rules: [{ rules: [
{
required: true, required: true,
errorMessage: '必填' errorMessage: '必填'
}]
} }
]
} }
};
const quans = reactive([
const quans = reactive([{ {
value: 0, value: 0,
text: "充值18元优惠券" text: '充值18元优惠券'
}, },
{ {
value: 1, value: 1,
text: "邀新10元优惠券" text: '邀新10元优惠券'
}, },
{ {
value: 2, value: 2,
text: "10元新人券" text: '10元新人券'
}, }
]) ]);
// 构造规格的选项值的基础数据 // 构造规格的选项值的基础数据
const rechargeOptionsBasicData = { const rechargeOptionsBasicData = {
quan: null, quan: null,
quanNumber: 1 quanNumber: 1
} };
function returnOptionsBasicData() { function returnOptionsBasicData() {
return { return {
...rechargeOptionsBasicData ...rechargeOptionsBasicData
} };
} }
// 构造规格的基础数据 // 构造规格的基础数据
const rechargeBasicData = { const rechargeBasicData = {
@@ -307,18 +315,18 @@
isFirst: false, isFirst: false,
options: [], options: [],
zengOptions: [] zengOptions: []
} };
function back() { function back() {
go.back() go.back();
} }
function returnrechargeOptionsBasicData() { function returnrechargeOptionsBasicData() {
return { return {
...rechargeBasicData, ...rechargeBasicData,
options: [], options: [],
zengOptions: [returnOptionsBasicData()], zengOptions: [returnOptionsBasicData()]
} };
} }
function onFieldChange(e) { function onFieldChange(e) {
@@ -327,47 +335,45 @@
// 规格列表 // 规格列表
const recharge = reactive({ const recharge = reactive({
list: [returnrechargeOptionsBasicData()] list: [returnrechargeOptionsBasicData()]
}) });
//添加规格组 //添加规格组
function addrechargeGroup() { function addrechargeGroup() {
recharge.list.push(returnrechargeOptionsBasicData()) recharge.list.push(returnrechargeOptionsBasicData());
scrollPageBottom() scrollPageBottom();
} }
//删除规格组 //删除规格组
function delrechargeGroup(index) { function delrechargeGroup(index) {
recharge.list.splice(index, 1) recharge.list.splice(index, 1);
} }
// 向指定索引的优惠券添加规格项 // 向指定索引的优惠券添加规格项
function addOptions(index) { function addOptions(index) {
recharge.list[index].options.push(returnOptionsBasicData()) recharge.list[index].options.push(returnOptionsBasicData());
} }
// 向指定索引的赠送优惠券添加规格项 // 向指定索引的赠送优惠券添加规格项
function addZengOptions(index) { function addZengOptions(index) {
recharge.list[index].zengOptions.push(returnOptionsBasicData()) recharge.list[index].zengOptions.push(returnOptionsBasicData());
} }
// 删除指定索引的优惠券添加规格项 // 删除指定索引的优惠券添加规格项
function delOption(index, optionIndex) { function delOption(index, optionIndex) {
recharge.list[index].options.splice(optionIndex, 1) recharge.list[index].options.splice(optionIndex, 1);
} }
// 删除指定索引的赠送优惠券添加规格项 // 删除指定索引的赠送优惠券添加规格项
function delZengOption(index, optionIndex) { function delZengOption(index, optionIndex) {
recharge.list[index].zengOptions.splice(optionIndex, 1) recharge.list[index].zengOptions.splice(optionIndex, 1);
} }
//页面滚动到最底部 //页面滚动到最底部
function scrollPageBottom() { function scrollPageBottom() {
nextTick(() => { nextTick(() => {
uni.pageScrollTo({ uni.pageScrollTo({
duration: 100, // 过渡时间 duration: 100, // 过渡时间
scrollTop: 100000, // 滚动的实际距离 scrollTop: 100000 // 滚动的实际距离
}) });
}) });
} }
//设置表单验证规则 //设置表单验证规则
function setFormRules() { function setFormRules() {
form.value.setRules(rules) form.value.setRules(rules);
} }
const formRefs = ref([]); const formRefs = ref([]);
//绑定表单元素 //绑定表单元素
@@ -380,99 +386,98 @@
}; };
} }
// 绑定option input元素 // 绑定option input元素
const refFormInput = ref([]) const refFormInput = ref([]);
function setFormInputRef(index, index1) { function setFormInputRef(index, index1) {
const newIndex = 1000 + index * 10000 + index1 const newIndex = 1000 + index * 10000 + index1;
return (el) => { return (el) => {
if (el) { if (el) {
if (!refFormInput.value[newIndex]) { if (!refFormInput.value[newIndex]) {
refFormInput.value[newIndex] = el; refFormInput.value[newIndex] = el;
} }
} }
} };
} }
function testVaildata(index, index1) { function testVaildata(index, index1) {
const newIndex = 1000 + index * 10000 + index1 const newIndex = 1000 + index * 10000 + index1;
recharge.list[0].options[0].quanNumber = 1 recharge.list[0].options[0].quanNumber = 1;
refFormInput.value[newIndex] && refFormInput.value[newIndex].onFieldChange() refFormInput.value[newIndex] && refFormInput.value[newIndex].onFieldChange();
} }
// 当表单内容输入变化根据配置的rules进行验证 // 当表单内容输入变化根据配置的rules进行验证
function inpuChange(index, index1) { function inpuChange(index, index1) {
const newIndex = 1000 + index * 10000 + index1 const newIndex = 1000 + index * 10000 + index1;
refFormInput.value[newIndex] && refFormInput.value[newIndex].onFieldChange() refFormInput.value[newIndex] && refFormInput.value[newIndex].onFieldChange();
} }
let emitName = '';
let emitName = ''
function triggerEvent(emitName, data) { function triggerEvent(emitName, data) {
if (emitName) { if (emitName) {
uni.$emit(emitName, data) uni.$emit(emitName, data);
} }
} }
let type='add' let type = 'add';
onLoad(opt => { onLoad((opt) => {
const arr = uni.getStorageSync('guige') const arr = uni.getStorageSync('guige');
if (arr.length) { if (arr.length) {
recharge.list = arr recharge.list = arr;
console.log(arr); console.log(arr);
} }
console.log(opt); console.log(opt);
if (opt && JSON.stringify(opt) !== '{}' && opt.emitName) { if (opt && JSON.stringify(opt) !== '{}' && opt.emitName) {
emitName = opt.emitName emitName = opt.emitName;
} }
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: type === 'add' ? '添加充值面额' : '编辑充值面额' title: type === 'add' ? '添加充值面额' : '编辑充值面额'
}) });
}) });
function emitrechargeSave() { function emitrechargeSave() {
// emitrechargeSave 触发规格保存事件将数据给到添加商品页面 // emitrechargeSave 触发规格保存事件将数据给到添加商品页面
// guigeEdit 触发规格保存事件将数据给到添加规格页面 // 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) { function returnPromise(index, prosise) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
prosise.then(res => { prosise
.then((res) => {
console.log(res); console.log(res);
resolve({ resolve({
sucees: true sucees: true
});
}) })
}).catch(err => { .catch((err) => {
console.log(err); console.log(err);
resolve({ resolve({
sucees: false sucees: false
}) });
}) });
}) });
} }
async function save() { async function save() {
let isAllPassForm = 0 let isAllPassForm = 0;
for (let i in recharge.list) { for (let i in recharge.list) {
const res = await returnPromise(i, formRefs.value[i].validate()) const res = await returnPromise(i, formRefs.value[i].validate());
isAllPassForm += res.sucees ? 1 : 0 isAllPassForm += res.sucees ? 1 : 0;
} }
//判断验证是否通过 //判断验证是否通过
if (isAllPassForm === recharge.list.length) { if (isAllPassForm === recharge.list.length) {
console.log('pass'); console.log('pass');
emitrechargeSave() emitrechargeSave();
go.back() go.back();
} }
} }
</script> </script>
<style scoped> <style scoped>
page { page {
background: #F9F9F9; background: #f9f9f9;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -481,7 +486,7 @@
$icon-line-height: 4rpx; $icon-line-height: 4rpx;
.page { .page {
background: #F9F9F9; background: #f9f9f9;
padding: 30rpx; padding: 30rpx;
padding-bottom: 200rpx; padding-bottom: 200rpx;
} }
@@ -560,7 +565,7 @@
font-size: 28rpx; font-size: 28rpx;
.block { .block {
background: #FFFFFF; background: #ffffff;
border-radius: 18rpx 18rpx 18rpx 18rpx; border-radius: 18rpx 18rpx 18rpx 18rpx;
padding: 12rpx 24rpx; padding: 12rpx 24rpx;
margin-bottom: 32rpx; margin-bottom: 32rpx;
@@ -572,7 +577,6 @@
left: 30rpx; left: 30rpx;
right: 30rpx; right: 30rpx;
bottom: 60rpx; bottom: 60rpx;
} }
::v-deep.uni-forms-item { ::v-deep.uni-forms-item {
@@ -598,12 +602,12 @@
} }
.btn-hover-class { .btn-hover-class {
opacity: .6; opacity: 0.6;
} }
.zuofa { .zuofa {
padding: 28rpx 0; padding: 28rpx 0;
background: #F9F9F9; background: #f9f9f9;
padding-left: 42rpx; padding-left: 42rpx;
border-radius: 14rpx 14rpx 14rpx 14rpx; border-radius: 14rpx 14rpx 14rpx 14rpx;
} }
@@ -614,7 +618,7 @@
.option { .option {
padding: 26rpx 30rpx 24rpx 24rpx; padding: 26rpx 30rpx 24rpx 24rpx;
background: #F9F9F9; background: #f9f9f9;
} }
.option-item { .option-item {

233
pageRecharge/index.vue
View File

@@ -20,32 +20,57 @@
<recharge-item @del="rechargeItemDel" :index="index" :data="item"></recharge-item> <recharge-item @del="rechargeItemDel" :index="index" :data="item"></recharge-item>
</view> </view>
</view> </view>
</template> </template>
<template v-if="tabsCurrent === 1"> <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="u-p-30">
<view class="bg-fff u-p-30 border-r-12"> <view class="bg-fff u-p-30 border-r-12">
<view>充值说明</view> <view>充值说明</view>
<view class="u-p-30 border-r-12 border u-m-t-30"> <view class="u-p-30 border-r-12 border u-m-t-30">
<view class=""> <view class="">
<textarea placeholder="请填写充值说明"/> <textarea placeholder="请填写充值说明" v-model="settingForm.remark" />
</view> </view>
</view> </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 class="">充值前绑定手机</view>
<view> <view>
<my-switch v-model="mustBindPhone"></my-switch> <my-switch v-model="mustBindPhone"></my-switch>
</view> </view>
</view> </view> -->
<view class="u-m-t-60" style="padding: 80rpx;"> <view class="u-m-t-60" style="padding: 80rpx">
<my-button showShadow shape="circle">保存</my-button> <my-button showShadow shape="circle" @click="rechargeSetting">保存</my-button>
</view> </view>
</view> </view>
</template> </template>
<template v-if="tabsCurrent === 2"> <template v-if="tabsCurrent === 2">
<view class="bg-fff u-font-28"> <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> <uni-icons type="right" :color="nowStatusIndex >= 1 ? $utils.ColorMain : '#000'" size="16"></uni-icons>
</view> </view>
</view> </view>
<view style="width: 164rpx;"></view> <view style="width: 164rpx"></view>
<view class="search-box"> <view class="search-box">
<view class="search-btn u-flex" @tap="showSearch" :style="{ width: searchShow ? '690rpx' : '164rpx' }"> <view class="search-btn u-flex" @tap="showSearch" :style="{ width: searchShow ? '690rpx' : '164rpx' }">
<image src="@/static/iconImg/icon-search.svg" class="input-icon" /> <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" <view class="u-flex-1 u-p-l-10">
placeholder-style="font-size:28rpx;" placeholder="搜索" /></view> <input v-model="keyword" @confirm="searchConfirm" type="text" placeholder-style="font-size:28rpx;" placeholder="搜索" />
</view>
<view @tap.stop="hideSearch" v-if="searchShow">取消</view> <view @tap.stop="hideSearch" v-if="searchShow">取消</view>
</view> </view>
</view> </view>
</view> </view>
<view :style="{ height: showStatus ? statusHeight : 0 }" class="tranistion status overflow-hide"> <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" <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">
v-for="(item,index) in status" :key="index">
<view :class="{ 'color-main': nowStatusIndex === index }">{{ item }}</view> <view :class="{ 'color-main': nowStatusIndex === index }">{{ item }}</view>
<uni-icons v-if="nowStatusIndex === index" type="checkmarkempty" :color="$utils.ColorMain"></uni-icons> <uni-icons v-if="nowStatusIndex === index" type="checkmarkempty" :color="$utils.ColorMain"></uni-icons>
</view> </view>
<view :style="{ height: statusBootom + 'px' }"></view> <view :style="{ height: statusBootom + 'px' }"></view>
</view> </view>
</view> </view>
</view> </view>
<view class="u-flex u-p-30"> <view class="u-flex u-p-30">
@@ -100,7 +124,7 @@
<view>充值总额</view> <view>充值总额</view>
<view class="u-font-32 u-m-t-10">0.00</view> <view class="u-font-32 u-m-t-10">0.00</view>
</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>充值人次</view>
<view class="u-font-32 u-m-t-10">0</view> <view class="u-font-32 u-m-t-10">0</view>
</view> </view>
@@ -110,14 +134,13 @@
<view>退款总额</view> <view>退款总额</view>
<view class="u-font-32 u-m-t-10">0.00</view> <view class="u-font-32 u-m-t-10">0.00</view>
</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>退款金额</view>
<view class="u-font-32 u-m-t-10">0</view> <view class="u-font-32 u-m-t-10">0</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<my-model ref="model" :desc="modelData.desc"></my-model> <my-model ref="model" :desc="modelData.desc"></my-model>
@@ -126,32 +149,30 @@
</template> </template>
<script setup> <script setup>
import { import { computed, reactive, ref } from 'vue';
computed, import myTabs from '@/components/my-components/my-tabs.vue';
reactive, import myIcons from '@/components/my-components/my-icons.vue';
ref import mySwitch from '@/components/my-components/my-switch.vue';
} from 'vue'; import myButton from '@/components/my-components/my-button.vue';
import myTabs from '@/components/my-components/my-tabs.vue' import myModel from '@/components/my-components/my-model.vue';
import myIcons from '@/components/my-components/my-icons.vue' import myDatePickerview from '@/components/my-components/my-date-pickerview';
import mySwitch from '@/components/my-components/my-switch.vue' import rechargeItem from './components/recharge-item.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 $util from '@/commons/utils/getDateArea.js';
import go from '@/commons/utils/go.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({ const modelData = reactive({
desc: '' desc: ''
}) });
function rechargeItemDel(e) { function rechargeItemDel(e) {
modelData.desc=`确定删除【${Number(e.data.price).toFixed(2)}】面额吗?` modelData.desc = `确定删除【${Number(e.data.price).toFixed(2)}】面额吗?`;
model.value.open() model.value.open();
console.log(e); console.log(e);
} }
function toAddRecharge() { function toAddRecharge() {
go.to('PAGES_RECHARGE_ADD_RECHARGE') go.to('PAGES_RECHARGE_ADD_RECHARGE');
} }
const rechargeLists = ref([ const rechargeLists = ref([
@@ -165,68 +186,114 @@
price: 500, price: 500,
desc: '60.00元、4张券' desc: '60.00元、4张券'
} }
]) ]);
let mustBindPhone = ref(true);
const nowDate = new Date();
let mustBindPhone=ref(true)
const nowDate=new Date()
const filters = reactive({ const filters = reactive({
time: { time: {
start: $util.getDayArea(nowDate, 'start'), start: $util.getDayArea(nowDate, 'start'),
end: $util.getDayArea(nowDate, 'end') end: $util.getDayArea(nowDate, 'end')
} }
}) });
const tabsList = ['充值面额', '充值设置', '充值记录'] const tabsList = ['充值面额', '充值设置', '充值记录'];
let tabsCurrent = ref(2) let tabsCurrent = ref(0);
let showStatus=ref(false) const settingForm = ref({
function showStatusToggle(){ id: '',
showStatus.value=!showStatus.value 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(() => { 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() { function showSearch() {
searchShow.value = true searchShow.value = true;
} }
const status = ['全部', '未支付', '支付成功'] const status = ['全部', '未支付', '支付成功'];
let nowStatusIndex = ref(0) let nowStatusIndex = ref(0);
function changeNowStatusIndex(i) { function changeNowStatusIndex(i) {
nowStatusIndex.value = i nowStatusIndex.value = i;
showStatus.value=false showStatus.value = false;
} }
function hideSearch() { function hideSearch() {
searchShow.value = false searchShow.value = false;
} }
function tabsChange(i) { function tabsChange(i) {
console.log(i); console.log(i);
tabsCurrent.value = i tabsCurrent.value = i;
} }
let keyword = ref('') let keyword = ref('');
function searchConfirm(e) { function searchConfirm(e) {
console.log(e) console.log(e);
} }
const datePicker=ref(null) const datePicker = ref(null);
function timeToggle() { function timeToggle() {
datePicker.value.toggle() datePicker.value.toggle();
showStatus.value=false showStatus.value = false;
} }
function datePickerConfirm(e) { function datePickerConfirm(e) {
console.log(e); console.log(e);
filters.time.start=e.start filters.time.start = e.start;
filters.time.end=e.end filters.time.end = e.end;
} }
onLoad(() => {
shopRechargeGetAjax();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -234,13 +301,13 @@
overflow: hidden; overflow: hidden;
} }
.border { .border {
border: 1px solid #E5E5E5; border: 1px solid #e5e5e5;
} }
.border-r-12 { .border-r-12 {
border-radius: 12rpx; border-radius: 12rpx;
} }
.recoreds { .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); box-shadow: 0rpx 20rpx 60rpx 2rpx rgba(92, 112, 248, 0.2);
border-radius: 14rpx 14rpx 14rpx 14rpx; border-radius: 14rpx 14rpx 14rpx 14rpx;
padding: 32rpx 40rpx 40rpx 48rpx; padding: 32rpx 40rpx 40rpx 48rpx;
@@ -249,7 +316,8 @@
line-height: 30px; line-height: 30px;
} }
.status { .status {
position: absolute;top: 100%; position: absolute;
top: 100%;
left: 0; left: 0;
right: 0; right: 0;
z-index: 10; z-index: 10;
@@ -279,13 +347,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
// width: 164rpx; // width: 164rpx;
transition: all .3s ease-in-out; transition: all 0.3s ease-in-out;
background-color: rgb(247, 247, 247); background-color: rgb(247, 247, 247);
border-radius: 100px; border-radius: 100px;
} }
} }
.time-area { .time-area {
background: #E6F0FF; background: #e6f0ff;
border-radius: 100px; border-radius: 100px;
padding: 10rpx 20rpx; padding: 10rpx 20rpx;
} }
@@ -295,4 +363,27 @@
justify-content: center; justify-content: center;
align-items: 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> </style>