删除部分图片，增加超级会员页面功能
This commit is contained in:
363
pageMarket/superVip/vip-lv-add.vue
Normal file
363
pageMarket/superVip/vip-lv-add.vue
Normal file
@@ -0,0 +1,363 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user