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

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

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

294
pageMarket/couponExchangeCode/add.vue
View File

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

2
pageMarket/limitDiscount/index.vue
View File

@@ -39,7 +39,7 @@
</view> </view>
</view> </view>
<u-loadmore :status="tableData.status"></u-loadmore> <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> </view>
</template> </template>

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

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

14
pages.json
View File

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

67
pages/appliccation/marketing.vue
View File

@@ -58,7 +58,7 @@ const menuList = ref([
{ {
title: '新客立减', title: '新客立减',
icon: '', icon: '',
pageUrl: 'PAGES_ORDER_INDEX', pageUrl: 'PAGES_MARKET_NEW_USER_DISCOUNT',
intro: '首单下单减免金额' intro: '首单下单减免金额'
}, },
{ {
@@ -144,6 +144,15 @@ const menuList = ref([
{ {
label: '优惠券', label: '优惠券',
menus: [ menus: [
{
icon: 'mjq',
pageUrl: 'PAGES_EXCHANGE_COUPON',
title: '满减券',
intro: '用户满足指定金额后，可使用优惠券立减相应金额，如：设置满100-50券，符合要求的订单满100元后，立减50元。',
query: {
couponType: 1
}
},
{ {
icon: 'spdhq', icon: 'spdhq',
pageUrl: 'PAGES_EXCHANGE_COUPON', pageUrl: 'PAGES_EXCHANGE_COUPON',
@@ -152,6 +161,60 @@ const menuList = ref([
query: { query: {
couponType: 2 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>
<style scoped lang="scss"> <style scoped lang="scss">
.container { .container {
padding: 0 28upx; padding: 0 28upx 28upx;
.row { .row {
.header { .header {
padding: 28upx 0; padding: 28upx 0;