新增积分锁客页面，基础设置，商品设置，兑换记录
This commit is contained in:
290
pageMarket/points/components/setting.vue
Normal file
290
pageMarket/points/components/setting.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<view class="form">
|
||||
<u-form ref="formRef" :model="form" :rules="rules" label-width="200px" label-position="top">
|
||||
<view class="card">
|
||||
<u-form-item>
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">开启积分</text>
|
||||
<u-switch v-model="form.enableRewards" :active-value="1" :inactive-value="0"></u-switch>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text class="t">开启后，所有用户可通过消费获得积分及可用积分抵扣支付</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="card">
|
||||
<u-form-item prop="consumeAmount">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">消费送积分</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text class="i">每消费</text>
|
||||
<view class="ipt">
|
||||
<u-input placeholder="请输入" :maxlength="8" v-model="form.consumeAmount" @change="consumeAmountInput">
|
||||
<template #suffix>
|
||||
<text>元</text>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
<text class="i">获得1积分</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item prop="minPaymentAmount">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">可抵扣门槛</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<u-input placeholder="请输入" :maxlength="8" v-model="form.minPaymentAmount" @change="minPaymentAmountInput">
|
||||
<template #suffix>
|
||||
<text>元</text>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item prop="maxDeductionRatio">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">最高抵扣比例</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="ipt">
|
||||
<u-input placeholder="请输入" :maxlength="8" v-model="form.maxDeductionRatio" @change="maxDeductionRatioInput">
|
||||
<template #suffix>
|
||||
<text>%</text>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
<u-form-item prop="equivalentPoints">
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">抵扣积分比例</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text class="i">1元等于</text>
|
||||
<view class="ipt">
|
||||
<u-input placeholder="请输入" :maxlength="8" v-model="form.equivalentPoints" @change="equivalentPointsInput">
|
||||
<template #suffix>
|
||||
<text>积分</text>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
<view class="card">
|
||||
<u-form-item>
|
||||
<view class="switch-wrap">
|
||||
<view class="top">
|
||||
<text class="t">开启积分商城</text>
|
||||
<u-switch v-model="form.enablePointsMall" :active-value="1" :inactive-value="0"></u-switch>
|
||||
</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</view>
|
||||
</u-form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { filterNumberInput } from '@/utils/index.js';
|
||||
import { pointsConfigPost, pointsConfigGet } from '@/http/api/market/point.js';
|
||||
|
||||
const formRef = ref(null);
|
||||
const form = ref({
|
||||
enableRewards: 0,
|
||||
consumeAmount: '', // 每消费xx元赠送1积分
|
||||
minPaymentAmount: '', // 下单实付抵扣门槛
|
||||
maxDeductionRatio: 100, // 下单最高抵扣比例
|
||||
equivalentPoints: '', // 下单抵扣积分比例 1元=?积分
|
||||
enablePointsMall: 0 // 开启积分商城
|
||||
});
|
||||
|
||||
const rules = ref({
|
||||
consumeAmount: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请输入',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.consumeAmount < 0 || form.value.consumeAmount === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
minPaymentAmount: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请输入',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.minPaymentAmount < 0 || form.value.minPaymentAmount === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
maxDeductionRatio: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请输入',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.maxDeductionRatio < 0 || form.value.maxDeductionRatio === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
equivalentPoints: [
|
||||
{
|
||||
required: true,
|
||||
trigger: ['blur'],
|
||||
message: '请输入',
|
||||
validator: (rule, value, callback) => {
|
||||
if (form.value.equivalentPoints < 0 || form.value.equivalentPoints === '') {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
function consumeAmountInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.consumeAmount = filterNumberInput(e);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function minPaymentAmountInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.minPaymentAmount = filterNumberInput(e);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function maxDeductionRatioInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.maxDeductionRatio = filterNumberInput(e, 1);
|
||||
if (form.value.maxDeductionRatio > 100) {
|
||||
form.value.maxDeductionRatio = 100;
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function equivalentPointsInput(e) {
|
||||
setTimeout(() => {
|
||||
form.value.equivalentPoints = filterNumberInput(e, 1);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
// 提交
|
||||
function submitHandle() {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '保存中...',
|
||||
mask: true
|
||||
});
|
||||
await pointsConfigPost(form.value);
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'none'
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
uni.hideLoading();
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
// 获取配置
|
||||
async function pointsConfigGetAjax() {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
});
|
||||
const res = await pointsConfigGet();
|
||||
form.value = res;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
}, 300);
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
submitHandle
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
pointsConfigGetAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 28upx;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 28upx;
|
||||
}
|
||||
}
|
||||
.switch-wrap {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
padding-top: 16upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16upx;
|
||||
.i {
|
||||
font-size: 28upx;
|
||||
color: #666;
|
||||
}
|
||||
.ipt {
|
||||
flex: 1;
|
||||
}
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user