删除部分图片，增加超级会员页面功能
This commit is contained in:
287
pageMarket/superVip/add-plans.vue
Normal file
287
pageMarket/superVip/add-plans.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<view class="min-page u-font-28 color-333">
|
||||
<view class="container">
|
||||
<view class="">
|
||||
<view class="font-bold u-m-b-16">周期名称</view>
|
||||
<up-input
|
||||
v-model="form.name"
|
||||
placeholder="请输入周期名称"
|
||||
:placeholderStyle="placeholderStyle"
|
||||
></up-input>
|
||||
</view>
|
||||
<view class="u-m-t-32">
|
||||
<view class="font-bold u-m-b-16">周期价格</view>
|
||||
<view class="u-flex">
|
||||
<input class="number-box" type="digit" v-model="form.price" />
|
||||
<view class="unit">元</view>
|
||||
</view>
|
||||
</view>
|
||||
<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.circleTime"></up-input>
|
||||
<view class="times">
|
||||
<up-select
|
||||
v-model:current="form.circleUnit"
|
||||
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.reward"
|
||||
placeholder="赠送成长值"
|
||||
:placeholderStyle="placeholderStyle"
|
||||
></up-input>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="container">
|
||||
<view class="font-bold u-m-b-16">赠送优惠券</view>
|
||||
<CouponList v-model="form.couponList"></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>
|
||||
</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 { add } from "lodash";
|
||||
const times = [
|
||||
{
|
||||
label: "年",
|
||||
value: "年",
|
||||
},
|
||||
{
|
||||
label: "月",
|
||||
value: "月",
|
||||
},
|
||||
{
|
||||
label: "周",
|
||||
value: "周",
|
||||
},
|
||||
{
|
||||
label: "天",
|
||||
value: "天",
|
||||
},
|
||||
];
|
||||
const placeholderStyle = {
|
||||
"font-size": "28rpx",
|
||||
};
|
||||
const superVipStore = useSuperVipStore();
|
||||
|
||||
const form = reactive({
|
||||
name: "",
|
||||
price: 0,
|
||||
reward: 0,
|
||||
couponList: [], // 存储已选择的优惠券
|
||||
circleTime: 1, // 会员周期
|
||||
circleUnit: "月", // 会员周期单位
|
||||
});
|
||||
function addCoupon() {
|
||||
form.couponList.push({
|
||||
coupon: { id: null },
|
||||
num: "",
|
||||
title: "",
|
||||
});
|
||||
}
|
||||
const showDetailListSwitch = ref([true]);
|
||||
|
||||
//判断输入每一项是否为空
|
||||
function checkInput() {
|
||||
for (let item of form.couponList) {
|
||||
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.price) {
|
||||
uni.showToast({
|
||||
title: "请输入周期价格",
|
||||
icon: "none",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (!form.circleTime) {
|
||||
uni.showToast({
|
||||
title: "请输入周期时间",
|
||||
icon: "none",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (optiopns.type == "edit") {
|
||||
superVipStore.editPlan(optiopns.index, form);
|
||||
} else {
|
||||
superVipStore.addPlan(form);
|
||||
}
|
||||
const res = await superVipStore.editConfig();
|
||||
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);
|
||||
if (opt.type === "edit" && opt.index !== undefined && opt.index !== null) {
|
||||
const item = superVipStore.config.configList[opt.index];
|
||||
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