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

完成智慧充值模块

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

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

@@ -168,12 +168,24 @@ export function shopRechargePost(data) {
/**
* 智慧充值规/配置信息获取
* @param {Object} parmas
* @param {Object} data
*/
export function shopRechargeGet(parmas) {
export function shopRechargeGet(data) {
return request({
url: `${urlType}/admin/shopRecharge`,
method: 'get',
parmas
data
});
}
/**
* 获取店铺用户充值记录
* @param {Object} data
*/
export function shopUserFlow(data) {
return request({
url: `/account/admin/shopUser/flow`,
method: 'get',
data
});
}

285
pageMarket/components/choose-coupon.vue
View File

@@ -1,28 +1,16 @@
<template>
<view class="">
<up-popup :show="show" mode="bottom">
<view class="">
<view class="top u-flex u-row-between">
<text class="font-bold u-font-32 color-333">{{ title }}</text>
<up-icon size="18" name="close" @click="show = false"></up-icon>
</view>
<scroll-view
ref="couponScroll"
:scroll-y="true"
style="max-height: 50vh"
@scroll="scroll"
:scroll-top="scrollTop"
>
<view
v-for="(item, index) in list"
:key="index"
class="item"
@click="itemClick(item)"
:class="[selGoods && selGoods.id == item.id ? 'selected' : '']"
>
<view class="u-flex u-row-between">
<view class="u-flex gap-20">
<!-- <view class="u-flex" @click.stop="preview(item)">
<view class="">
<up-popup :show="show" mode="bottom">
<view class="">
<view class="top u-flex u-row-between">
<text class="font-bold u-font-32 color-333">{{ title }}</text>
<up-icon size="18" name="close" @click="show = false"></up-icon>
</view>
<scroll-view ref="couponScroll" :scroll-y="true" style="max-height: 50vh" @scroll="scroll" :scroll-top="scrollTop">
<view v-for="(item, index) in list" :key="index" class="item" @click="itemClick(item)" :class="[selGoods && selGoods.id == item.id ? 'selected' : '']">
<view class="u-flex u-row-between">
<view class="u-flex gap-20">
<!-- <view class="u-flex" @click.stop="preview(item)">
<up-image
:src="item.coverImg"
width="80rpx"
@@ -30,172 +18,169 @@
></up-image>
</view> -->
<text class="u-font-32 color-333">{{ item.title }}</text>
</view>
<text class="u-font-32 color-red u-p-l-30"
></text
>
</view>
</view>
<up-empty v-if="list.length == 0" class="u-p-30" text="暂无数据"></up-empty>
</scroll-view>
<view class="bottom">
<view class="btn cancel" @click="close">{{ cancelText }}</view>
<view class="btn success" @click="confirm">{{ confirmText }}</view>
</view>
</view>
</up-popup>
</view>
<text class="u-font-32 color-333">{{ item.title }}</text>
</view>
<text class="u-font-32 color-red u-p-l-30"></text>
</view>
</view>
<up-empty v-if="list.length == 0" class="u-p-30" text="暂无数据"></up-empty>
</scroll-view>
<view class="bottom">
<view class="btn cancel" @click="close">{{ cancelText }}</view>
<view class="btn success" @click="confirm">{{ confirmText }}</view>
</view>
</view>
</up-popup>
</view>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { ref, onMounted, watch } from 'vue';
const modelValue = defineModel({
type: String,
default: "",
type: String,
default: ''
});
const show = defineModel("show", {
type: String,
default: "",
const show = defineModel('show', {
type: String,
default: ''
});
const couponName = defineModel("couponName", {
type: String,
default: "",
const couponName = defineModel('couponName', {
type: String,
default: ''
});
const props = defineProps({
title: {
type: String,
default: "选择优惠券",
},
confirmText: {
type: String,
default: "确认",
},
cancelText: {
type: String,
default: "取消",
},
list: {
type: Array,
default: () => [],
},
title: {
type: String,
default: '选择优惠券'
},
confirmText: {
type: String,
default: '确认'
},
cancelText: {
type: String,
default: '取消'
},
list: {
type: Array,
default: () => []
}
});
const selGoods = ref("");
const selGoods = ref('');
function itemClick(item) {
if (selGoods.value && selGoods.value.id == item.id) {
selGoods.value = "";
return;
}
selGoods.value = item;
if (selGoods.value && selGoods.value.id == item.id) {
selGoods.value = '';
return;
}
selGoods.value = item;
}
const scrollTop = ref(0);
function scroll(e) {
scrollTop.value = e.detail.scrollTop;
scrollTop.value = e.detail.scrollTop;
}
function preview(item) {
uni.previewImage({
urls: item.images || [item.coverImg],
});
uni.previewImage({
urls: item.images || [item.coverImg]
});
}
watch(
() => modelValue.value,
(newVal, oldVal) => {
console.log(newVal, oldVal);
selGoods.value = props.list.find((item) => item.id == newVal);
console.log(selGoods.value);
if (selGoods.value) {
couponName.value = selGoods.value.title;
}
}
() => modelValue.value,
(newVal, oldVal) => {
console.log(newVal, oldVal);
selGoods.value = props.list.find((item) => item.id == newVal);
console.log(selGoods.value);
if (selGoods.value) {
couponName.value = selGoods.value.title;
}
}
);
watch(
() => props.list.length,
(newVal, oldVal) => {
selGoods.value = props.list.find((item) => item.id == modelValue.value);
console.log(selGoods.value);
if (selGoods.value) {
modelValue.value = selGoods.value.id;
couponName.value = selGoods.value.title;
}
}
() => props.list.length,
(newVal, oldVal) => {
selGoods.value = props.list.find((item) => item.id == modelValue.value);
console.log(selGoods.value);
if (selGoods.value) {
modelValue.value = selGoods.value.id;
couponName.value = selGoods.value.title;
}
}
);
function close() {
show.value = false;
show.value = false;
}
const emit = defineEmits(["confirm"]);
const emit = defineEmits(['confirm']);
function confirm() {
if (!selGoods.value) {
uni.showToast({
title: "请选择优惠券",
icon: "none",
});
return;
}
modelValue.value = selGoods.value.id;
show.value = false;
emit("confirm", selGoods.value);
if (!selGoods.value) {
uni.showToast({
title: '请选择优惠券',
icon: 'none'
});
return;
}
modelValue.value = selGoods.value.id;
show.value = false;
emit('confirm', selGoods.value);
}
</script>
<style lang="scss">
.popup-content {
background: #fff;
width: 640rpx;
border-radius: 18rpx;
background: #fff;
width: 640rpx;
border-radius: 18rpx;
}
.top {
padding: 40rpx 48rpx;
border-bottom: 1px solid #d9d9d9;
padding: 40rpx 48rpx;
border-bottom: 1px solid #d9d9d9;
}
.bottom {
padding: 48rpx 52rpx;
display: flex;
justify-content: space-between;
border-top: 1px solid #d9d9d9;
gap: 50rpx;
.btn {
flex: 1;
text-align: center;
padding: 18rpx 60rpx;
border-radius: 100rpx;
font-size: 32rpx;
border: 2rpx solid transparent;
&.success {
background-color: $my-main-color;
color: #fff;
}
&.cancel {
border-color: #d9d9d9;
box-shadow: 0 4rpx 0 0 #00000005;
}
}
padding: 48rpx 52rpx;
display: flex;
justify-content: space-between;
border-top: 1px solid #d9d9d9;
gap: 50rpx;
.btn {
flex: 1;
text-align: center;
padding: 18rpx 60rpx;
border-radius: 100rpx;
font-size: 32rpx;
border: 2rpx solid transparent;
&.success {
background-color: $my-main-color;
color: #fff;
}
&.cancel {
border-color: #d9d9d9;
box-shadow: 0 4rpx 0 0 #00000005;
}
}
}
.item {
padding: 10rpx 30rpx;
border: 1px solid #d9d9d9;
margin: 10rpx;
border-radius: 8rpx;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 10px transparent;
&.selected {
border-color: $my-main-color;
box-shadow: 0 0 10px $my-main-color;
}
padding: 10rpx 30rpx;
border: 1px solid #d9d9d9;
margin: 10rpx;
border-radius: 8rpx;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 10px transparent;
&.selected {
border-color: $my-main-color;
box-shadow: 0 0 10px $my-main-color;
}
}
.choose-goods {
display: flex;
padding: 24rpx;
align-items: center;
border-radius: 8rpx;
border: 2rpx solid #d9d9d9;
background: #fff;
font-size: 28rpx;
font-weight: 400;
display: flex;
padding: 24rpx;
align-items: center;
border-radius: 8rpx;
border: 2rpx solid #d9d9d9;
background: #fff;
font-size: 28rpx;
font-weight: 400;
}
</style>

123
pageMarket/components/coupon-list.vue
View File

@@ -1,92 +1,79 @@
<template>
<view>
<view
class="u-flex u-row-between u-m-b-24"
style="gap: 40rpx"
v-for="(item, index) in modelValue"
:key="index"
>
<view
class="choose-coupon u-flex-1 u-flex u-row-between"
@click="showCoupon(item, index)"
>
<template v-if="item.title">
<text>{{ item.title }}</text>
<view class="u-flex" @click.stop="item.title = ''">
<up-icon name="close" size="14"></up-icon>
</view>
</template>
<view>
<view class="u-flex u-row-between u-m-b-24" style="gap: 40rpx" v-for="(item, index) in modelValue" :key="index">
<view class="choose-coupon u-flex-1 u-flex u-row-between" @click="showCoupon(item, index)">
<template v-if="item.title">
<text>{{ item.title }}</text>
<view class="u-flex" @click.stop="item.title = ''">
<up-icon name="close" size="14"></up-icon>
</view>
</template>
<template v-else>
<text class="color-999">选择赠送券</text>
<up-icon name="arrow-down" size="14"></up-icon>
</template>
</view>
<view class="u-flex-1 u-flex">
<view class="u-flex-1 choose-coupon u-flex">
<input
class="u-flex-1"
placeholder=""
type="number"
v-model="item.num"
placeholder-class="color-999 u-font-28"
/>
<text class="no-wrap color-999">张/1个码</text>
</view>
<view class="u-m-l-20">
<up-icon name="minus-circle-fill" color="#EB4F4F" size="18" @click="removeCoupon(index)"></up-icon>
</view>
</view>
</view>
<chooseCoupon
v-model="chooseCouponData.couponId"
v-model:show="chooseCouponData.show"
@confirm="confirmCoupon"
:list="couponList"
></chooseCoupon>
</view>
<template v-else>
<text class="color-999">选择赠送券</text>
<up-icon name="arrow-down" size="14"></up-icon>
</template>
</view>
<view class="u-flex-1 u-flex">
<view class="u-flex-1 choose-coupon u-flex">
<input class="u-flex-1" placeholder="" type="number" v-model="item.num" placeholder-class="color-999 u-font-28" />
<text class="no-wrap color-999">{{ tips }}</text>
</view>
<view class="u-m-l-20">
<up-icon name="minus-circle-fill" color="#EB4F4F" size="18" @click="removeCoupon(index)"></up-icon>
</view>
</view>
</view>
<chooseCoupon v-model="chooseCouponData.couponId" v-model:show="chooseCouponData.show" @confirm="confirmCoupon" :list="couponList"></chooseCoupon>
</view>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import chooseCoupon from "./choose-coupon.vue";
import { couponPage } from "@/http/api/market/index.js";
import { reactive, ref, onMounted } from 'vue';
import chooseCoupon from './choose-coupon.vue';
import { couponPage } from '@/http/api/market/index.js';
const props = defineProps({
tips: {
type: String,
default: '张/1个码'
}
});
const chooseCouponData = reactive({
couponId: "",
show: false,
index: -1,
item: null,
couponId: '',
show: false,
index: -1,
item: null
});
const modelValue = defineModel({
type: Array,
default: () => [],
type: Array,
default: () => []
});
const couponList = ref([]);
function showCoupon(item, index) {
chooseCouponData.couponId = item ? item.id : "";
chooseCouponData.show = true;
chooseCouponData.index = index;
chooseCouponData.item = item;
chooseCouponData.couponId = item ? item.id : '';
chooseCouponData.show = true;
chooseCouponData.index = index;
chooseCouponData.item = item;
}
function confirmCoupon(e) {
modelValue.value[chooseCouponData.index].id = e.id;
modelValue.value[chooseCouponData.index].title = e.title;
modelValue.value[chooseCouponData.index].id = e.id;
modelValue.value[chooseCouponData.index].title = e.title;
}
function removeCoupon(index) {
modelValue.value.splice(index, 1);
modelValue.value.splice(index, 1);
}
onMounted(() => {
couponPage({ size: 999 }).then((res) => {
couponList.value = res.records;
});
couponPage({ size: 999 }).then((res) => {
couponList.value = res.records;
});
});
</script>
<style lang="scss" scoped>
.choose-coupon {
padding: 10rpx 20rpx;
border-radius: 8rpx;
border: 1px solid #d9d9d9;
padding: 10rpx 20rpx;
border-radius: 8rpx;
border: 1px solid #d9d9d9;
}
</style>

294
pageMarket/couponExchangeCode/add.vue
View File

@@ -1,174 +1,146 @@
<template>
<view class="min-page bg-f7 default-box-padding u-font-28 color-333">
<view class="default-box-padding bg-fff default-box-radius">
<view>
<view class="font-bold u-m-b-16">兑换码名称</view>
<up-input
placeholder="请输入兑换码名称"
border="none"
v-model="form.name"
placeholder-class="color-999 u-font-28"
></up-input>
<view class="u-m-t-24">
<up-line></up-line>
</view>
</view>
<view class="min-page bg-f7 default-box-padding u-font-28 color-333">
<view class="default-box-padding bg-fff default-box-radius">
<view>
<view class="font-bold u-m-b-16">兑换码名称</view>
<up-input placeholder="请输入兑换码名称" border="none" v-model="form.name" placeholder-class="color-999 u-font-28"></up-input>
<view class="u-m-t-24">
<up-line></up-line>
</view>
</view>
<view class="u-m-t-24">
<view class="font-bold u-m-b-16">活动日期</view>
<DateTimePicker
v-model:startTime="form.startTime"
v-model:endTime="form.endTime"
>
</DateTimePicker>
</view>
<view class="u-m-t-24">
<view class="font-bold u-m-b-16">发行数量</view>
<view class="u-flex u-m-t-16">
<input
class="number-box"
placeholder="请输入"
placeholder-class="color-999 u-font-28"
type="number"
v-model="form.total"
/>
<view class="unit">个</view>
</view>
</view>
</view>
<view class="default-box-padding bg-fff default-box-radius u-m-t-32">
<view class="font-bold">优惠券</view>
<view class="u-m-t-16">
<CouponList v-model="form.couponInfoList"></CouponList>
</view>
<up-line></up-line>
<view class="u-m-t-16 u-flex">
<view class="u-flex" @click="addCoupon">
<up-icon name="plus-circle-fill" color="#318AFE" size="18"></up-icon>
<text class="font-bold u-m-l-20">添加</text>
</view>
</view>
</view>
<my-bottom-btn-group
@cancel="cancel"
@save="save"
direction="column"
></my-bottom-btn-group>
</view>
<view class="u-m-t-24">
<view class="font-bold u-m-b-16">活动日期</view>
<DateTimePicker v-model:startTime="form.startTime" v-model:endTime="form.endTime"></DateTimePicker>
</view>
<view class="u-m-t-24">
<view class="font-bold u-m-b-16">发行数量</view>
<view class="u-flex u-m-t-16">
<input class="number-box" placeholder="请输入" placeholder-class="color-999 u-font-28" type="number" v-model="form.total" />
<view class="unit">个</view>
</view>
</view>
</view>
<view class="default-box-padding bg-fff default-box-radius u-m-t-32">
<view class="font-bold">优惠券</view>
<view class="u-m-t-16">
<CouponList v-model="form.couponInfoList"></CouponList>
</view>
<up-line></up-line>
<view class="u-m-t-16 u-flex">
<view class="u-flex" @click="addCoupon">
<up-icon name="plus-circle-fill" color="#318AFE" size="18"></up-icon>
<text class="font-bold u-m-l-20">添加</text>
</view>
</view>
</view>
<my-bottom-btn-group @cancel="cancel" @save="save" direction="column"></my-bottom-btn-group>
</view>
</template>
<script setup>
import { reactive, onMounted } from "vue";
import DateTimePicker from "@/pageMarket/components/date-time-picker.vue";
import CouponList from "@/pageMarket/components/coupon-list.vue";
import * as couponRedemptionApi from "@/http/api/market/couponRedemption.js";
import {
onLoad,
onReady,
onShow,
onPageScroll,
onReachBottom,
onBackPress,
} from "@dcloudio/uni-app";
import { reactive, onMounted } from 'vue';
import DateTimePicker from '@/pageMarket/components/date-time-picker.vue';
import CouponList from '@/pageMarket/components/coupon-list.vue';
import * as couponRedemptionApi from '@/http/api/market/couponRedemption.js';
import { onLoad, onReady, onShow, onPageScroll, onReachBottom, onBackPress } from '@dcloudio/uni-app';
function cancel() {
uni.navigateBack({
delta: 1,
});
uni.navigateBack({
delta: 1
});
}
const form = reactive({
name: "",
startTime: "",
endTime: "",
stock: "",
total: 0,
couponInfoList: [
{
id: "",
num: "",
title: "",
},
],
name: '',
startTime: '',
endTime: '',
stock: '',
total: 0,
couponInfoList: [
{
id: '',
num: '',
title: ''
}
]
});
function save() {
if (!form.name) {
uni.showToast({
title: "请输入兑换码名称",
icon: "none",
});
return;
}
if (!form.startTime || !form.endTime) {
uni.showToast({
title: "请选择活动日期",
icon: "none",
});
return;
}
if (!form.name) {
uni.showToast({
title: '请输入兑换码名称',
icon: 'none'
});
return;
}
if (!form.startTime || !form.endTime) {
uni.showToast({
title: '请选择活动日期',
icon: 'none'
});
return;
}
if (!form.total) {
uni.showToast({
title: "请输入发行数量",
icon: "none",
});
return;
}
if (options.type == "edit") {
couponRedemptionApi
.editSuggest({
title: form.title,
id: form.id,
foods: form.foods,
useDays: form.useDays.join(","),
useStartTime: form.useStartTime,
useTimeType: form.useTimeType,
useEndTime: form.useEndTime,
})
.then((res) => {
uni.showToast({
title: "修改成功",
icon: "none",
});
setTimeout(() => {
uni.navigateBack({
delta: 1,
});
}, 1500);
});
return;
}
console.log('form.couponInfoList',form.couponInfoList)
if (!form.total) {
uni.showToast({
title: '请输入发行数量',
icon: 'none'
});
return;
}
if (options.type == 'edit') {
couponRedemptionApi
.editSuggest({
title: form.title,
id: form.id,
foods: form.foods,
useDays: form.useDays.join(','),
useStartTime: form.useStartTime,
useTimeType: form.useTimeType,
useEndTime: form.useEndTime
})
.then((res) => {
uni.showToast({
title: '修改成功',
icon: 'none'
});
setTimeout(() => {
uni.navigateBack({
delta: 1
});
}, 1500);
});
return;
}
console.log('form.couponInfoList', form.couponInfoList);
//判断优惠券列表是否选择了优惠券，数量是否填写
if (form.couponInfoList.some((item) => !item.id || !item.num)) {
uni.showToast({
title: "请选择优惠券并填写数量",
icon: "none",
});
return;
}
couponRedemptionApi.add(form).then((res) => {
uni.showToast({
title: "添加成功",
icon: "none",
});
setTimeout(() => {
uni.navigateBack({
delta: 1,
});
}, 1500);
});
//判断优惠券列表是否选择了优惠券，数量是否填写
if (form.couponInfoList.some((item) => !item.id || !item.num)) {
uni.showToast({
title: '请选择优惠券并填写数量',
icon: 'none'
});
return;
}
couponRedemptionApi.add(form).then((res) => {
uni.showToast({
title: '添加成功',
icon: 'none'
});
setTimeout(() => {
uni.navigateBack({
delta: 1
});
}, 1500);
});
}
function addCoupon() {
form.couponInfoList.push({
id: "",
num: "",
title: "",
});
form.couponInfoList.push({
id: '',
num: '',
title: ''
});
}
const options = reactive({});
onLoad((opt) => {});
@@ -176,16 +148,16 @@ onLoad((opt) => {});
<style lang="scss" scoped>
:deep(.my-hour-area .container) {
padding: 32rpx 28rpx;
background-color: #f7f7f7;
border-radius: 8rpx;
margin-top: 16rpx;
padding: 32rpx 28rpx;
background-color: #f7f7f7;
border-radius: 8rpx;
margin-top: 16rpx;
}
:deep(.my-hour-area .box) {
margin-top: 0 !important;
margin-top: 0 !important;
}
:deep(.fixed-bottom) {
left: 110rpx;
right: 110rpx;
left: 110rpx;
right: 110rpx;
}
</style>

2
pageMarket/limitDiscount/index.vue
View File

@@ -39,7 +39,7 @@
</view>
</view>
<u-loadmore :status="tableData.status"></u-loadmore>
<my-footer-btn @confirm="go.to('PAGES_LIMIT_DISCOUNT_ADD')"></my-footer-btn>
<my-footer-btn confirmText="添加" @confirm="go.to('PAGES_LIMIT_DISCOUNT_ADD')"></my-footer-btn>
</view>
</template>

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

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

186
pageRecharge/components/choose-coupon.vue Normal file
View File

@@ -0,0 +1,186 @@
<template>
<view class="">
<up-popup :show="show" mode="bottom">
<view class="">
<view class="top u-flex u-row-between">
<text class="font-bold u-font-32 color-333">{{ title }}</text>
<up-icon size="18" name="close" @click="show = false"></up-icon>
</view>
<scroll-view ref="couponScroll" :scroll-y="true" style="max-height: 50vh" @scroll="scroll" :scroll-top="scrollTop">
<view v-for="(item, index) in list" :key="index" class="item" @click="itemClick(item)" :class="[selGoods && selGoods.id == item.id ? 'selected' : '']">
<view class="u-flex u-row-between">
<view class="u-flex gap-20">
<!-- <view class="u-flex" @click.stop="preview(item)">
<up-image
:src="item.coverImg"
width="80rpx"
height="80rpx"
></up-image>
</view> -->
<text class="u-font-32 color-333">{{ item.title }}</text>
</view>
<text class="u-font-32 color-red u-p-l-30"></text>
</view>
</view>
<up-empty v-if="list.length == 0" class="u-p-30" text="暂无数据"></up-empty>
</scroll-view>
<view class="bottom">
<view class="btn cancel" @click="close">{{ cancelText }}</view>
<view class="btn success" @click="confirm">{{ confirmText }}</view>
</view>
</view>
</up-popup>
</view>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
const modelValue = defineModel({
type: String,
default: ''
});
const show = defineModel('show', {
type: Boolean,
default: ''
});
const couponName = defineModel('couponName', {
type: String,
default: ''
});
const props = defineProps({
title: {
type: String,
default: '选择优惠券'
},
confirmText: {
type: String,
default: '确认'
},
cancelText: {
type: String,
default: '取消'
},
list: {
type: Array,
default: () => []
}
});
const selGoods = ref('');
function itemClick(item) {
if (selGoods.value && selGoods.value.id == item.id) {
selGoods.value = '';
return;
}
selGoods.value = item;
}
const scrollTop = ref(0);
function scroll(e) {
scrollTop.value = e.detail.scrollTop;
}
function preview(item) {
uni.previewImage({
urls: item.images || [item.coverImg]
});
}
watch(
() => modelValue.value,
(newVal, oldVal) => {
console.log(newVal, oldVal);
selGoods.value = props.list.find((item) => item.id == newVal);
console.log(selGoods.value);
if (selGoods.value) {
couponName.value = selGoods.value.title;
}
}
);
watch(
() => props.list.length,
(newVal, oldVal) => {
selGoods.value = props.list.find((item) => item.id == modelValue.value);
console.log(selGoods.value);
if (selGoods.value) {
modelValue.value = selGoods.value.id;
couponName.value = selGoods.value.title;
}
}
);
function close() {
show.value = false;
}
const emit = defineEmits(['confirm']);
function confirm() {
if (!selGoods.value) {
uni.showToast({
title: '请选择优惠券',
icon: 'none'
});
return;
}
modelValue.value = selGoods.value.id;
show.value = false;
emit('confirm', selGoods.value);
}
</script>
<style lang="scss">
.popup-content {
background: #fff;
width: 640rpx;
border-radius: 18rpx;
}
.top {
padding: 40rpx 48rpx;
border-bottom: 1px solid #d9d9d9;
}
.bottom {
padding: 48rpx 52rpx;
display: flex;
justify-content: space-between;
border-top: 1px solid #d9d9d9;
gap: 50rpx;
.btn {
flex: 1;
text-align: center;
padding: 18rpx 60rpx;
border-radius: 100rpx;
font-size: 32rpx;
border: 2rpx solid transparent;
&.success {
background-color: $my-main-color;
color: #fff;
}
&.cancel {
border-color: #d9d9d9;
box-shadow: 0 4rpx 0 0 #00000005;
}
}
}
.item {
padding: 10rpx 30rpx;
border: 1px solid #d9d9d9;
margin: 10rpx;
border-radius: 8rpx;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 10px transparent;
&.selected {
border-color: $my-main-color;
box-shadow: 0 0 10px $my-main-color;
}
}
.choose-goods {
display: flex;
padding: 24rpx;
align-items: center;
border-radius: 8rpx;
border: 2rpx solid #d9d9d9;
background: #fff;
font-size: 28rpx;
font-weight: 400;
}
</style>

89
pageRecharge/components/coupon-list.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<view>
<view class="u-flex u-row-between u-m-b-24" style="gap: 40rpx" v-for="(item, index) in modelValue" :key="index">
<view class="choose-coupon u-flex-1 u-flex u-row-between" @click="showCoupon(item, index)">
<template v-if="item.title">
<text>{{ item.title }}</text>
<view class="u-flex" @click.stop="item.title = ''">
<up-icon name="close" size="14"></up-icon>
</view>
</template>
<template v-else>
<text class="color-999">选择赠送券</text>
<up-icon name="arrow-down" size="14"></up-icon>
</template>
</view>
<view class="u-flex-1 u-flex">
<view class="u-flex-1 choose-coupon u-flex">
<input class="u-flex-1" placeholder="" type="number" v-model="item.num" placeholder-class="color-999 u-font-28" @input="numInput($event, item)" />
<text class="no-wrap color-999">{{ tips }}</text>
</view>
<view class="u-m-l-20">
<up-icon name="minus-circle-fill" color="#EB4F4F" size="18" @click="removeCoupon(index)"></up-icon>
</view>
</view>
</view>
<chooseCoupon v-model="chooseCouponData.couponId" v-model:show="chooseCouponData.show" @confirm="confirmCoupon" :list="couponList"></chooseCoupon>
</view>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';
import chooseCoupon from './choose-coupon.vue';
import { couponPage } from '@/http/api/market/index.js';
import { filterNumberInput } from '@/utils/index.js';
const props = defineProps({
tips: {
type: String,
default: '张/1个码'
}
});
const chooseCouponData = reactive({
couponId: '',
show: false,
index: -1,
item: null
});
const modelValue = defineModel({
type: Array,
default: () => []
});
const couponList = ref([]);
function showCoupon(item, index) {
chooseCouponData.couponId = item ? item.id : '';
chooseCouponData.show = true;
chooseCouponData.index = index;
chooseCouponData.item = item;
}
function confirmCoupon(e) {
modelValue.value[chooseCouponData.index].id = e.id;
modelValue.value[chooseCouponData.index].title = e.title;
}
function removeCoupon(index) {
modelValue.value.splice(index, 1);
}
function numInput(e, item) {
console.log('e', e);
console.log('item', item);
setTimeout(() => {
item.num = filterNumberInput(e.detail.value, 1);
}, 50);
}
onMounted(() => {
console.log('coupon-list', modelValue.value);
couponPage({ size: 999 }).then((res) => {
couponList.value = res.records;
});
});
</script>
<style lang="scss" scoped>
.choose-coupon {
padding: 10rpx 20rpx;
border-radius: 8rpx;
border: 1px solid #d9d9d9;
}
</style>

108
pageRecharge/components/date-time-picker.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<view>
<view @click="open">
<slot v-if="$slots.default"> </slot>
<view v-else class="choose-goods u-flex u-row-between">
<text class="color-999" v-if="!startTime && !endTime"
>请选择日期范围</text
>
<text class="color-333 u-font-24 u-m-r-32 " v-else
>{{ startTime }} - {{ endTime }}</text
>
<view class="u-flex" v-if="startTime&&endTime" @click.stop="clear">
<up-icon name="close" size="14"></up-icon>
</view>
<up-icon size="14" name="arrow-right" v-else ></up-icon>
</view>
</view>
<my-date-pickerview
@confirm="datePickerConfirm"
mode="all"
ref="datePicker"
></my-date-pickerview>
</view>
</template>
<script setup>
import { ref } from "vue";
const datePicker = ref(null);
const startTime = defineModel("startTime", {
default: () => "",
type: String,
});
const endTime = defineModel("endTime", {
default: () => "",
type: String,
});
function clear(){
startTime.value = "";
endTime.value = "";
}
function open() {
datePicker.value.toggle();
}
function datePickerConfirm(e) {
startTime.value = e.start;
endTime.value = e.end;
console.log(e);
}
</script>
<style lang="scss">
.popup-content {
background: #fff;
width: 640rpx;
border-radius: 18rpx;
}
.top {
padding: 40rpx 48rpx;
border-bottom: 1px solid #d9d9d9;
}
.bottom {
padding: 48rpx 52rpx;
display: flex;
justify-content: space-between;
border-top: 1px solid #d9d9d9;
gap: 50rpx;
.btn {
flex: 1;
text-align: center;
padding: 18rpx 60rpx;
border-radius: 100rpx;
font-size: 32rpx;
border: 2rpx solid transparent;
&.success {
background-color: $my-main-color;
color: #fff;
}
&.cancel {
border-color: #d9d9d9;
box-shadow: 0 4rpx 0 0 #00000005;
}
}
}
.item {
padding: 10rpx 30rpx;
border: 1px solid #d9d9d9;
margin: 10rpx;
border-radius: 8rpx;
transition: all 0.3s ease-in-out;
box-shadow: 0 0 10px transparent;
&.selected {
border-color: $my-main-color;
box-shadow: 0 0 10px $my-main-color;
}
}
.choose-goods {
display: flex;
padding: 24rpx;
align-items: center;
border-radius: 8rpx;
border: 2rpx solid #d9d9d9;
background: #fff;
font-size: 28rpx;
font-weight: 400;
min-height: 90rpx;
}
</style>

127
pageRecharge/components/recharge-item.vue
View File

@@ -1,79 +1,98 @@
<template>
<view class=" item">
<view class="u-flex ">
<view class="color-333 u-flex font-bold ">
<view class="u-font-40">{{to2(props.data.price) }}</view>
<view class="item">
<view class="u-flex">
<view class="color-333 u-flex font-bold">
<view class="u-font-40">{{ to2(data.amount) }}</view>
<view>元</view>
</view>
<view class="u-font-24 u-m-l-20 color-999 id">
id:{{props.data.id}}
</view>
<view class="u-font-24 u-m-l-20 color-999 id">ID:{{ data.id }}</view>
</view>
<view class="u-m-t-32 u-p-22 desc">
<view class="u-m-t-32 u-p-22 desc" v-if="returnSendStr.length">
<text class="color-999">充值赠送</text>
<text class="u-m-l-16 color-333">{{props.data.desc}}</text>
<text class="u-m-l-16 color-333">
{{ returnSendStr.join('、') }}
</text>
</view>
<view class="u-flex u-row-right u-m-t-32 gap-20">
<view class="" style="width: 140rpx;">
<view class="" style="width: 140rpx">
<my-button plain height="56" type="cancel" shape="circle" @tap="del">删除</my-button>
</view>
<view class="" style="width: 140rpx;">
<view class="" style="width: 140rpx">
<my-button height="56" shape="circle" @tap="toEdit">编辑</my-button>
</view>
</view>
</view>
</template>
<script setup>
import go from '@/commons/utils/go.js';
import myButton from '@/components/my-components/my-button.vue'
const props = defineProps({
index:{
type:Number,
default:-1
},
data: {
type: Object,
default: () => {
return {}
}
import { computed } from 'vue';
import go from '@/commons/utils/go.js';
import myButton from '@/components/my-components/my-button.vue';
const props = defineProps({
index: {
type: Number,
default: -1
},
data: {
type: Object,
default: () => {
return {};
}
})
const emits=defineEmits(['del'])
function del(){
emits('del',{
index:props.index,
data:props.data
})
}
function toEdit(){
go.to('PAGES_RECHARGE_ADD_RECHARGE',{...props.data})
});
const emits = defineEmits(['del']);
function del() {
emits('del', {
index: props.index,
data: props.data
});
}
function toEdit() {
uni.setStorageSync('rechargeCouponInfoListDetail', props.data);
go.to('PAGES_RECHARGE_ADD_RECHARGE');
}
function to2(n) {
return Number(n).toFixed(2);
}
// 返回赠送优惠券总数
function returnCouponCount() {
let num = 0;
props.data.couponInfoList.map((item) => {
num += item.num;
});
return num;
}
const returnSendStr = computed(() => {
let arr = [];
if (props.data.rewardAmount > 0) {
arr.push(`${props.data.rewardAmount}元`);
}
function to2(n) {
return Number(n).toFixed(2)
if (props.data.couponInfoList.length > 0) {
arr.push(`${returnCouponCount()}张券`);
}
return arr;
});
</script>
<style lang="scss" scoped>
.item {
padding: 32rpx 24rpx;
background: #FFFFFF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
overflow: hidden;
.item {
padding: 32rpx 24rpx;
background: #ffffff;
border-radius: 18rpx 18rpx 18rpx 18rpx;
overflow: hidden;
.desc {
border-radius: 12rpx 12rpx 12rpx 12rpx;
background-color: #F9F9F9;
}
.id {
background: #F7F7FA;
border-radius: 4rpx 4rpx 4rpx 4rpx;
padding: 4prx 10rpx;
overflow: hidden;
}
.desc {
border-radius: 12rpx 12rpx 12rpx 12rpx;
background-color: #f9f9f9;
}
</style>
.id {
background: #f7f7fa;
border-radius: 4rpx 4rpx 4rpx 4rpx;
padding: 4prx 10rpx;
overflow: hidden;
}
}
</style>

271
pageRecharge/components/rechargeRerord.vue Normal file
View File

@@ -0,0 +1,271 @@
<!-- 充值记录 -->
<template>
<view class="container">
<view class="query-wrap">
<view class="ipt">
<DateTimePicker v-model:startTime="form.startTime" v-model:endTime="form.endTime" style="width: 100%"></DateTimePicker>
</view>
<view class="ipt">
<view class="ipt" @click="showSheet = true">
<u-input readonly placeholder="请选择充值类型" v-model="form.bizCodeText" suffix-icon="arrow-right" :suffixIconStyle="{ fontSize: '14px' }"></u-input>
</view>
<view class="btn-wrap">
<view class="btn">
<u-button type="primary" @click="searchHandle">搜索</u-button>
</view>
<view class="btn">
<u-button @click="resetHandle">重置</u-button>
</view>
</view>
</view>
</view>
<!-- <view class="total-info">
<view class="card">
<view class="header">
<text class="t">数据统计</text>
</view>
</view>
</view> -->
<view class="list">
<view class="item" v-for="item in tableData.list" :key="item.id">
<view class="header">
<text class="name">{{ item.shopName }}</text>
<text class="time">{{ item.createTime }}</text>
</view>
<view class="content">
<view class="left">
<view class="top">
<text class="t">{{ item.nickName }}</text>
</view>
<view class="btm">
<text class="t">备注:{{ item.remark }}</text>
</view>
</view>
<view class="num-wrap">
<text class="num">{{ item.amount }}</text>
<text class="t">订单消费</text>
</view>
</view>
</view>
<u-loadmore :status="tableData.status"></u-loadmore>
</view>
<u-action-sheet
:actions="bizCodeList"
title="充值类型"
:round="20"
cancelText="取消"
:show="showSheet"
@close="showSheet = false"
@select="bizCodeSelectHandle"
></u-action-sheet>
</view>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';
import DateTimePicker from './date-time-picker.vue';
import { shopUserFlow } from '@/http/api/market/index.js';
import { onReachBottom } from '@dcloudio/uni-app';
const showSheet = ref(false);
const bizCodeList = [
{
value: 'cashIn',
name: '现金充值'
},
{
value: 'wechatIn',
name: '微信小程序充值'
},
{
value: 'alipayIn',
name: '支付宝小程序充值'
},
{
value: 'awardIn',
name: '充值奖励'
},
{
value: 'rechargeRefund',
name: '充值退款'
},
{
value: 'orderPay',
name: '订单消费'
},
{
value: 'orderRefund',
name: '订单退款'
},
{
value: 'adminIn',
name: '管理员充值'
},
{
value: 'adminOut',
name: '管理员消费'
}
];
const form = ref({
bizCode: '',
bizCodeText: '',
startTime: '',
endTime: ''
});
function bizCodeSelectHandle(e) {
console.log(e);
form.value.bizCode = e.value;
form.value.bizCodeText = e.name;
}
// 搜索
function searchHandle() {
tableData.status = 'loading';
tableData.page = 1;
shopUserFlowAjax();
}
// 重置
function resetHandle() {
form.value.bizCode = '';
form.value.bizCodeText = '';
form.value.startTime = '';
form.value.endTime = '';
searchHandle();
}
const tableData = reactive({
status: 'loading',
page: 1,
size: 10,
list: []
});
// 获取店铺充值记录
async function shopUserFlowAjax() {
try {
if (tableData.page == 1) {
uni.showLoading({
title: '加载中...',
mask: true
});
}
const res = await shopUserFlow({
...form.value,
page: tableData.page,
size: tableData.size
});
if (tableData.page == 1) {
tableData.list = res.records;
} else {
tableData.list.push(...res.records);
}
if (res.pageNumber >= res.totalPage) {
tableData.status = 'nomore';
}
} catch (error) {
console.log(error);
}
if (tableData.page == 1) {
setTimeout(() => {
uni.hideLoading();
}, 500);
}
}
onReachBottom(() => {
if (tableData.status != 'nomore') {
tableData.page++;
shopUserFlowAjax();
}
});
onMounted(() => {
shopUserFlowAjax();
});
</script>
<style scoped lang="scss">
.query-wrap {
background-color: #fff;
padding: 0 28upx 28upx;
display: flex;
gap: 28upx;
flex-direction: column;
.ipt {
width: 100%;
flex: 1;
display: flex;
gap: 28upx;
}
.btn-wrap {
display: flex;
gap: 28upx;
}
}
.total-info {
padding: 28upx;
.card {
background-color: #4a9dff;
border-radius: 20upx;
padding: 28upx;
}
}
.list {
padding: 28upx;
.item {
background-color: #fff;
border-radius: 20upx;
padding: 28upx;
margin-bottom: 28upx;
.header {
display: flex;
justify-content: space-between;
.name {
font-size: 28upx;
}
.time {
font-size: 28upx;
color: #999999;
}
}
.content {
display: flex;
padding-top: 28upx;
.left {
flex: 1;
.top {
.t {
font-size: 28upx;
color: #333;
}
}
.btm {
.t {
font-size: 28upx;
color: #999;
}
}
}
.num-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.num {
font-size: 32upx;
color: #333;
}
.t {
font-size: 24upx;
color: #666666;
}
}
}
}
}
</style>

130
pageRecharge/index.vue
View File

@@ -73,76 +73,8 @@
</view>
</template>
<template v-if="tabsCurrent === 2">
<view class="bg-fff u-font-28">
<view class="box-shadow u-relative">
<view class="u-flex u-row-between u-p-30 u-relative">
<view class="u-flex u-col-center" @tap="timeToggle">
<text class="color-main">充值时间</text>
<view class="icon-down u-m-l-6">
<uni-icons type="right" :color="$utils.ColorMain" size="16"></uni-icons>
</view>
</view>
<view class="u-flex u-col-center" @tap="showStatusToggle">
<text :class="{ 'color-main': nowStatusIndex >= 1 }">状态</text>
<view class="icon-down u-m-l-6">
<uni-icons type="right" :color="nowStatusIndex >= 1 ? $utils.ColorMain : '#000'" size="16"></uni-icons>
</view>
</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 @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 :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">
<view class="time-area u-font-24 color-main u-flex">
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="filters.time.start"></uni-dateformat>
<text class="u-p-l-10 u-p-r-10">至</text>
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="filters.time.end"></uni-dateformat>
</view>
</view>
<view class="u-p-30">
<view class="recoreds color-fff">
<view class="u-font-32">数据统计</view>
<view class="u-flex u-row-between u-m-t-48">
<view class="u-flex u-flex-col u-row-center u-col-center">
<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>充值人次</view>
<view class="u-font-32 u-m-t-10">0</view>
</view>
</view>
<view class="u-flex u-row-between u-m-t-30">
<view class="u-flex u-flex-col u-row-center u-col-center">
<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>退款金额</view>
<view class="u-font-32 u-m-t-10">0</view>
</view>
</view>
</view>
</view>
<rechargeRecord />
</template>
<my-model ref="model" :desc="modelData.desc"></my-model>
<my-date-pickerview @confirm="datePickerConfirm" ref="datePicker"></my-date-pickerview>
</view>
@@ -157,36 +89,51 @@ 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 rechargeRecord from './components/rechargeRerord.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';
import { shopRechargePost, shopRechargeGet, shopUserFlow } from '@/http/api/market/index.js';
import { onShow } from '@dcloudio/uni-app';
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);
uni.showModal({
title: '注意',
content: '确定要删除该充值面额吗?',
success: async (res) => {
try {
if (res.confirm) {
settingForm.value.rechargeDetailList.splice(e.index, 1);
uni.showLoading({
title: '删除中...'
});
await shopRechargePost(settingForm.value);
uni.showToast({
title: '删除成功',
icon: 'none'
});
}
} catch (error) {
console.log(error);
}
setTimeout(() => {
uni.hideLoading();
}, 500);
}
});
// 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张券'
}
]);
const rechargeLists = ref([]);
let mustBindPhone = ref(true);
const nowDate = new Date();
@@ -218,7 +165,16 @@ function useTypeChange(e) {
async function shopRechargeGetAjax() {
try {
const res = await shopRechargeGet();
res.rechargeDetailList.forEach((item) => {
item.couponInfoList.forEach((val) => {
if (val.coupon && val.coupon !== null) {
val.id = val.coupon.id;
val.title = val.coupon.title;
}
});
});
settingForm.value = res;
rechargeLists.value = res.rechargeDetailList;
} catch (error) {
console.log(error);
}
@@ -291,7 +247,7 @@ function datePickerConfirm(e) {
filters.time.end = e.end;
}
onLoad(() => {
onShow(() => {
shopRechargeGetAjax();
});
</script>

14
pages.json
View File

@@ -694,18 +694,6 @@
"navigationBarTitleText": "运营余额"
}
},
{
"pageId": "PAGES_MARKET_NEW_USER_DISCOUNT",
"path": "newUserDiscount/index",
@@ -769,7 +757,7 @@
"navigationBarTitleText": "充值兑换码详情"
}
}
]
},

67
pages/appliccation/marketing.vue
View File

@@ -58,7 +58,7 @@ const menuList = ref([
{
title: '新客立减',
icon: '',
pageUrl: 'PAGES_ORDER_INDEX',
pageUrl: 'PAGES_MARKET_NEW_USER_DISCOUNT',
intro: '首单下单减免金额'
},
{
@@ -144,6 +144,15 @@ const menuList = ref([
{
label: '优惠券',
menus: [
{
icon: 'mjq',
pageUrl: 'PAGES_EXCHANGE_COUPON',
title: '满减券',
intro: '用户满足指定金额后，可使用优惠券立减相应金额，如：设置满100-50券，符合要求的订单满100元后，立减50元。',
query: {
couponType: 1
}
},
{
icon: 'spdhq',
pageUrl: 'PAGES_EXCHANGE_COUPON',
@@ -152,6 +161,60 @@ const menuList = ref([
query: {
couponType: 2
}
},
{
icon: 'zkq',
pageUrl: 'PAGES_EXCHANGE_COUPON',
title: '折扣券',
intro: '下单享折扣但折扣的金额将在券中抵扣。',
query: {
couponType: 3
}
},
{
icon: 'dejbjq',
pageUrl: 'PAGES_EXCHANGE_COUPON',
title: '第二件半价券',
intro: '设置第二件半价券',
query: {
couponType: 4
}
},
{
icon: 'xfzq',
pageUrl: 'PAGES_EXCHANGE_COUPON',
title: '消费赠券',
intro: '达到指定消费金额赠送优惠券',
query: {
couponType: 5
}
},
{
icon: 'myzy',
pageUrl: 'PAGES_EXCHANGE_COUPON',
title: '买一送一券',
intro: '针对营销活动买一送一设置券品',
query: {
couponType: 6
}
},
{
icon: 'gdjkq',
pageUrl: 'PAGES_EXCHANGE_COUPON',
title: '固定价格券',
intro: '设置该券后，允许用户以固定价格兑换指定商品，如：设置一个固定价格9.9的券，商品20元，用户使用券后只需要9.9元兑换该商品。',
query: {
couponType: 7
}
},
{
icon: 'mfpsq',
pageUrl: 'PAGES_EXCHANGE_COUPON',
title: '免配送费券',
intro: '可设置一张免除订单配送费的券',
query: {
couponType: 8
}
}
]
}
@@ -185,7 +248,7 @@ page {
</style>
<style scoped lang="scss">
.container {
padding: 0 28upx;
padding: 0 28upx 28upx;
.row {
.header {
padding: 28upx 0;