411 lines
11 KiB
Vue
411 lines
11 KiB
Vue
<template>
|
||
<JeepayBackground>
|
||
<view class="page-wrapper jeepay-edit-form">
|
||
<JeepayCustomNavbar :title="vdata.ruleId ? '修改红包规则' : '创建红包规则' " backCtrl="back" />
|
||
<view class="hb_mian">
|
||
<uni-forms ref="formRef" :rules="rules" :model="vdata.formData" :label-width="130">
|
||
|
||
<uni-forms-item required label="红包类型" name="packetType">
|
||
<JeepayRadioPopupView label="请选择红包类型" v-model:value="vdata.formData.packetType"
|
||
:list="[{ label: '门店专享', value: 1}]">
|
||
</JeepayRadioPopupView>
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item required label="营销折扣比例" name="marketing">
|
||
<JeepayRadioPopupView label="请选择营销折扣比例" v-model:value="vdata.formData.marketing"
|
||
:list="vdata.marketingList" @change="getMarketingList">
|
||
</JeepayRadioPopupView>
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item required label="平台补贴比例" name="marketScale">
|
||
<uni-easyinput v-model="vdata.formData.marketScale" class="p-box" :disabled="true"
|
||
placeholder="请选择营销折扣比例" :inputBorder="false"></uni-easyinput>
|
||
</uni-forms-item>
|
||
<uni-forms-item required label="顾客获得红包比例" name="userPerkScale">
|
||
<uni-easyinput v-model="vdata.formData.userPerkScale" class="p-box" :disabled="true"
|
||
placeholder="请选择营销折扣比例" :inputBorder="false"></uni-easyinput>
|
||
</uni-forms-item>
|
||
|
||
<uni-forms-item required label="领取红包后有效期" name="expireNumber">
|
||
<JeepayRadioPopupView label="请选择领取红包后有效期" v-model:value="vdata.formData.expireNumber"
|
||
:list="vdata.receiveList">
|
||
</JeepayRadioPopupView>
|
||
</uni-forms-item>
|
||
|
||
<!-- <JeepayTableListItem title="将规则配置到门店" class="configurationBtn">
|
||
<template #titleRight>
|
||
<JeepayStateSwitch v-model:state="vdata.formData.state" :showSwitchType="true"
|
||
:confirm='false' />
|
||
</template>
|
||
</JeepayTableListItem> -->
|
||
|
||
<uni-forms-item required label="将规则配置到门店" name="receivered">
|
||
<JeepayRadioPopupView label="请选择配置到门店" v-model:value="vdata.formData.configType"
|
||
:list="[{ label: '配置到所有门店', value: 1},{ label: '配置到指定门店', value: 2}]"
|
||
@change="getStoreList">
|
||
</JeepayRadioPopupView>
|
||
<!-- <view class="store-name" @tap="selectedStore"></view> -->
|
||
</uni-forms-item>
|
||
|
||
|
||
|
||
<JeepayTableListItem v-show="false" title="状态" subtitle="状态禁用后，规则将无法使用" class="configurationBtn">
|
||
<template #titleRight>
|
||
<JeepayStateSwitch v-model:state="vdata.formData.state" :showSwitchType="true"
|
||
:confirm='false' />
|
||
</template>
|
||
</JeepayTableListItem>
|
||
|
||
|
||
</uni-forms>
|
||
</view>
|
||
<view class="confirm-wrapper" style="position: fixed;bottom: 40rpx;width: 92%;">
|
||
<view class="confirm-button flex-center" hover-class="touch-button" @tap="confirmFunc">
|
||
{{ vdata.ruleId ? '确认修改' : '确认创建' }}</view>
|
||
</view>
|
||
|
||
</view>
|
||
</JeepayBackground>
|
||
|
||
<JeepayBizinfoSelect @confirmData="confirmData" :params="vdata.params" :isShowAllBiz="false" :isCheckbox="vdata.isCheckbox" :configMode="red" ref="jeepayPopupListSelect" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
reactive,
|
||
ref
|
||
} from 'vue'
|
||
import {
|
||
onLoad
|
||
} from '@dcloudio/uni-app'
|
||
import {
|
||
reqLoad,
|
||
API_URL_MCH_REF_PACKET_RULE_QUERY,
|
||
API_URL_MCH_REF_PACKET_RULE_EDIT,
|
||
API_URL_MCH_REF_PACKET_RULE_LIST,
|
||
API_URL_MCH_REF_PACKET_RULE_ADD
|
||
} from '@/http/apiManager.js';
|
||
import infoBox from '@/commons/utils/infoBox.js';
|
||
import go from '@/commons/utils/go.js'
|
||
import formUtil from '@/commons/utils/formUtil.js'
|
||
import cal from '@/commons/utils/cal.js'
|
||
import emit from '@/commons/utils/emit.js'
|
||
|
||
const formRef = ref()
|
||
const jeepayPopupListSelect = ref(null)
|
||
|
||
|
||
|
||
const vdata = reactive({
|
||
// receiveList:["1","2","3","4","5","6"],
|
||
receiveList: [{
|
||
label: '1个月',
|
||
value: 1
|
||
}, {
|
||
label: '2个月',
|
||
value: 2
|
||
}, {
|
||
label: '3个月',
|
||
value: 3
|
||
}, {
|
||
label: '4个月',
|
||
value: 4
|
||
}, {
|
||
label: '5个月',
|
||
value: 5
|
||
}, {
|
||
label: '6个月',
|
||
value: 6
|
||
}],
|
||
marketingList: [{
|
||
label: '98折',
|
||
value: '0'
|
||
}, {
|
||
label: '95折',
|
||
value: '1'
|
||
}, {
|
||
label: '9折',
|
||
value: '2'
|
||
}, {
|
||
label: '85折',
|
||
value: '3'
|
||
}, {
|
||
label: '8折',
|
||
value: '4'
|
||
}],
|
||
platformList: ['97', '93', '85', '8', '7'],
|
||
userList: ['4', '10', '20', '30', '50'],
|
||
ruleId: null, // 新建 or 修改
|
||
|
||
// 表单数据
|
||
formData: {
|
||
state: 1,
|
||
storeIdList:[],
|
||
},
|
||
confirmFormData:{},
|
||
isCheckbox:false,
|
||
params:null,
|
||
})
|
||
|
||
onLoad((options) => {
|
||
console.log(options,'options')
|
||
// 修改页面
|
||
if (options.ruleId) {
|
||
vdata.ruleId = options.ruleId
|
||
console.log(vdata.ruleId,'vdata.ruleId')
|
||
reqLoad.getById(API_URL_MCH_REF_PACKET_RULE_QUERY, vdata.ruleId).then(({
|
||
bizData
|
||
}) => {
|
||
console.log(bizData);
|
||
vdata.formData = bizData
|
||
// vdata.formData.marketScale = bizData.platScale+"折"
|
||
let marketScale = bizData.marketScale+"折"
|
||
console.log(marketScale);
|
||
vdata.marketingList.map((item)=>{
|
||
console.log(item.label);
|
||
if(item.label==marketScale){
|
||
vdata.formData.marketing = item.value
|
||
}
|
||
})
|
||
vdata.formData.marketScale = bizData.platScale+"折"
|
||
vdata.formData.storeIdList=[]
|
||
if(bizData.storeId){
|
||
vdata.formData.configType= 2
|
||
// vdata.params={
|
||
// bizType:"mchApp",
|
||
// storeId:bizData.storeId,
|
||
// }
|
||
}else{
|
||
vdata.formData.configType= 1
|
||
}
|
||
vdata.formData.storeIdList.push(bizData.storeId)
|
||
vdata.formData.platScale = bizData.platScale+"折"
|
||
vdata.formData.userPerkScale =Number(bizData.userPerkScale)*100+"%"
|
||
vdata.formData.rechargeAmount = cal.cert2Dollar(vdata.formData.rechargeAmount)
|
||
vdata.formData.giveAmount = cal.cert2Dollar(vdata.formData.giveAmount)
|
||
})
|
||
}
|
||
|
||
})
|
||
|
||
|
||
const rules = {
|
||
rechargeAmount: {
|
||
rules: [formUtil.rules.requiredInput('充值金额')]
|
||
}
|
||
}
|
||
|
||
|
||
function confirmData(data){
|
||
vdata.formData.storeIdList=[]
|
||
if(data){
|
||
data.map((item=>{
|
||
vdata.formData.storeIdList.push(item.storeId)
|
||
}))
|
||
}
|
||
console.log(vdata.formData);
|
||
}
|
||
|
||
function confirmFunc() {
|
||
console.log(vdata.formData);
|
||
vdata.confirmFormData={
|
||
configType:vdata.formData.configType,
|
||
expireNumber:vdata.formData.expireNumber,
|
||
marketScale:vdata.formData.marketScale,
|
||
packetType:vdata.formData.packetType,
|
||
platScale:vdata.formData.platScale,
|
||
state:vdata.formData.state,
|
||
storeIdList:vdata.formData.storeIdList,
|
||
userPerkScale:vdata.formData.userPerkScale
|
||
}
|
||
console.log(vdata.confirmFormData);
|
||
console.log(vdata.formData.marketing);
|
||
//处理最后一个字
|
||
// if(vdata.confirmFormData.marketScale){
|
||
// vdata.confirmFormData.marketScale= Number(vdata.confirmFormData.marketScale.substring(0,vdata.confirmFormData.marketScale.length - 1))
|
||
// }else{
|
||
// vdata.confirmFormData.marketScale=''
|
||
// }
|
||
vdata.confirmFormData.marketScale =vdata.marketingList[vdata.formData.marketing].label
|
||
vdata.confirmFormData.marketScale=Number(vdata.confirmFormData.marketScale.substring(0,vdata.confirmFormData.marketScale.length-1))
|
||
if(vdata.confirmFormData.userPerkScale){
|
||
vdata.confirmFormData.userPerkScale= Number(vdata.confirmFormData.userPerkScale.substring(0,vdata.confirmFormData.userPerkScale.length - 1)/100)
|
||
}else{
|
||
vdata.confirmFormData.userPerkScale=''
|
||
}
|
||
|
||
|
||
if(typeof vdata.confirmFormData.platScale ==="string"){
|
||
vdata.confirmFormData.platScale=Number(vdata.confirmFormData.platScale.substring(0,vdata.confirmFormData.platScale.length - 1))
|
||
}
|
||
|
||
// if(vdata.confirmFormData.platScale){
|
||
// vdata.confirmFormData.platScale=Number(vdata.confirmFormData.platScale.substring(0,vdata.confirmFormData.platScale.length - 1))
|
||
// }
|
||
|
||
vdata.marketingList.map((item)=>{
|
||
if(item.value==vdata.confirmFormData.marketing){
|
||
vdata.confirmFormData.marketScale=Number(item.label.substring(0,item.label.length - 1))
|
||
}
|
||
})
|
||
delete vdata.confirmFormData.marketing;
|
||
|
||
|
||
if(vdata.confirmFormData.configType===1){
|
||
vdata.confirmFormData.storeIdList=[]
|
||
}
|
||
|
||
if(!vdata.confirmFormData.packetType){
|
||
return infoBox.showToast('请选择红包类型')
|
||
}
|
||
if(!vdata.confirmFormData.marketScale){
|
||
return infoBox.showToast('请设置营销折扣比例')
|
||
}
|
||
if(!vdata.confirmFormData.expireNumber){
|
||
return infoBox.showToast('请选择红包有效期')
|
||
}
|
||
if(!vdata.confirmFormData.configType){
|
||
return infoBox.showToast('请选择规则配置')
|
||
}
|
||
// if (vdata.formData.rechargeAmount <= 0) return infoBox.showToast('充值金额 不能小于0')
|
||
// const REG_AMOUNT = /^([0-9]{1}|^[1-9]{1}\d{1,15})(\.\d{1,2})?$/
|
||
// if (!REG_AMOUNT.test(vdata.formData.rechargeAmount)) {
|
||
// return infoBox.showToast('请输入正确的充值金额，最多两位小数')
|
||
// }
|
||
// if (vdata.formData.giveAmount && !REG_AMOUNT.test(vdata.formData.giveAmount)) {
|
||
// return infoBox.showToast('请输入正确的赠送金额，不能小于0 最多保留两位小数')
|
||
// }
|
||
|
||
formUtil.validate(formRef.value).then(() => {
|
||
if(vdata.ruleId){
|
||
vdata.confirmFormData.id = vdata.ruleId;
|
||
return reqLoad.addOrUpdate( false, API_URL_MCH_REF_PACKET_RULE_EDIT, vdata.confirmFormData)
|
||
}else{
|
||
return reqLoad.addOrUpdate(false,API_URL_MCH_REF_PACKET_RULE_ADD,vdata.confirmFormData)
|
||
}
|
||
|
||
})
|
||
.then(({
|
||
bizData
|
||
}) => {
|
||
go.back(1, emit.ENAME_REF_RECHARGE_RULE_LIST) // 返回页面 && 更新
|
||
})
|
||
|
||
}
|
||
|
||
function getMarketingList(value) {
|
||
console.log(value, 'value');
|
||
vdata.formData.marketScale = vdata.platformList[value]+'折'
|
||
vdata.formData.userPerkScale = vdata.userList[value] + "%"
|
||
vdata.formData.platScale=Number(vdata.platformList[value])
|
||
console.log(vdata.formData.platScale);
|
||
}
|
||
const selectedStore = (e) => {
|
||
console.log(e);
|
||
jeepayPopupListSelect.value.open(vdata.store).then((selected) => {
|
||
if (selected) {
|
||
vdata.store = selected
|
||
refTableFunc()
|
||
}
|
||
})
|
||
}
|
||
|
||
function getStoreList(e) {
|
||
if(e===2){
|
||
vdata.isCheckbox=true
|
||
console.log(vdata.isCheckbox,'vdata.isCheckboxvdata.isCheckboxvdata.isCheckbox');
|
||
}
|
||
selectedStore()
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
input {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.f-label {
|
||
width: 240rpx;
|
||
}
|
||
|
||
.selected-sex {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-top: 45rpx;
|
||
margin-bottom: 10rpx;
|
||
font-size: 32rpx;
|
||
color: #b3b3b3;
|
||
|
||
image {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
margin-top: -40rpx;
|
||
}
|
||
|
||
.selected-box {
|
||
color: #000;
|
||
}
|
||
}
|
||
|
||
.confirm-wrapper {
|
||
padding: 50rpx 30rpx;
|
||
|
||
.confirm-button {
|
||
height: 110rpx;
|
||
color: #fff;
|
||
border-radius: 20rpx;
|
||
background: $jeepay-bg-primary;
|
||
}
|
||
}
|
||
|
||
.p-box .uni-input-input {
|
||
padding: 10px;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss">
|
||
.hb_mian{
|
||
flex:1;
|
||
padding: 20rpx;
|
||
.uni-forms{
|
||
border-radius: 20rpx;
|
||
background: #fff;
|
||
.uni-forms-item{
|
||
background: none;
|
||
padding:0 20rpx;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.uni-forms-item__label{
|
||
font-size: 28rpx !important;
|
||
font-weight: 900;
|
||
color: #000;
|
||
text-indent: 0;
|
||
}
|
||
.selected-radio{
|
||
font-size: 28rpx !important;
|
||
}
|
||
.uni-forms-item__content{
|
||
font-size: 32rpx !important;
|
||
}
|
||
.uni-easyinput__placeholder-class{
|
||
font-size: 28rpx !important;
|
||
color: #b3b3b3;
|
||
background: #fff;
|
||
padding-right:0 !important;
|
||
}
|
||
.uni-easyinput__content-input{
|
||
background: #fff !important;
|
||
}
|
||
}
|
||
.configurationBtn{
|
||
.list-item{
|
||
padding: 0 20rpx !important;
|
||
margin-top: 20rpx !important;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
}
|
||
}
|
||
</style> |