增加分销页面和分销跳转
This commit is contained in:
312
pageMarket/distribution/components/config.vue
Normal file
312
pageMarket/distribution/components/config.vue
Normal file
@@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<view class="box">
|
||||
|
||||
<view class="u-m-t-32 container">
|
||||
<view class="u-flex u-row-between u-m-b-16">
|
||||
<text class="font-bold color-333">可用门店</text>
|
||||
</view>
|
||||
<my-shop-select
|
||||
v-model:selShops="form.shopIdList"
|
||||
v-model:useType="form.useType"
|
||||
></my-shop-select>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-32 container">
|
||||
<view class="u-flex u-row-between">
|
||||
<text class="font-bold color-333 u-m-b-16">适用用户</text>
|
||||
</view>
|
||||
<userTypes v-model="form.applicableUser"></userTypes>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-32 container">
|
||||
<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.cashbackType" placement="row">
|
||||
<up-radio
|
||||
v-for="item in cashbackTypes"
|
||||
:key="item.value"
|
||||
:name="item.value"
|
||||
:label="item.label"
|
||||
>
|
||||
<template #label>
|
||||
<text>
|
||||
{{ item.label }}
|
||||
</text>
|
||||
</template>
|
||||
</up-radio>
|
||||
</up-radio-group>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-32">
|
||||
<text class="font-bold color-333">阶梯设置</text>
|
||||
</view>
|
||||
<view
|
||||
class="u-m-t-32 u-flex u-row-between gap-40"
|
||||
v-for="(item, index) in form.cashbackStepList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="u-flex u-col-top">
|
||||
<view class="no-wrap u-m-r-16 u-m-t-14">{{ returnName(index) }}</view>
|
||||
<view class="u-flex-1">
|
||||
<view class="u-flex">
|
||||
<text class="u-m-r-24"> 返现门槛</text>
|
||||
<input
|
||||
class="my-input"
|
||||
type="digit"
|
||||
v-model="item.amount"
|
||||
placeholder=""
|
||||
/>
|
||||
<text class="text-tips text-tips1">元</text>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-24">
|
||||
<text class="u-m-r-24"> {{form.cashbackType === 'percentage' ? '返现比例' : '返现金额'}}</text>
|
||||
<input
|
||||
class="my-input"
|
||||
type="number"
|
||||
v-model="item.cashbackAmount"
|
||||
@blur="inputBlur($event, index)"
|
||||
:max="form.cashbackType === 'percentage' ? 100 : 999999"
|
||||
placeholder=""
|
||||
/>
|
||||
<text class="text-tips text-tips1">{{ returnUnit }} </text>
|
||||
<text class="color-red u-m-l-10" @click="deleteThreshold(index)"
|
||||
>删除</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button class="add u-m-t-32" @click="addcashbackStepList">添加</button>
|
||||
</view>
|
||||
<my-bottom-btn-group @save="save" @cancel="cancel"></my-bottom-btn-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed, onMounted } from "vue";
|
||||
import userTypes from "./user-types.vue";
|
||||
import * as consumeCashbackApi from "@/http/api/market/consumeCashback.js";
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow,
|
||||
onPageScroll,
|
||||
onReachBottom,
|
||||
onBackPress,
|
||||
} from "@dcloudio/uni-app";
|
||||
|
||||
//返现类型
|
||||
const cashbackTypes = [
|
||||
{
|
||||
value: "percentage",
|
||||
label: "按比例返现",
|
||||
},
|
||||
{
|
||||
value: "fix",
|
||||
label: "固定金额",
|
||||
},
|
||||
];
|
||||
const form = reactive({
|
||||
isEnable: 0,
|
||||
cashbackStepList: [],
|
||||
shopIdList: [],
|
||||
useType: "all",
|
||||
applicableUser: "all",
|
||||
cashbackType: "percentage",
|
||||
});
|
||||
function addcashbackStepList() {
|
||||
form.cashbackStepList.push({
|
||||
amount: 0,
|
||||
cashbackAmount: 0,
|
||||
});
|
||||
}
|
||||
|
||||
function inputBlur(e, index) {
|
||||
const value = e.detail.value;
|
||||
if (form.cashbackType === "percentage") {
|
||||
if (e.detail.value >= 100) {
|
||||
form.cashbackStepList[index].cashbackAmount = 100;
|
||||
} else if (e.detail.value < 0) {
|
||||
form.cashbackStepList[index].cashbackAmount = 0;
|
||||
} else {
|
||||
form.cashbackStepList[index].cashbackAmount =e.detail.value;
|
||||
}
|
||||
} else {
|
||||
if (e.detail.value < 0) {
|
||||
form.cashbackStepList[index].cashbackAmount = 0;
|
||||
} else if(e.detail.value > form.cashbackStepList[index].amount) {
|
||||
form.cashbackStepList[index].cashbackAmount = form.cashbackStepList[index].amount;
|
||||
} else {
|
||||
form.cashbackStepList[index].cashbackAmount =e.detail.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function save() {
|
||||
console.log(form);
|
||||
const submitData = {
|
||||
...form,
|
||||
};
|
||||
const res = await consumeCashbackApi.update(submitData);
|
||||
uni.showToast({
|
||||
title: "更新成功",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
success: function () {},
|
||||
});
|
||||
}
|
||||
function cancel() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
|
||||
function deleteThreshold(index) {
|
||||
form.cashbackStepList.splice(index, 1);
|
||||
}
|
||||
function setForm(data) {
|
||||
data.cashbackStepList=data.cashbackStepList||[]
|
||||
Object.assign(form, data);
|
||||
console.log(form);
|
||||
}
|
||||
const returnUnit = computed(() => {
|
||||
return form.cashbackType === "percentage" ? "%" : "元";
|
||||
});
|
||||
|
||||
const numChineseMap = {
|
||||
0: "零",
|
||||
1: "一",
|
||||
2: "二",
|
||||
3: "三",
|
||||
4: "四",
|
||||
5: "五",
|
||||
6: "六",
|
||||
7: "七",
|
||||
8: "八",
|
||||
9: "九",
|
||||
10: "十",
|
||||
100: "百",
|
||||
1000: "千",
|
||||
};
|
||||
|
||||
// 辅助函数：将数字转换为中文数字
|
||||
function numberToChinese(n) {
|
||||
if (n < 10) {
|
||||
return numChineseMap[n];
|
||||
}
|
||||
|
||||
// 处理10-99
|
||||
if (n < 100) {
|
||||
const ten = Math.floor(n / 10);
|
||||
const unit = n % 10;
|
||||
if (ten === 1) {
|
||||
return unit === 0 ? "十" : `十${numChineseMap[unit]}`;
|
||||
} else {
|
||||
return unit === 0
|
||||
? `${numChineseMap[ten]}十`
|
||||
: `${numChineseMap[ten]}十${numChineseMap[unit]}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 处理100-999
|
||||
if (n < 1000) {
|
||||
const hundred = Math.floor(n / 100);
|
||||
const remainder = n % 100;
|
||||
if (remainder === 0) {
|
||||
return `${numChineseMap[hundred]}百`;
|
||||
} else {
|
||||
return `${numChineseMap[hundred]}百${
|
||||
remainder < 10 ? "零" : ""
|
||||
}${numberToChinese(remainder)}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 处理1000-9999
|
||||
if (n < 10000) {
|
||||
const thousand = Math.floor(n / 1000);
|
||||
const remainder = n % 1000;
|
||||
if (remainder === 0) {
|
||||
return `${numChineseMap[thousand]}千`;
|
||||
} else {
|
||||
return `${numChineseMap[thousand]}千${
|
||||
remainder < 100 ? "零" : ""
|
||||
}${numberToChinese(remainder)}`;
|
||||
}
|
||||
}
|
||||
|
||||
// 更大的数字可以继续扩展（如万、亿等），这里以千为单位示例
|
||||
return n.toString(); // 超过范围时返回数字本身（可根据需求扩展）
|
||||
}
|
||||
|
||||
// 主函数：根据索引返回对应的组名
|
||||
function returnName(index) {
|
||||
const groupNumber = index + 1; // 索引从0开始，组号从1开始
|
||||
const chineseNumber = numberToChinese(groupNumber);
|
||||
return `第${chineseNumber}组`;
|
||||
}
|
||||
async function getData() {
|
||||
const res = await consumeCashbackApi.getConfig();
|
||||
if (res) {
|
||||
setForm(res);
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
70
pageMarket/distribution/components/user-types.vue
Normal file
70
pageMarket/distribution/components/user-types.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<view>
|
||||
<up-radio-group v-model="userType" placement="row">
|
||||
<up-radio
|
||||
v-for="item in userTypeList"
|
||||
:key="item.value"
|
||||
:name="item.value"
|
||||
:label="item.label"
|
||||
>
|
||||
<template #label>
|
||||
<text>
|
||||
{{ item.label }}
|
||||
</text>
|
||||
<text v-if="item.desc" class="color-666 u-font-24">
|
||||
{{ item.desc }}
|
||||
</text>
|
||||
</template>
|
||||
</up-radio>
|
||||
</up-radio-group>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, watch } from "vue";
|
||||
|
||||
const userType = defineModel({
|
||||
default: () => "all",
|
||||
type: String,
|
||||
});
|
||||
const userTypeList = [
|
||||
{
|
||||
value: "all",
|
||||
label: "全部用户",
|
||||
},
|
||||
{
|
||||
value: "new",
|
||||
label: "仅限新用户",
|
||||
},
|
||||
{
|
||||
value: "vip",
|
||||
label: "仅会员",
|
||||
desc:'（分店需开启超级会员可用）'
|
||||
},
|
||||
];
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.box {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: top;
|
||||
flex-wrap: wrap;
|
||||
padding: 10rpx 24rpx;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
position: relative;
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 24rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.shop-item {
|
||||
padding: 4rpx 8rpx 4rpx 16rpx;
|
||||
border-radius: 4rpx;
|
||||
border: 2rpx solid #f0f0f0;
|
||||
background-color: #f5f5f5;
|
||||
margin-bottom: 16rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user