364 lines
8.5 KiB
Vue
364 lines
8.5 KiB
Vue
<template>
|
||
<view class="min-page u-font-28 color-333">
|
||
<view class="container">
|
||
<view class="border-bottom u-p-b-16">
|
||
<view class="font-bold u-m-b-16">会员标题</view>
|
||
<input
|
||
v-model="form.name"
|
||
placeholder="请输入会员标题"
|
||
:placeholderStyle="placeholderStyle"
|
||
/>
|
||
</view>
|
||
<view class="border-bottom u-p-b-16 u-m-t-16">
|
||
<view class="font-bold u-m-b-16">会员折扣（%）</view>
|
||
<input
|
||
v-model="form.discount"
|
||
placeholder="请输入会员折扣"
|
||
:placeholderStyle="placeholderStyle"
|
||
/>
|
||
</view>
|
||
<view class="u-m-t-16">
|
||
<view class="font-bold u-m-b-16">所需会员值</view>
|
||
<input
|
||
v-model="form.experienceValue"
|
||
:disabled="optiopns.index == 0 ? true : false"
|
||
placeholder="请输入所需会员值"
|
||
:placeholderStyle="placeholderStyle"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="container u-flex u-row-between">
|
||
<view class="font-bold">等级标识</view>
|
||
<view class="u-flex upload-box">
|
||
<my-upload-img v-model="form.logo"></my-upload-img>
|
||
</view>
|
||
</view>
|
||
<view class="container">
|
||
<view class="u-flex u-row-between">
|
||
<view class="">
|
||
<view class="font-bold">消费送积分</view>
|
||
<view class="color-999 u-font-24 u-m-t-2">每消费X元赠送1积分</view>
|
||
</view>
|
||
<up-switch
|
||
:size="20"
|
||
v-model="form.isCostRewardPoints"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
></up-switch>
|
||
</view>
|
||
<view class="bg-gray u-m-t-16" style="padding: 24rpx 72rpx" v-if="form.isCostRewardPoints">
|
||
<view class="u-flex">
|
||
<input
|
||
class="number-box"
|
||
type="digit"
|
||
v-model="form.costRewardPoints"
|
||
/>
|
||
<view class="unit">元</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="container">
|
||
<view class="">
|
||
<view class="font-bold u-m-b-16">等级说明</view>
|
||
<up-textarea
|
||
v-model="form.remark"
|
||
placeholder="请输入等级说明"
|
||
:placeholderStyle="placeholderStyle"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view class="container">
|
||
<view class="u-flex u-row-between">
|
||
<view class="font-bold u-m-b-16">自动发放</view>
|
||
<up-switch
|
||
:size="20"
|
||
v-model="form.isCycleReward"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
></up-switch>
|
||
</view>
|
||
<template v-if="form.isCycleReward">
|
||
<view class="u-m-t-32">
|
||
<view class="font-bold u-m-b-16">周期时间</view>
|
||
<view class="u-flex" style="gap: 24rpx; align-items: stretch">
|
||
<up-input type="digit" v-model="form.cycleTime"></up-input>
|
||
<view class="times">
|
||
<up-select
|
||
v-model:current="form.cycleUnit"
|
||
showOptionsLabel
|
||
label="单位"
|
||
keyName="value"
|
||
labelName="label"
|
||
:options="times"
|
||
@select="selectItem"
|
||
></up-select>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="u-m-t-32">
|
||
<view class="font-bold u-m-b-16">赠送积分</view>
|
||
<up-input
|
||
type="number"
|
||
v-model="form.cycleRewardPoints"
|
||
placeholder="赠送成长值"
|
||
:placeholderStyle="placeholderStyle"
|
||
></up-input>
|
||
</view>
|
||
<view class="font-bold u-m-b-16 u-m-t-32">赠送优惠券</view>
|
||
<CouponList v-model="form.cycleRewardCouponList"></CouponList>
|
||
<view class="u-flex">
|
||
<view class="u-flex gap-20" @click="addCoupon()">
|
||
<up-icon name="plus-circle-fill" color="#318AFE" size="16"></up-icon>
|
||
<text class="">添加</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
|
||
<my-bottom-btn-group @save="save" @cancel="cancel"></my-bottom-btn-group>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import {
|
||
onLoad,
|
||
onReady,
|
||
onShow,
|
||
onPageScroll,
|
||
onReachBottom,
|
||
onBackPress,
|
||
} from "@dcloudio/uni-app";
|
||
import CouponList from "./components/coupon-list.vue";
|
||
import { ref, onMounted, watch, reactive, computed } from "vue";
|
||
import { useSuperVipStore } from "@/store/market.js";
|
||
import * as memberApi from "@/http/api/market/member.js";
|
||
import { options } from "../../../cashier_wx/uni_modules/uview-plus/components/u-markdown/marked.esm";
|
||
|
||
const times = [
|
||
{
|
||
label: "年",
|
||
value: "年",
|
||
},
|
||
{
|
||
label: "月",
|
||
value: "月",
|
||
},
|
||
{
|
||
label: "周",
|
||
value: "周",
|
||
},
|
||
{
|
||
label: "天",
|
||
value: "天",
|
||
},
|
||
];
|
||
const placeholderStyle = {
|
||
"font-size": "28rpx",
|
||
};
|
||
const superVipStore = useSuperVipStore();
|
||
|
||
const form = reactive({
|
||
name: "",
|
||
experienceValue: 0,
|
||
discount: 100,
|
||
logo: '',
|
||
costRewardPoints: 1,
|
||
isCostRewardPoints: 0,
|
||
isCycleReward: 0,
|
||
cycleTime: 1,
|
||
cycleUnit: "月",
|
||
cycleRewardPoints: 1,
|
||
cycleRewardCouponList: [],
|
||
remark: "",
|
||
});
|
||
function addCoupon() {
|
||
form.couponList.push({
|
||
coupon: { id: null },
|
||
num: "",
|
||
title: "",
|
||
});
|
||
}
|
||
const showDetailListSwitch = ref([true]);
|
||
|
||
//判断输入每一项是否为空
|
||
function checkInput() {
|
||
for (let item of form.cycleRewardCouponList) {
|
||
if (!item.coupon.id) {
|
||
uni.showToast({
|
||
title: "请选择优惠券",
|
||
icon: "none",
|
||
});
|
||
return false;
|
||
}
|
||
if (!item.num) {
|
||
uni.showToast({
|
||
title: "请输入优惠券数量",
|
||
icon: "none",
|
||
});
|
||
return false;
|
||
}
|
||
}
|
||
return true;
|
||
}
|
||
async function save() {
|
||
const isPas = checkInput();
|
||
if (!isPas) {
|
||
return;
|
||
}
|
||
if (!form.name) {
|
||
uni.showToast({
|
||
title: "请输入会员标题",
|
||
icon: "none",
|
||
});
|
||
return false;
|
||
}
|
||
if (!form.discount) {
|
||
uni.showToast({
|
||
title: "请输入会员折扣",
|
||
icon: "none",
|
||
});
|
||
return false;
|
||
}
|
||
if (!form.experienceValue && optiopns.index != 0) {
|
||
uni.showToast({
|
||
title: "请输入所需成长值",
|
||
icon: "none",
|
||
});
|
||
return false;
|
||
}
|
||
const submitForm = {
|
||
...form,
|
||
};
|
||
const res =
|
||
optiopns.type == "edit"
|
||
? await memberApi.levelEdit(submitForm)
|
||
: await memberApi.levelAdd(submitForm);
|
||
if (res) {
|
||
uni.showToast({
|
||
title: "保存成功",
|
||
icon: "none",
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: "保存失败",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
}, 1500);
|
||
}
|
||
function cancel() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
}
|
||
const optiopns = reactive({});
|
||
onLoad((opt) => {
|
||
Object.assign(optiopns, opt);
|
||
uni.setNavigationBarTitle({
|
||
title: opt.type !== "edit" ? "添加会员等级" : "编辑会员等级",
|
||
});
|
||
if (opt.type === "edit" && opt.id !== undefined && opt.id !== null) {
|
||
const index = superVipStore.vipLevelList.findIndex(
|
||
(item) => item.id == opt.id
|
||
);
|
||
optiopns.index = index;
|
||
const item = superVipStore.vipLevelList.find((item) => item.id == opt.id);
|
||
Object.assign(form, item);
|
||
}
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.min-page {
|
||
background: #f7f7f7;
|
||
padding: 56rpx 28rpx;
|
||
}
|
||
.container {
|
||
background: #fff;
|
||
padding: 32rpx 24rpx;
|
||
margin-top: 32rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
.x-padding {
|
||
padding: 0 24rpx;
|
||
}
|
||
$height: 70rpx;
|
||
.number-box {
|
||
font-size: 28rpx;
|
||
padding: 0 26rpx;
|
||
border-radius: 6rpx 0 0 6rpx;
|
||
border-top: 2rpx solid #d9d9d9;
|
||
border-bottom: 2rpx solid #d9d9d9;
|
||
border-left: 2rpx solid #d9d9d9;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
height: $height;
|
||
flex: 1;
|
||
line-height: $height;
|
||
&.disabled {
|
||
background-color: #f7f7fa;
|
||
color: #999999;
|
||
}
|
||
}
|
||
.unit {
|
||
display: flex;
|
||
padding: 0 38rpx;
|
||
height: $height;
|
||
line-height: $height;
|
||
align-items: center;
|
||
border-radius: 0 6rpx 6rpx 0;
|
||
border: 2rpx solid #d9d9d9;
|
||
background: #f7f7fa;
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.my-btn {
|
||
font-size: 28rpx;
|
||
line-height: 36rpx;
|
||
padding: 8rpx 32rpx;
|
||
border-radius: 12rpx;
|
||
margin: 0;
|
||
}
|
||
|
||
.edit-btn {
|
||
background: #e6f0ff;
|
||
color: $my-main-color;
|
||
}
|
||
|
||
.delete-btn {
|
||
background: #ffe7e6;
|
||
color: #ff1c1c;
|
||
}
|
||
.title {
|
||
font-weight: 700;
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
}
|
||
.first {
|
||
border-bottom: 2rpx solid #e5e5e5;
|
||
}
|
||
.arrow {
|
||
transition: all 0.3s ease-in-out;
|
||
&.rotate {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
.times {
|
||
padding: 10rpx 20rpx;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-content: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
:deep(.times .u-select) {
|
||
display: flex;
|
||
}
|
||
</style>
|