231 lines
7.3 KiB
Vue
231 lines
7.3 KiB
Vue
<template>
|
|
<view class="page-wrapper jeepay-edit-form">
|
|
<JeepayCustomNavbar bgDefaultColor="#fff" :title="qrcInfo.createdAt ? '修改二维码' : '绑定二维码'" backCtrl="back" />
|
|
<uni-forms ref="qrcForm" :rules="rules" :model="qrcInfo" :label-width="160">
|
|
<uni-forms-item required label="立牌编号" name="qrcId" v-if="!qrcInfo.createdAt">
|
|
<view class="scan-wrapper">
|
|
<uni-easyinput :inputBorder="false" type="number" v-model="qrcInfo.qrcId" placeholder="请输入立牌编号" />
|
|
<image src="/pageDevice/static/devIconImg/icon-scan-code.svg" mode="scaleToFill" @tap="scanCode" />
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item required label="二维码名称" name="qrcAlias">
|
|
<uni-easyinput :inputBorder="false" type="text" v-model="qrcInfo.qrcAlias" placeholder="请输入立牌名称" />
|
|
</uni-forms-item>
|
|
<uni-forms-item required label="二维码金额">
|
|
<JeepayRadioPopupView v-model:value="qrcInfo.fixedFlag" :list="moneyTye">
|
|
<template #view="{ record }">
|
|
<view class="selected-sex" style="color: #000">
|
|
{{ record.label }}
|
|
<image src="/pageDevice/static/devIconImg/icon-arrow-sex.svg" mode="scaleToFill" />
|
|
</view>
|
|
</template>
|
|
</JeepayRadioPopupView>
|
|
</uni-forms-item>
|
|
<uni-forms-item required label="自定义金额" name="fixedPayAmount" v-if="qrcInfo.fixedFlag == 1">
|
|
<view class="amount-input">￥ <uni-easyinput :inputBorder="false" type="digit" v-model="qrcInfo.fixedPayAmount" /></view>
|
|
</uni-forms-item>
|
|
<view class="code-line"></view>
|
|
<uni-forms-item required label="绑定门店" name="storeId">
|
|
<template #label>
|
|
<view class="f-label">绑定门店</view>
|
|
</template>
|
|
<JeepayBizsPopupView :hasTitle="false" bizType="store" v-model:value="qrcInfo.storeId" :showName="qrcInfo.storeName" />
|
|
</uni-forms-item>
|
|
|
|
<view class="code-line"></view>
|
|
<!-- <uni-forms-item required label="绑定应用" name="appId">
|
|
<template #label>
|
|
<view class="f-label">绑定应用</view>
|
|
</template>
|
|
<JeepayBizsPopupView :hasTitle="false" bizType="mchApp" v-model:value="qrcInfo.appId" :showName="qrcInfo.appName" />
|
|
</uni-forms-item> -->
|
|
</uni-forms>
|
|
<view class="code-line"></view>
|
|
<JSwitchCard title="状态" tips="状态禁用后，该立牌将不可使用">
|
|
<template #right>
|
|
<JSwitch :bol="qrcInfo.qrcState == 1" :confirmTips="false" @confirm="(val) => (qrcInfo.qrcState = val ? 1 : 0)" />
|
|
</template>
|
|
</JSwitchCard>
|
|
<!-- <JSwitchCard title="支付宝支付方式" tips="支付宝支付方式">
|
|
<template #right>
|
|
<JeepayRadioPopupView v-model:value="qrcInfo.alipayWayCode" :list="aliTypeList">
|
|
<template #view="{ record }">
|
|
<view class="pay-type"> {{ record.label }}<image src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" /> </view>
|
|
</template>
|
|
</JeepayRadioPopupView>
|
|
</template>
|
|
</JSwitchCard> -->
|
|
<JSwitchCard title="页面类型" tips="谨慎选择，确认后不可变更" borderWidth="100vw" v-if="!qrcInfo.createdAt">
|
|
<template #right>
|
|
<JeepayRadioPopupView v-model:value="qrcInfo.entryPage" :list="pageTypeList">
|
|
<template #view="{ record }">
|
|
<view class="pay-type">{{ record.label }} <image src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" /> </view>
|
|
</template>
|
|
</JeepayRadioPopupView>
|
|
</template>
|
|
</JSwitchCard>
|
|
<view class="confirm-wrapper">
|
|
<Button @tap="submitBindCodeData">{{ qrcInfo.createdAt ? '保存修改' : '确认绑定' }}</Button>
|
|
</view>
|
|
</view>
|
|
|
|
<JSinglePopup :list="pageTypeList" ref="refPageType" confirm="selectedPageType" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { reqLoad, API_URL_SYS_CODE_LIST, $bindEmptyQR, $parseQrCodeUrl } from '@/http/apiManager.js'
|
|
import formUtil from '@/commons/utils/formUtil.js'
|
|
import infoBox from '@/commons/utils/infoBox.js'
|
|
import emit from '@/commons/utils/emit.js'
|
|
import go from '@/commons/utils/go.js'
|
|
import cal from '@/commons/utils/cal.js'
|
|
onLoad((options) => {
|
|
if (options.codeId) {
|
|
return getDetails(options.codeId)
|
|
}
|
|
if (options.qrcId) return (qrcInfo.qrcId = options.qrcId)
|
|
})
|
|
const qrcInfo = reactive({
|
|
qrcId: '',
|
|
qrcState: 1,
|
|
entryPage: 'default',
|
|
alipayWayCode: 'ALI_JSAPI',
|
|
fixedFlag: 0,
|
|
})
|
|
|
|
// 表单实例
|
|
const qrcForm = ref(null)
|
|
// 选择页面类型
|
|
const refPageType = ref(null)
|
|
// 页面类型
|
|
const pageTypeList = [
|
|
{ label: '未指定', value: 'default' },
|
|
{ label: '仅H5网页', value: 'h5' },
|
|
{ label: '仅小程序', value: 'lite' },
|
|
]
|
|
// 支付宝支付方式
|
|
const aliTypeList = [
|
|
{ label: 'ALI_JSAPI', value: 'ALI_JSAPI' },
|
|
{ label: 'ALI_WAP', value: 'ALI_WAP' },
|
|
]
|
|
// 是否固定金额
|
|
const moneyTye = [
|
|
{ label: '固定金额', value: 1 },
|
|
{ label: '任意金额', value: 0 },
|
|
]
|
|
|
|
const rules = {
|
|
qrcAlias: {
|
|
rules: [formUtil.rules.requiredInput('')],
|
|
},
|
|
qrcId: {
|
|
rules: [formUtil.rules.requiredInput('')],
|
|
},
|
|
fixedPayAmount: {
|
|
rules: [formUtil.rules.requiredInput('')],
|
|
},
|
|
storeId: {
|
|
rules: [formUtil.rules.requiredSelect('门店')],
|
|
},
|
|
appId: {
|
|
rules: [formUtil.rules.requiredSelect('应用')],
|
|
},
|
|
}
|
|
const scanCode = () => {
|
|
uni.scanCode({
|
|
success: ({ result }) => {
|
|
$parseQrCodeUrl(result).then(({ bizData }) => {
|
|
qrcInfo.qrcId = bizData
|
|
})
|
|
},
|
|
fail: (err) => {
|
|
infoBox.showErrorToast('扫码失败')
|
|
},
|
|
})
|
|
}
|
|
const REG_AMOUNT = /^([0-9]{1}|^[1-9]{1}\d{1,15})(\.\d{1,2})?$/
|
|
// 提交绑定立牌数据
|
|
const submitBindCodeData = () => {
|
|
qrcForm.value.validate().then((res) => {
|
|
if (qrcInfo.fixedFlag == 1 && !REG_AMOUNT.test(qrcInfo.fixedPayAmount)) {
|
|
return infoBox.showToast('请输入正数 保留两位小数')
|
|
}
|
|
if (qrcInfo.createdAt) return saveQrcInfo()
|
|
$bindEmptyQR(qrcInfo).then((res) => {
|
|
infoBox.showSuccessToast('绑定成功')
|
|
go.back(1, emit.ENAME_REF_TERMINAL_LIST)
|
|
})
|
|
})
|
|
}
|
|
// 保存修改后的数据
|
|
const saveQrcInfo = () => {
|
|
reqLoad.addOrUpdate(qrcInfo.qrcId, API_URL_SYS_CODE_LIST, qrcInfo).then((res) => {
|
|
emit.pageEmit(emit.ENAME_REF_TERMINAL_LIST)
|
|
go.back(1, emit.ENAME_REF_QRC_DETAIL)
|
|
})
|
|
}
|
|
const getDetails = (id) => {
|
|
reqLoad.getById(API_URL_SYS_CODE_LIST, id).then(({ bizData }) => {
|
|
bizData.fixedPayAmount = cal.cert2Dollar(bizData.fixedPayAmount)
|
|
Object.assign(qrcInfo, bizData)
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
input {
|
|
font-size: 32rpx;
|
|
}
|
|
.selected-sex {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
color: #b3b3b3;
|
|
image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
}
|
|
.confirm-wrapper {
|
|
padding: 50rpx 30rpx;
|
|
.confirm-button {
|
|
height: 110rpx;
|
|
color: #fff;
|
|
border-radius: 20rpx;
|
|
background: $jeepay-bg-primary;
|
|
}
|
|
}
|
|
.pay-type {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #000;
|
|
transform: translateX(40rpx);
|
|
image {
|
|
width: 108rpx;
|
|
height: 42rpx;
|
|
}
|
|
}
|
|
.scan-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
input {
|
|
flex: 1;
|
|
}
|
|
image {
|
|
width: 80rpx;
|
|
height: 120rpx;
|
|
}
|
|
}
|
|
.code-line {
|
|
height: 20rpx;
|
|
background-color: $v-color-bgrey;
|
|
}
|
|
.amount-input {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|