396 lines
9.3 KiB
Vue
396 lines
9.3 KiB
Vue
<template>
|
||
<view class="bg-gray min-page">
|
||
<view class="bg-fff top">
|
||
<view class="u-p-30">
|
||
<myTabs :defaultIndex="tabsCurrent" :list="tabsList" @change="tabsChange"></myTabs>
|
||
</view>
|
||
</view>
|
||
<view class="switch-container">
|
||
<view class="switch-wrap">
|
||
<view class="title">
|
||
<text class="t">是否开启</text>
|
||
</view>
|
||
<view class="switch">
|
||
<!-- <u-switch size="large" v-model="isOpen" :active-value="1" :inactive-value="0"></u-switch> -->
|
||
<switch :checked="!!isOpen" foreColor="#33a0ff" color="#33a0ff" @change="isOpenChange"></switch>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template v-if="tabsCurrent === 0">
|
||
<view class="u-p-30">
|
||
<view class="u-flex bg-fff u-p-30 border-r-12" @tap="toAddRecharge">
|
||
<view class="u-m-r-22">
|
||
<my-icons type="add"></my-icons>
|
||
</view>
|
||
<view class="">添加充值面额</view>
|
||
</view>
|
||
</view>
|
||
<view class="u-p-30">
|
||
<view class="u-m-b-32" v-for="(item, index) in rechargeLists" :key="index">
|
||
<recharge-item @del="rechargeItemDel" :index="index" :data="item" :isCanEdit="isCanEdit"></recharge-item>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-if="tabsCurrent === 1">
|
||
<view class="card-wrap">
|
||
<view class="card">
|
||
<view class="header">
|
||
<text class="title">自定义金额</text>
|
||
<my-switch v-model="settingForm.isCustom"></my-switch>
|
||
</view>
|
||
<view class="tips">
|
||
<text class="t">自定义金额不参与赠送优惠</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="card-wrap">
|
||
<view class="card no-bg">
|
||
<view class="header">
|
||
<text class="title">可用门店</text>
|
||
</view>
|
||
<my-shop-select v-model:useType="settingForm.useType" v-model:selShops="settingForm.shopIdList" @useTypeChange="useTypeChange"></my-shop-select>
|
||
</view>
|
||
</view>
|
||
<view class="card-wrap">
|
||
<view class="card">
|
||
<view class="header">
|
||
<text class="title">充值并下单</text>
|
||
<my-switch v-model="settingForm.isOrder"></my-switch>
|
||
</view>
|
||
<view class="tips">
|
||
<text class="t">开启后，订单支付页面显示充值选项</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="u-p-30">
|
||
<view class="bg-fff u-p-30 border-r-12">
|
||
<view>充值说明</view>
|
||
<view class="u-p-30 border-r-12 border u-m-t-30">
|
||
<view class="">
|
||
<textarea placeholder="请填写充值说明" v-model="settingForm.remark" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="bg-fff u-m-t-30 u-overflow-hide border-r-12 u-p-30 u-flex u-row-between">
|
||
<view class="">充值前绑定手机</view>
|
||
<view>
|
||
<my-switch v-model="mustBindPhone"></my-switch>
|
||
</view>
|
||
</view> -->
|
||
<view class="u-m-t-60" style="padding: 80rpx" v-if="isCanEdit">
|
||
<my-button showShadow shape="circle" @click="rechargeSetting">保存</my-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-if="tabsCurrent === 2">
|
||
<rechargeRecord />
|
||
</template>
|
||
<my-model ref="model" :desc="modelData.desc"></my-model>
|
||
<my-date-pickerview @confirm="datePickerConfirm" ref="datePicker"></my-date-pickerview>
|
||
<my-marketing-mask name="智慧充值" v-if="isMarketShow(shopRechargeRes)"></my-marketing-mask>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, reactive, ref } from 'vue';
|
||
import { onShow } from '@dcloudio/uni-app';
|
||
import myTabs from '@/components/my-components/my-tabs.vue';
|
||
import myIcons from '@/components/my-components/my-icons.vue';
|
||
import mySwitch from '@/components/my-components/my-switch.vue';
|
||
import myButton from '@/components/my-components/my-button.vue';
|
||
import myModel from '@/components/my-components/my-model.vue';
|
||
import myDatePickerview from '@/components/my-components/my-date-pickerview';
|
||
import rechargeItem from './components/recharge-item.vue';
|
||
import 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 { isMainShop, isMarketShow } from '@/store/account.js';
|
||
|
||
const isCanEdit = computed(() => {
|
||
return isMainShop();
|
||
});
|
||
|
||
const isOpen = ref(0);
|
||
|
||
async function isOpenChange(e) {
|
||
console.log(e);
|
||
isOpen.value = e.detail.value;
|
||
try {
|
||
const data = await shopRechargeGet();
|
||
data.isEnable = isOpen.value ? 1 : 0;
|
||
await shopRechargePost(data);
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
|
||
const model = ref(null);
|
||
const modelData = reactive({
|
||
desc: ''
|
||
});
|
||
function rechargeItemDel(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([]);
|
||
|
||
let mustBindPhone = ref(true);
|
||
const nowDate = new Date();
|
||
const filters = reactive({
|
||
time: {
|
||
start: $util.getDayArea(nowDate, 'start'),
|
||
end: $util.getDayArea(nowDate, 'end')
|
||
}
|
||
});
|
||
const tabsList = ['充值面额', '充值设置', '充值记录'];
|
||
let tabsCurrent = ref(0);
|
||
|
||
const settingForm = ref({
|
||
id: '',
|
||
isCustom: 1, // 自定义金额
|
||
useType: 'all',
|
||
shopIdList: [], // 可用门店
|
||
isOrder: 1, // 充值并下单
|
||
remark: ''
|
||
});
|
||
|
||
function useTypeChange(e) {
|
||
if (e == 'all') {
|
||
settingForm.value.shopIdList = [];
|
||
}
|
||
}
|
||
|
||
// 获取设置
|
||
const shopRechargeRes = ref({});
|
||
async function shopRechargeGetAjax() {
|
||
try {
|
||
shopRechargeRes.value = await shopRechargeGet();
|
||
isOpen.value = shopRechargeRes.value.isEnable;
|
||
shopRechargeRes.value.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 = shopRechargeRes.value;
|
||
rechargeLists.value = shopRechargeRes.value.rechargeDetailList;
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
|
||
// 保存充值设置
|
||
async function rechargeSetting() {
|
||
console.log('settingForm', settingForm.value);
|
||
try {
|
||
uni.showLoading({
|
||
title: '保存中...'
|
||
});
|
||
await shopRechargePost(settingForm.value);
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: 'none'
|
||
});
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
}, 500);
|
||
}
|
||
|
||
let showStatus = ref(false);
|
||
function showStatusToggle() {
|
||
showStatus.value = !showStatus.value;
|
||
}
|
||
|
||
const statusBootom = 14;
|
||
const statusHeight = computed(() => {
|
||
return 30 * status.length + statusBootom + 'px';
|
||
});
|
||
|
||
let searchShow = ref(false);
|
||
|
||
function showSearch() {
|
||
searchShow.value = true;
|
||
}
|
||
const status = ['全部', '未支付', '支付成功'];
|
||
let nowStatusIndex = ref(0);
|
||
function changeNowStatusIndex(i) {
|
||
nowStatusIndex.value = i;
|
||
showStatus.value = false;
|
||
}
|
||
function hideSearch() {
|
||
searchShow.value = false;
|
||
}
|
||
|
||
function tabsChange(i) {
|
||
console.log(i);
|
||
tabsCurrent.value = i;
|
||
}
|
||
|
||
let keyword = ref('');
|
||
|
||
function searchConfirm(e) {
|
||
console.log(e);
|
||
}
|
||
|
||
const datePicker = ref(null);
|
||
function timeToggle() {
|
||
datePicker.value.toggle();
|
||
showStatus.value = false;
|
||
}
|
||
function datePickerConfirm(e) {
|
||
console.log(e);
|
||
filters.time.start = e.start;
|
||
filters.time.end = e.end;
|
||
}
|
||
|
||
onShow(() => {
|
||
shopRechargeGetAjax();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.switch-container {
|
||
padding: 28upx;
|
||
}
|
||
.switch-wrap {
|
||
background-color: #fff;
|
||
border-radius: 20upx;
|
||
padding: 28upx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.title {
|
||
.t {
|
||
font-size: 32upx;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
.u-overflow-hide {
|
||
overflow: hidden;
|
||
}
|
||
.border {
|
||
border: 1px solid #e5e5e5;
|
||
}
|
||
.border-r-12 {
|
||
border-radius: 12rpx;
|
||
}
|
||
.recoreds {
|
||
background: linear-gradient(127deg, #33a0ff 0%, #6699ff 100%);
|
||
box-shadow: 0rpx 20rpx 60rpx 2rpx rgba(92, 112, 248, 0.2);
|
||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
padding: 32rpx 40rpx 40rpx 48rpx;
|
||
}
|
||
.lh30 {
|
||
line-height: 30px;
|
||
}
|
||
.status {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 10;
|
||
background-color: #fff;
|
||
}
|
||
.input-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
.box-shadow {
|
||
box-shadow: 0 0 5px #eee;
|
||
}
|
||
|
||
.search-box {
|
||
background-color: #fff;
|
||
padding: 16rpx 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
position: absolute;
|
||
right: 30rpx;
|
||
display: flex;
|
||
|
||
.search-btn {
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
// width: 164rpx;
|
||
transition: all 0.3s ease-in-out;
|
||
background-color: rgb(247, 247, 247);
|
||
border-radius: 100px;
|
||
}
|
||
}
|
||
.time-area {
|
||
background: #e6f0ff;
|
||
border-radius: 100px;
|
||
padding: 10rpx 20rpx;
|
||
}
|
||
.icon-down {
|
||
transform: rotate(90deg);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.card-wrap {
|
||
padding: 28upx 28upx 0;
|
||
.card {
|
||
background-color: #fff;
|
||
border-radius: 20upx;
|
||
padding: 28upx;
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-bottom: 12upx;
|
||
.title {
|
||
font-size: 28upx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.tips {
|
||
.t {
|
||
font-size: 28upx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|