134 lines
3.9 KiB
Vue
134 lines
3.9 KiB
Vue
<template>
|
||
<view>
|
||
<JHeaderTitle title="编辑信息" bgColor="transparent" />
|
||
|
||
<JMainCard pd="0" wrapPd="30rpx">
|
||
<JInput name="码牌名称" :isBorder="true" v-model:value="vdata.qrcAlias" place="默认为未命名" />
|
||
</JMainCard>
|
||
|
||
<JMainCard pd="0" wrapPd="0 30rpx 40rpx 30rpx">
|
||
<JInput name="收款金额" :isBorder="true">
|
||
<view @tap="choice">{{ vdata.fixedFlag == 1 ? "自定义金额" : "任意金额" }}</view>
|
||
</JInput>
|
||
|
||
<JInput
|
||
type="digit"
|
||
v-if="vdata.fixedFlag == 1"
|
||
name="自定义金额"
|
||
:img="false"
|
||
place="请输入自定义金额"
|
||
v-model:value="vdata.fixedPayAmount"
|
||
/>
|
||
</JMainCard>
|
||
|
||
<JPopup ref="JPopupRef">
|
||
<JMainCard pd="0 0 30rpx 0" wrapPd="0 30rpx">
|
||
<JLine
|
||
iconOn="/pageWork/static/images/no-fixed-on.svg"
|
||
iconClose="/pageWork/static/images/no-fixed-close.svg"
|
||
name="任意金额"
|
||
:isBorder="true"
|
||
:isSelect="vdata.fixedFlag != 1"
|
||
@tap="changeAmount(0)"
|
||
/>
|
||
<JLine
|
||
iconOn="/static/equipmentImg/fixed-on.svg"
|
||
iconClose="/pageWork/static/images/fixed-close.svg"
|
||
name="自定义金额"
|
||
:isSelect="vdata.fixedFlag == 1"
|
||
@tap="changeAmount(1)"
|
||
/>
|
||
<view class="tiptext"> 选择任意金额将不限制码牌收款金额，选择自定义金额，可指定该码牌收款固定金额。 </view>
|
||
</JMainCard>
|
||
|
||
<JButton
|
||
pd="30rpx"
|
||
bottom="50rpx"
|
||
color="#303030"
|
||
bgColor="rgba(255,255,255,0.8)"
|
||
pdTop="0"
|
||
@HandleTouch="JPopupRef.close()"
|
||
>取消</JButton
|
||
>
|
||
</JPopup>
|
||
|
||
<JButton pd="30rpx" @HandleTouch="preservation">保存</JButton>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { $upDateQRcodeList, $getQRcodeDetail } from "@/http/apiManager.js"
|
||
import { onLoad } from "@dcloudio/uni-app"
|
||
import { ref, reactive, toRaw } from "vue"
|
||
import valid from "@/hooks/validate"
|
||
import JInput from "@/components/newComponents/JInput/JInput.vue"
|
||
import JMainCard from "@/components/newComponents/JMainCard/JMainCard.vue"
|
||
import JPopup from "@/components/newComponents/JPopup/JPopup.vue"
|
||
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue" // 导航栏
|
||
import JLine from "@/components/newComponents/JLine/JLine.vue"
|
||
import JButton from "@/components/newComponents/JButton/JButton.vue"
|
||
|
||
const vdata = reactive({})
|
||
|
||
onLoad((option) => {
|
||
$getQRcodeDetail(option.id).then(({ bizData }) => {
|
||
bizData.qrcAlias ? null : (bizData.qrcAlias = "未命名")
|
||
bizData.fixedPayAmount = bizData.fixedPayAmount / 100
|
||
Object.assign(vdata, bizData)
|
||
})
|
||
})
|
||
|
||
const JPopupRef = ref(null) // 弹窗组件
|
||
|
||
// 切换金额
|
||
const choice = () => JPopupRef.value.open()
|
||
|
||
// 选择金额
|
||
const changeAmount = (data) => {
|
||
vdata.fixedFlag = data
|
||
JPopupRef.value.close()
|
||
}
|
||
|
||
// 保存
|
||
const preservation = () => {
|
||
let data = JSON.parse(JSON.stringify(toRaw(vdata)))
|
||
// data.fixedPayAmount *= 100 // 金额元转分
|
||
// 校验 1，默认名称为空则默认为 未命名 2. 自定义金额状态，金额不能为0
|
||
if (!data.qrcAlias) {
|
||
data.qrcAlias = "未命名"
|
||
}
|
||
if (!valid.takeMoney(data.fixedPayAmount)) {
|
||
return uni.showToast({
|
||
title: "请输入正确金额正数两位小数",
|
||
icon: "none",
|
||
})
|
||
}
|
||
if (data.fixedFlag == 1 && data.fixedPayAmount <= 0) {
|
||
return uni.showToast({
|
||
title: "自定义金额不能小于等于0",
|
||
icon: "none",
|
||
})
|
||
}
|
||
|
||
$upDateQRcodeList(data.qrcId, data).then(({ bizData }) => {
|
||
uni.showToast({ icon: "none", title: "保存成功" })
|
||
uni.navigateBack()
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #f2f2f2;
|
||
}
|
||
.tiptext {
|
||
margin: 10rpx 30rpx 0;
|
||
border-radius: 10rpx;
|
||
background: #f2f2f2;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
font-size: 27rpx;
|
||
line-height: 46rpx;
|
||
}
|
||
</style>
|