306 lines
10 KiB
Vue
306 lines
10 KiB
Vue
<template>
|
|
<div>
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
|
|
<el-form-item label="是否消费赠送积分">
|
|
<el-switch v-model.trim="form.enableRewards" :active-value="1" :inactive-value="0"></el-switch>
|
|
</el-form-item>
|
|
<template v-if="form.enableRewards">
|
|
<el-form-item label="适用群体">
|
|
<el-radio-group v-model="form.rewardsGroup">
|
|
<el-radio label="all">全部</el-radio>
|
|
<el-radio label="vip">仅会员</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="消费赠送积分" prop="consumeAmount">
|
|
<el-input v-model="form.consumeAmount" style="width: 250px;"
|
|
@input="inputFilterInt($event, 'consumeAmount')">
|
|
<template slot="prepend">每消费</template>
|
|
<template slot="append">元赠送1积分</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</template>
|
|
<el-form-item label="开启下单积分抵扣" style="margin-top: 50px;">
|
|
<el-switch v-model.trim="form.enableDeduction" :active-value="1" :inactive-value="0"></el-switch>
|
|
</el-form-item>
|
|
<template v-if="form.enableDeduction">
|
|
<el-form-item label="适用群体">
|
|
<el-radio-group v-model="form.deductionGroup">
|
|
<el-radio label="all">全部</el-radio>
|
|
<el-radio label="vip">仅会员</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="下单实付抵扣门槛" prop="minPaymentAmount">
|
|
<el-input v-model="form.minPaymentAmount" style="width: 150px;"
|
|
@input="inputFilterInt($event, 'minPaymentAmount')">
|
|
<template slot="append">元</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="下单最高抵扣比例" prop="maxDeductionRatio">
|
|
<el-input v-model="form.maxDeductionRatio" style="width: 150px;"
|
|
@input="inputFilterInt($event, 'maxDeductionRatio')">
|
|
<template slot="append">%</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="下单抵扣积分比例" prop="equivalentPoints">
|
|
<el-input v-model="form.equivalentPoints" style="width: 220px;"
|
|
@input="inputFilterInt($event, 'equivalentPoints')">
|
|
<template slot="prepend">1元等于</template>
|
|
<template slot="append">积分</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</template>
|
|
<el-form-item label="开启积分商城" style="margin-top: 50px;">
|
|
<el-switch v-model.trim="form.enablePointsMall" :active-value="1" :inactive-value="0"></el-switch>
|
|
</el-form-item>
|
|
<el-form-item label="显示样式" v-if="form.enablePointsMall">
|
|
<div class="style_wrap">
|
|
<div class="item style1" :class="{ active: form.browseMode == 'list' }"
|
|
@click="form.browseMode = 'list'">
|
|
<div class="row">
|
|
<div class="cover"></div>
|
|
<div class="info">
|
|
<div class="line"></div>
|
|
<div class="line"></div>
|
|
<div class="line"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="cover"></div>
|
|
<div class="info">
|
|
<div class="line"></div>
|
|
<div class="line"></div>
|
|
<div class="line"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item style2" :class="{ active: form.browseMode == 'grid' }"
|
|
@click="form.browseMode = 'grid'">
|
|
<div class="row">
|
|
<div class="cover"></div>
|
|
<div class="line"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="cover"></div>
|
|
<div class="line"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="cover"></div>
|
|
<div class="line"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="cover"></div>
|
|
<div class="line"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" :loading="loading" @click="onSubmitHandle">保存</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { basicSettingGet, basicSettingPost } from '@/api/points.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
form: {
|
|
id: '',
|
|
rewardsGroup: 'all',
|
|
deductionGroup: 'all',
|
|
enableRewards: 1,
|
|
consumeAmount: "",
|
|
enableDeduction: 1,
|
|
minPaymentAmount: "",
|
|
maxDeductionRatio: "",
|
|
equivalentPoints: "",
|
|
enablePointsMall: 1,
|
|
browseMode: 'list'
|
|
},
|
|
rules: {
|
|
consumeAmount: [
|
|
{
|
|
required: true,
|
|
message: ' ',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
minPaymentAmount: [
|
|
{
|
|
required: true,
|
|
message: ' ',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
maxDeductionRatio: [
|
|
{
|
|
required: true,
|
|
message: ' ',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
equivalentPoints: [
|
|
{
|
|
required: true,
|
|
message: ' ',
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.basicSettingGet()
|
|
},
|
|
methods: {
|
|
// 过滤input只能输入整数
|
|
inputFilterInt(e, key) {
|
|
if (!e) return
|
|
setTimeout(() => {
|
|
this.form[key] = e.replace(/[^\d]/g, '')
|
|
}, 50)
|
|
},
|
|
// 提交
|
|
onSubmitHandle() {
|
|
this.$refs.form.validate(async valid => {
|
|
if (valid) {
|
|
try {
|
|
this.loading = true
|
|
this.form.shopId = localStorage.getItem('shopId')
|
|
await basicSettingPost(this.form)
|
|
this.loading = false
|
|
this.$notify({
|
|
title: '成功',
|
|
message: `保存成功`,
|
|
type: 'success'
|
|
});
|
|
} catch (error) {
|
|
this.loading = false
|
|
console.log(error)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 获取店铺设置
|
|
async basicSettingGet() {
|
|
try {
|
|
const res = await basicSettingGet()
|
|
if (res.id) {
|
|
this.form = res
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.style_wrap {
|
|
display: flex;
|
|
width: 350px;
|
|
gap: 50px;
|
|
|
|
.item {
|
|
flex: 1;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
$color: #3F9EFF;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.active {
|
|
border-color: $color;
|
|
}
|
|
|
|
.cover {
|
|
background-color: $color;
|
|
}
|
|
|
|
.line {
|
|
background-color: #D9D9D9;
|
|
}
|
|
|
|
&.style1 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
|
|
.row {
|
|
flex: 1;
|
|
display: flex;
|
|
|
|
.cover {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding-left: 10px;
|
|
|
|
.line {
|
|
flex: 1;
|
|
|
|
&:nth-child(1) {
|
|
width: 80%;
|
|
flex: 2;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.style2 {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
grid-column-gap: 10px;
|
|
grid-row-gap: 10px;
|
|
|
|
.row:nth-child(1) {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
}
|
|
|
|
.row:nth-child(2) {
|
|
grid-area: 1 / 2 / 2 / 3;
|
|
}
|
|
|
|
.row:nth-child(3) {
|
|
grid-area: 2 / 1 / 3 / 2;
|
|
}
|
|
|
|
.row:nth-child(4) {
|
|
grid-area: 2 / 2 / 3 / 3;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.cover {
|
|
flex: 1;
|
|
}
|
|
|
|
.line {
|
|
height: 4px;
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |