442 lines
11 KiB
Vue
442 lines
11 KiB
Vue
<template>
|
||
<view class="select-serve">
|
||
<custom-navbar title="设置佣金" backgroundColor="#FFFFFF"></custom-navbar>
|
||
<view class="select-tip">
|
||
<text style="color: #FF4767;">温馨提示：</text>支持 按1%~30%区间设置佣金比例，订单成功成交后，系统将按实付金额 × 佣金比例自动扣减。
|
||
</view>
|
||
<view v-for="(item,index) in selectedItems" :key="index" class="serve-card">
|
||
<image :src="item.photo[0]" mode="aspectFill" class="serve-card__img"></image>
|
||
<view class="serve-card-right">
|
||
<view class="serve-card-right-text">{{item.title}}</view>
|
||
<view class="serve-card-right-price">¥<text style="font-size: 30rpx;">{{item.server_price}}</text> </view>
|
||
<view class="serve-card-right-number">
|
||
<text class="serve-card-right-number-text">设置佣金比例</text>
|
||
<!-- <numberBox v-model="item.numberValue" :price="item.server_price"></numberBox> -->
|
||
<view class="numberValue">
|
||
<view class="fuHao" @click="calculate(item,-1)">-</view>
|
||
<view class="numberValue-card">
|
||
<input type="number" v-model="item.numberValue" @input="changeInput(item,$event)" class="numberValue-input" placeholder="请输入比例" />
|
||
<text class="percentage">%</text>
|
||
</view>
|
||
<view class="fuHao" @click="calculate(item,1)">+</view>
|
||
</view>
|
||
</view>
|
||
<view class="serve-card-right-estimate" v-show="estimate(item.numberValue,item.server_price)">
|
||
预估佣金:{{ estimate(item.numberValue,item.server_price) }}
|
||
<image src="/static/images/recruit/tip.png" class="serve-card-right-estimate-img"
|
||
@click="openModal"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="select-serve-footer">
|
||
<view class="select-serve-footer__btn" @click="submit">确定</view>
|
||
</view>
|
||
|
||
<uv-modal ref="modal" title="提示" width="620rpx">
|
||
<view class="slot-content">
|
||
预估佣金按<text style="color: #FF4767;">「订单实付金额 × 佣金比例」</text>计算。因服务实付金额受活动参与程度影响存在波动，最终佣金以订单实际结算结果为准。
|
||
</view>
|
||
<template v-slot:confirmButton>
|
||
<view type="default" @click="closeModal" class="closeModal">确定</view>
|
||
</template>
|
||
</uv-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from "@/utils/request";
|
||
import numberBox from "@/components/number-box/number-box";
|
||
export default {
|
||
components: {
|
||
numberBox,
|
||
},
|
||
data() {
|
||
return {
|
||
clickType: false, //点击状态，防止连续点击
|
||
selectedItems: [], // 用于接收上一页传递的选中项
|
||
numberValue: null,
|
||
apiObj: {
|
||
add: {
|
||
2: "/sj/serversPromotion/batchAdd",
|
||
1: "/syr/serversPromotion/batchAdd"
|
||
},
|
||
edit: {
|
||
2: "/sj/serversPromotion/edit",
|
||
1: "/syr/serversPromotion/edit"
|
||
}
|
||
},
|
||
identityIndex: 2,
|
||
type: 1. //1为编辑。2为修改3为添加
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
// 解析参数（注意：需先解码再转JSON）
|
||
if (options.type) {
|
||
this.type = options.type
|
||
}
|
||
if (options.selectedItems) {
|
||
this.selectedItems = JSON.parse(decodeURIComponent(options.selectedItems));
|
||
this.selectedItems.forEach(item => {
|
||
this.$set(item, 'numberValue', Math.round(Number(item.commission_rate) * 100) || null);
|
||
})
|
||
console.log('接收的选中项：', this.selectedItems);
|
||
}
|
||
},
|
||
methods: {
|
||
calculate(item,value) {
|
||
let num = Number(item.numberValue) + value;
|
||
if (num > 30) {
|
||
if(num<31){
|
||
this.$nextTick(() => {
|
||
item.numberValue = 30
|
||
});
|
||
return
|
||
}
|
||
uni.showToast({
|
||
title: `不能大于30%`,
|
||
icon: "none",
|
||
});
|
||
} else if (num < 0) {
|
||
if(num>-1){
|
||
this.$nextTick(() => {
|
||
item.numberValue = 0
|
||
});
|
||
return
|
||
}
|
||
uni.showToast({
|
||
title: `不能小于0%`,
|
||
icon: "none",
|
||
});
|
||
}else{
|
||
this.$nextTick(() => {
|
||
item.numberValue = num
|
||
});
|
||
}
|
||
},
|
||
changeInput(item,event) {
|
||
let value = parseInt(event.detail.value);
|
||
// 将输入值转为数字（处理可能的字符串输入）
|
||
let num = Number(value);
|
||
// 处理非数字的情况（如输入非数字字符时，默认设为0）
|
||
if (isNaN(num)) {
|
||
num = 0;
|
||
}
|
||
// 边界值处理
|
||
if (num > 30) {
|
||
num = 30;
|
||
} else if (num < 0) {
|
||
num = 0;
|
||
}
|
||
this.$nextTick(()=>{
|
||
item.numberValue = num
|
||
})
|
||
|
||
},
|
||
openModal() {
|
||
this.$refs.modal.open();
|
||
},
|
||
closeModal() {
|
||
this.$refs.modal.close();
|
||
},
|
||
estimate(a, b) {
|
||
if (a && b) {
|
||
console.log('计算结果：', a,b);
|
||
let product =Math.floor(a * b) / 100; // 先计算乘积
|
||
console.log('计算结果1：', product);
|
||
console.log('计算结果2：', product.toFixed(2));
|
||
return product.toFixed(2); // 保留 2 位小数（返回字符串）
|
||
} else {
|
||
return ""
|
||
}
|
||
|
||
},
|
||
submit() {
|
||
let list = []
|
||
for (let item of this.selectedItems) {
|
||
if (!item.numberValue) { // 检测到未设置的项
|
||
uni.showToast({
|
||
title: `请设置完成佣金比例`,
|
||
icon: "none",
|
||
});
|
||
return; // 直接退出整个 submit 函数，后续代码全不执行
|
||
}
|
||
if (this.estimate(item.numberValue, item.server_price) < 0.01) { // 检测到未设置的项
|
||
uni.showToast({
|
||
title: `预估佣金必须不得小于0.01`,
|
||
icon: "none",
|
||
});
|
||
return; // 直接退出整个 submit 函数，后续代码全不执行
|
||
}
|
||
// 处理有效项
|
||
let obj = {};
|
||
if (this.type == 2) {
|
||
obj.id = item.id;
|
||
}
|
||
obj.server_id = item.server_id || item.id;
|
||
obj.commission_rate = item.numberValue / 100;
|
||
list.push(obj); // 添加到数组
|
||
}
|
||
let data = {
|
||
data: JSON.stringify(list)
|
||
}
|
||
let url = this.apiObj.add[this.identityIndex]
|
||
if (this.type == 2) {
|
||
data = {
|
||
id: list[0].id,
|
||
commission_rate: list[0].commission_rate
|
||
}
|
||
url = this.apiObj.edit[this.identityIndex]
|
||
}
|
||
if (this.clickType) {
|
||
return
|
||
}
|
||
this.clickType = true
|
||
request.post(url, data).then((res) => {
|
||
console.log(res);
|
||
if (res.code == 200) {
|
||
// 修改上一页页面信息
|
||
const pages = getCurrentPages();
|
||
console.log(11111, pages)
|
||
const prevPage = this.type == 3 ? pages[pages.length - 3] : pages[pages.length - 2];
|
||
if (prevPage) {
|
||
if (prevPage.$vm && typeof prevPage.$vm.search === "function") {
|
||
prevPage.$vm.search(); // 存在则调用
|
||
}
|
||
let delta = this.type == 3 ? 2 : 1
|
||
uni.navigateBack({
|
||
delta
|
||
});
|
||
}
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg || '操作失败',
|
||
icon: "none",
|
||
});
|
||
}
|
||
}).finally(() => {
|
||
this.clickType = false
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.select-serve {
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
padding-bottom: 160rpx;
|
||
|
||
.select-tip {
|
||
margin-top: 20rpx;
|
||
background: rgba(232, 16, 30, 0.1);
|
||
padding: 20rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.serve-card {
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
margin: 20rpx;
|
||
display: flex;
|
||
gap: 20rpx;
|
||
|
||
.serve-card__img {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.serve-card-right {
|
||
flex: 1;
|
||
|
||
.serve-card-right-text {
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.serve-card-right-price {
|
||
margin-top: 15rpx;
|
||
font-family: DINPro, DINPro;
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #FF4767;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.serve-card-right-number {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 23rpx;
|
||
|
||
.serve-card-right-number-text {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 86rpx;
|
||
}
|
||
}
|
||
|
||
.serve-card-right-estimate {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 16rpx;
|
||
background-color: rgba(245, 191, 133, 0.10);
|
||
border-radius: 10rpx;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #B6732B;
|
||
text-align: left;
|
||
font-style: normal;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
padding: 6rpx 10rpx;
|
||
|
||
.serve-card-right-estimate-img {
|
||
margin-left: 10rpx;
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.select-serve-footer {
|
||
background-color: #fff;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 40rpx 30rpx;
|
||
|
||
&__btn {
|
||
width: 690rpx;
|
||
height: 78rpx;
|
||
background: #FF4767;
|
||
border-radius: 798rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #ffffff;
|
||
line-height: 39rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.closeModal {
|
||
width: 556rpx;
|
||
height: 80rpx;
|
||
background: #FF4767;
|
||
border-radius: 40rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 32rpx 50rpx 32rpx;
|
||
}
|
||
|
||
::v-deep .uv-modal__title {
|
||
padding-top: 50rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333!important;
|
||
line-height: 45rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
|
||
::v-deep .uv-modal__content {
|
||
padding: 30rpx 32rpx 30rpx 30rpx;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
//
|
||
.numberValue {
|
||
display: flex;
|
||
gap: 12rpx;
|
||
|
||
.numberValue-card {
|
||
position: relative;
|
||
width: 140rpx;
|
||
padding-right: 40rpx;
|
||
height: 46rpx;
|
||
background: #F6F6F6;
|
||
|
||
.numberValue-input {
|
||
width: 140rpx;
|
||
height: 46rpx;
|
||
background: #F6F6F6;
|
||
border-radius: 6rpx;
|
||
text-align: center !important;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.percentage {
|
||
position: absolute;
|
||
right: 9rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
line-height: 37rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.fuHao {
|
||
font-weight: 500;
|
||
font-size: 34rpx;
|
||
color: #333333;
|
||
line-height: 48rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
}
|
||
.uni-input-placeholder{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #D1CCCC;
|
||
line-height: 33rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
</style> |