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

@@ -152,4 +152,28 @@ export function couponGetRecord(params) {
method: 'get', method: 'get',
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
});
} }

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

File diff suppressed because it is too large Load Diff

465
pageRecharge/index.vue
View File

@@ -5,52 +5,77 @@
<myTabs :defaultIndex="tabsCurrent" :list="tabsList" @change="tabsChange"></myTabs> <myTabs :defaultIndex="tabsCurrent" :list="tabsList" @change="tabsChange"></myTabs>
</view> </view>
</view> </view>
<template v-if="tabsCurrent===0"> <template v-if="tabsCurrent === 0">
<view class="u-p-30"> <view class="u-p-30">
<view class="u-flex bg-fff u-p-30 border-r-12" @tap="toAddRecharge"> <view class="u-flex bg-fff u-p-30 border-r-12" @tap="toAddRecharge">
<view class="u-m-r-22 "> <view class="u-m-r-22">
<my-icons type="add"></my-icons> <my-icons type="add"></my-icons>
</view> </view>
<view class="">添加充值面额</view> <view class="">添加充值面额</view>
</view> </view>
</view> </view>
<view class="u-p-30"> <view class="u-p-30">
<view class="u-m-b-32" v-for="(item,index) in rechargeLists" :key="index"> <view class="u-m-b-32" v-for="(item, index) in rechargeLists" :key="index">
<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">
<view class="box-shadow u-relative"> <view class="box-shadow u-relative">
<view class="u-flex u-row-between u-p-30 u-relative"> <view class="u-flex u-row-between u-p-30 u-relative">
<view class="u-flex u-col-center" @tap="timeToggle"> <view class="u-flex u-col-center" @tap="timeToggle">
<text class="color-main">充值时间</text> <text class="color-main">充值时间</text>
<view class="icon-down u-m-l-6"> <view class="icon-down u-m-l-6">
@@ -58,31 +83,30 @@
</view> </view>
</view> </view>
<view class="u-flex u-col-center" @tap="showStatusToggle"> <view class="u-flex u-col-center" @tap="showStatusToggle">
<text :class="{'color-main':nowStatusIndex>=1}">状态</text> <text :class="{ 'color-main': nowStatusIndex >= 1 }">状态</text>
<view class="icon-down u-m-l-6"> <view class="icon-down u-m-l-6">
<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,189 +134,256 @@
<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>
<my-date-pickerview @confirm="datePickerConfirm" ref="datePicker"></my-date-pickerview> <my-date-pickerview @confirm="datePickerConfirm" ref="datePicker"></my-date-pickerview>
</view> </view>
</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 $util from '@/commons/utils/getDateArea.js';
import myModel from '@/components/my-components/my-model.vue' import go from '@/commons/utils/go.js';
import myDatePickerview from '@/components/my-components/my-date-pickerview' import { shopRechargePost, shopRechargeGet } from '@/http/api/market/index.js';
import rechargeItem from './components/recharge-item.vue' import { onLoad } from '@dcloudio/uni-app';
import $util from '@/commons/utils/getDateArea.js';
import go from '@/commons/utils/go.js';
const model=ref(null)
const modelData=reactive({
desc:''
})
function rechargeItemDel(e){
modelData.desc=`确定删除【${Number(e.data.price).toFixed(2)}】面额吗?`
model.value.open()
console.log(e);
}
function toAddRecharge(){
go.to('PAGES_RECHARGE_ADD_RECHARGE')
}
const rechargeLists=ref([
{
id:1,
price:200,
desc:'20.00元、2张券'
},
{
id:2,
price:500,
desc:'60.00元、4张券'
}
])
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)
let showStatus=ref(false)
function showStatusToggle(){
showStatus.value=!showStatus.value
}
const statusBootom=14
const statusHeight= computed(()=>{
return 30*status.length+statusBootom +'px'
})
let searchShow = ref(false) const model = ref(null);
const modelData = reactive({
desc: ''
});
function rechargeItemDel(e) {
modelData.desc = `确定删除【${Number(e.data.price).toFixed(2)}】面额吗?`;
model.value.open();
console.log(e);
}
function toAddRecharge() {
go.to('PAGES_RECHARGE_ADD_RECHARGE');
}
function showSearch() { const rechargeLists = ref([
searchShow.value = true {
} id: 1,
const status = ['全部', '未支付', '支付成功'] price: 200,
let nowStatusIndex = ref(0) desc: '20.00元、2张券'
function changeNowStatusIndex(i) { },
nowStatusIndex.value = i {
showStatus.value=false id: 2,
} price: 500,
function hideSearch() { desc: '60.00元、4张券'
searchShow.value = false
} }
]);
function tabsChange(i) { let mustBindPhone = ref(true);
console.log(i); const nowDate = new Date();
tabsCurrent.value = i const filters = reactive({
time: {
start: $util.getDayArea(nowDate, 'start'),
end: $util.getDayArea(nowDate, 'end')
} }
});
const tabsList = ['充值面额', '充值设置', '充值记录'];
let tabsCurrent = ref(0);
let keyword = ref('') const settingForm = ref({
id: '',
isCustom: 1, // 自定义金额
useType: 'all',
shopIdList: [], // 可用门店
isOrder: 1, // 充值并下单
remark: ''
});
function searchConfirm(e) { function useTypeChange(e) {
console.log(e) if (e == 'all') {
settingForm.value.shopIdList = [];
} }
}
const datePicker=ref(null)
function timeToggle(){ // 获取设置
datePicker.value.toggle() async function shopRechargeGetAjax() {
showStatus.value=false try {
const res = await shopRechargeGet();
settingForm.value = res;
} catch (error) {
console.log(error);
} }
function datePickerConfirm(e){ }
console.log(e);
filters.time.start=e.start // 保存充值设置
filters.time.end=e.end 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';
});
let searchShow = ref(false);
function showSearch() {
searchShow.value = true;
}
const status = ['全部', '未支付', '支付成功'];
let nowStatusIndex = ref(0);
function changeNowStatusIndex(i) {
nowStatusIndex.value = i;
showStatus.value = false;
}
function hideSearch() {
searchShow.value = false;
}
function tabsChange(i) {
console.log(i);
tabsCurrent.value = i;
}
let keyword = ref('');
function searchConfirm(e) {
console.log(e);
}
const datePicker = ref(null);
function timeToggle() {
datePicker.value.toggle();
showStatus.value = false;
}
function datePickerConfirm(e) {
console.log(e);
filters.time.start = e.start;
filters.time.end = e.end;
}
onLoad(() => {
shopRechargeGetAjax();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.u-overflow-hide{ .u-overflow-hide {
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;
} }
.lh30 { .lh30 {
line-height: 30px; line-height: 30px;
} }
.status { .status {
position: absolute;top: 100%; position: absolute;
left: 0; top: 100%;
right: 0; left: 0;
z-index: 10; right: 0;
background-color: #fff; z-index: 10;
} background-color: #fff;
.input-icon { }
width: 28rpx; .input-icon {
height: 28rpx; width: 28rpx;
} height: 28rpx;
}
.box-shadow { .box-shadow {
box-shadow: 0 0 5px #eee; box-shadow: 0 0 5px #eee;
} }
.search-box { .search-box {
background-color: #fff; background-color: #fff;
padding: 16rpx 0; padding: 16rpx 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
position: absolute; position: absolute;
right: 30rpx; right: 30rpx;
display: flex;
.search-btn {
padding: 0 30rpx;
box-sizing: border-box;
display: flex; display: flex;
align-items: center;
.search-btn { // width: 164rpx;
padding: 0 30rpx; transition: all 0.3s ease-in-out;
box-sizing: border-box; background-color: rgb(247, 247, 247);
border-radius: 100px;
}
}
.time-area {
background: #e6f0ff;
border-radius: 100px;
padding: 10rpx 20rpx;
}
.icon-down {
transform: rotate(90deg);
display: flex;
justify-content: center;
align-items: center;
}
.card-wrap {
padding: 28upx 28upx 0;
.card {
background-color: #fff;
border-radius: 20upx;
padding: 28upx;
.header {
display: flex; display: flex;
align-items: center; justify-content: space-between;
// width: 164rpx; padding-bottom: 12upx;
transition: all .3s ease-in-out; .title {
background-color: rgb(247, 247, 247); font-size: 28upx;
border-radius: 100px; font-weight: bold;
}
}
.tips {
.t {
font-size: 28upx;
color: #999;
}
} }
} }
.time-area{ }
background: #E6F0FF; </style>
border-radius: 100px;
padding: 10rpx 20rpx;
}
.icon-down {
transform: rotate(90deg);
display: flex;
justify-content: center;
align-items: center;
}
</style>