349 lines
8.3 KiB
Vue
349 lines
8.3 KiB
Vue
<template>
|
|
<view class="box">
|
|
<view class="u-m-t-32 container" style="padding-left: 0; padding-right: 0">
|
|
<view class="x-padding">
|
|
<view class="u-flex u-row-between">
|
|
<text class="font-bold color-333">开通方式</text>
|
|
</view>
|
|
<view class="u-m-t-16">
|
|
<up-radio-group v-model="form.openType" placement="row">
|
|
<up-radio
|
|
v-for="item in opentypes"
|
|
:key="item.value"
|
|
:name="item.value"
|
|
:label="item.label"
|
|
>
|
|
<template #label>
|
|
<text>
|
|
{{ item.label }}
|
|
</text>
|
|
</template>
|
|
</up-radio>
|
|
</up-radio-group>
|
|
</view>
|
|
</view>
|
|
<template v-if="form.openType == 'auto'">
|
|
<view class="u-m-t-24">
|
|
<up-line></up-line>
|
|
</view>
|
|
<view class="x-padding u-m-t-24">
|
|
<view class="u-flex u-row-between">
|
|
<text class="font-bold color-333">获得佣金条件</text>
|
|
</view>
|
|
<view class="u-flex u-m-t-16">
|
|
<input
|
|
class="number-box"
|
|
placeholder="请输入"
|
|
placeholder-class="color-999 u-font-28"
|
|
type="number"
|
|
|
|
v-model="form.inviteCount"
|
|
/>
|
|
<view class="unit">人</view>
|
|
</view>
|
|
<view class="color-999 u-font-24 u-m-t-8"
|
|
>邀请达到指定人数才可赚取佣金</view
|
|
>
|
|
<view class="u-m-t-24">
|
|
<up-line></up-line>
|
|
</view>
|
|
<view class="u-flex u-row-between u-m-t-20">
|
|
<text class="font-bold color-333">被邀请人消费有效</text>
|
|
<up-switch :active-value="1" :inactive-value="0" v-model="form.inviteConsume"></up-switch>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<template v-if="form.openType == 'pay'">
|
|
<view class="u-m-t-24">
|
|
<up-line></up-line>
|
|
</view>
|
|
<view class="x-padding u-m-t-24">
|
|
<view class="u-flex u-row-between">
|
|
<text class="font-bold color-333">付费金额</text>
|
|
</view>
|
|
<view class="u-flex u-m-t-16">
|
|
<input
|
|
class="number-box"
|
|
placeholder="请输入"
|
|
placeholder-class="color-999 u-font-28"
|
|
type="number"
|
|
|
|
v-model="form.payAmount"
|
|
/>
|
|
<view class="unit">元</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<view class="u-m-t-32 container" style="padding-left: 0; padding-right: 0">
|
|
<view class="x-padding">
|
|
<view class="u-flex u-row-between">
|
|
<text class="font-bold color-333">分销奖励次数</text>
|
|
</view>
|
|
<view class="u-m-t-16">
|
|
<up-radio-group v-model="isLimitCount" placement="row">
|
|
<up-radio
|
|
v-for="item in isLimitCounts"
|
|
:key="item.value"
|
|
:name="item.value"
|
|
:label="item.label"
|
|
>
|
|
<template #label>
|
|
<text>
|
|
{{ item.label }}
|
|
</text>
|
|
</template>
|
|
</up-radio>
|
|
</up-radio-group>
|
|
</view>
|
|
</view>
|
|
<template v-if="isLimitCount == 0">
|
|
<view class="u-m-t-24 x-padding">
|
|
<up-line></up-line>
|
|
</view>
|
|
<view class="x-padding u-m-t-24">
|
|
<view class="u-flex u-row-between">
|
|
<text class="font-bold color-333">每人奖励</text>
|
|
</view>
|
|
<view class="u-flex u-m-t-16">
|
|
<input
|
|
class="number-box"
|
|
placeholder="请输入"
|
|
placeholder-class="color-999 u-font-28"
|
|
type="number"
|
|
|
|
v-model="form.rewardCount"
|
|
/>
|
|
<view class="unit">次</view>
|
|
</view>
|
|
|
|
<view class="u-m-t-24">
|
|
<up-line></up-line>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<view class="x-padding u-m-t-24">
|
|
<view class="u-flex u-row-between">
|
|
<text class="font-bold color-333">结算时长</text>
|
|
</view>
|
|
<view class="u-flex u-m-t-16">
|
|
<input
|
|
class="number-box"
|
|
placeholder="请输入"
|
|
placeholder-class="color-999 u-font-28"
|
|
type="number"
|
|
|
|
v-model="form.settlementDay"
|
|
/>
|
|
<view class="unit">天</view>
|
|
</view>
|
|
|
|
<view class="u-m-t-24">
|
|
<up-line></up-line>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-m-t-32 container">
|
|
<view
|
|
class="u-flex u-row-between u-p-b-26"
|
|
@click="go.to('PAGES_DISTRIBUTION_LEVEL_LIST')"
|
|
>
|
|
<text class="font-bold color-333">分销员等级</text>
|
|
<view class="u-flex">
|
|
<text class="u-font-24">去设置</text>
|
|
<up-icon name="arrow-right"></up-icon>
|
|
</view>
|
|
</view>
|
|
<up-line></up-line>
|
|
<view class="u-flex u-row-between u-p-t-26">
|
|
<text class="font-bold color-333">未开通页面</text>
|
|
<view class="u-flex">
|
|
<text class="u-font-28 color-999">请前往PC端设置</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<my-bottom-btn-group @save="save" @cancel="cancel"></my-bottom-btn-group>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, computed, onMounted, ref, inject } from "vue";
|
|
import userTypes from "./user-types.vue";
|
|
import {
|
|
onLoad,
|
|
onReady,
|
|
onShow,
|
|
onPageScroll,
|
|
onReachBottom,
|
|
onBackPress,
|
|
} from "@dcloudio/uni-app";
|
|
import go from "@/commons/utils/go.js";
|
|
|
|
import { watch } from "vue";
|
|
const distributionStore = inject("distributionStore");
|
|
|
|
//分销奖励次数
|
|
const isLimitCount = ref(0);
|
|
const isLimitCounts = [
|
|
{
|
|
value: 0,
|
|
label: "限制",
|
|
},
|
|
{
|
|
value: 1,
|
|
label: "不限制",
|
|
},
|
|
];
|
|
//开通方式
|
|
const opentypes = [
|
|
{
|
|
value: "auto",
|
|
label: "自动开通",
|
|
},
|
|
{
|
|
value: "manual",
|
|
label: "手动开通",
|
|
},
|
|
{
|
|
value: "pay",
|
|
label: "付费开通",
|
|
},
|
|
];
|
|
const form = reactive({
|
|
isEnable: 1,
|
|
openType: "pay",
|
|
inviteCount: 1,
|
|
inviteConsume: 0,
|
|
payAmount: 0,
|
|
rewardCount: 1,
|
|
settlementDay: 1,
|
|
upgradeType: "auto",
|
|
notActivatedPage: null,
|
|
levelConfigList: [],
|
|
});
|
|
watch(
|
|
() => isLimitCount.value,
|
|
(newval) => {
|
|
if (newval) {
|
|
form.rewardCount = -1;
|
|
} else {
|
|
form.rewardCount = "";
|
|
}
|
|
}
|
|
);
|
|
|
|
async function save() {
|
|
console.log(form);
|
|
const submitData = {
|
|
...form,
|
|
};
|
|
const res = await distributionStore.editConfig(submitData);
|
|
uni.showToast({
|
|
title: "更新成功",
|
|
icon: "none",
|
|
duration: 2000,
|
|
success: function () {},
|
|
});
|
|
}
|
|
function cancel() {
|
|
uni.navigateBack();
|
|
}
|
|
watch(
|
|
() => distributionStore.config,
|
|
(newval) => {
|
|
setForm(newval);
|
|
}
|
|
);
|
|
|
|
function setForm(data) {
|
|
if (data.rewardCount == -1) {
|
|
isLimitCount.value = 1;
|
|
}
|
|
Object.assign(form, data);
|
|
console.log(form);
|
|
}
|
|
|
|
onMounted(() => {});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.x-padding {
|
|
padding: 0 24rpx;
|
|
}
|
|
.text-tips {
|
|
color: #999999;
|
|
font-size: 14px;
|
|
padding: 0 28rpx;
|
|
border-radius: 6rpx 0 0 6rpx;
|
|
border: 2rpx solid #d9d9d9;
|
|
background-color: #f7f7fa;
|
|
line-height: 60rpx;
|
|
}
|
|
.text-tips1 {
|
|
border-radius: 0 6rpx 6rpx 0;
|
|
}
|
|
.gap-40 {
|
|
gap: 40rpx;
|
|
}
|
|
.my-input {
|
|
border: 2rpx solid #d9d9d9;
|
|
height: 60rpx;
|
|
border-right: none;
|
|
width: 240rpx;
|
|
text-align: center;
|
|
padding: 0 2px;
|
|
font-size: 14px;
|
|
}
|
|
.box {
|
|
padding: 0 28rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.container {
|
|
background: #fff;
|
|
padding: 32rpx 24rpx;
|
|
margin-top: 32rpx;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
}
|
|
.add {
|
|
padding: 8rpx 32rpx;
|
|
border-radius: 12rpx;
|
|
background: #318afe;
|
|
color: #ffffff;
|
|
font-size: 28rpx;
|
|
line-height: 56rpx;
|
|
margin: 0;
|
|
}
|
|
.color-red {
|
|
color: #ff2f2f;
|
|
}
|
|
$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;
|
|
}
|
|
.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;
|
|
}
|
|
</style>
|