301 lines
7.8 KiB
Vue
301 lines
7.8 KiB
Vue
<template>
|
|
<view class="page-wrapper jeepay-edit-form">
|
|
|
|
<JeepayCustomNavbar :title=" vdata.isAdd? '添加新辅助终端' : '修改辅助终端'" backCtrl="back" />
|
|
|
|
<uni-forms ref="formRef" :rules="rules" :model="vdata.formData" :label-width="120">
|
|
|
|
<uni-forms-item v-if="vdata.isAdd" required label="选择应用" name="appId">
|
|
<JeepayBizsPopupView :hasTitle="false" bizType="mchApp" v-model:value="vdata.formData.appId" :showName="vdata.bindAppName" />
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item v-if="vdata.isAdd" required label="选择门店" name="storeId">
|
|
<JeepayBizsPopupView :hasTitle="false" bizType="store" v-model:value="vdata.formData.storeId" :showName="vdata.bindStoreName" />
|
|
</uni-forms-item>
|
|
|
|
<template v-if="isSelectedStoreAndMchApp()" >
|
|
|
|
<uni-forms-item v-if="vdata.isAdd" required label="设备类型" name="trmType">
|
|
<JeepayRadioPopupView label="请选择设备类型" v-model:value="vdata.formData.trmType" :list="[{ label: '辅助终端', value: 1}, { label: '扫码POS', value: 2}]" @change="changeTrmTypeFunc">
|
|
</JeepayRadioPopupView>
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item required label="设备名称" name="trmName">
|
|
<uni-easyinput v-model="vdata.formData.trmName" placeholder="请输入设备名称" :inputBorder="false"></uni-easyinput>
|
|
</uni-forms-item>
|
|
|
|
|
|
<uni-forms-item required label="设备编号" name="trmNo">
|
|
<uni-easyinput v-model="vdata.formData.trmNo" placeholder="请输入设备编号" :inputBorder="false"></uni-easyinput>
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item required label="布放位置" name="detailAddress">
|
|
<view class="selected-sex align-top" style="align-items: flex-start" @tap="showMap">
|
|
{{ vdata.formData.detailAddress || '选择地址后自动回显' }}
|
|
<image src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" />
|
|
</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item required label="省市区/县" name="areaCode">
|
|
<JeepayAreacodeSelect ref="jeepayAreacodeSelect" v-model:areacodeList="vdata.formData.areaCode" />
|
|
</uni-forms-item>
|
|
<uni-forms-item required label="经纬度" name="lngAndLat" class="line">
|
|
<view class="selected-sex"> {{ vdata.formData.lng }}/{{ vdata.formData.lat }} </view>
|
|
</uni-forms-item>
|
|
|
|
<JeepayTableListItem title="状态" subtitle="状态禁用后, 设备将无法使用">
|
|
<template #titleRight>
|
|
<JeepayStateSwitch v-model:state="vdata.formData.state" :showSwitchType="true" :confirm='false' />
|
|
</template>
|
|
</JeepayTableListItem>
|
|
|
|
</template>
|
|
|
|
</uni-forms>
|
|
<view class="confirm-wrapper">
|
|
<Button @tap="confirmFunc">{{ vdata.trmId ? '确认修改' : '确认创建' }}</Button>
|
|
</view>
|
|
|
|
<!-- 扫码pos选择 -->
|
|
<JeepayPopupListSelect
|
|
ref="jeepayPopupListSelectByScanPos"
|
|
:reqTableDataFunc="reqTableDataByScanPosFunc"
|
|
searchInputName="deviceName"
|
|
:fields="{ key: 'deviceId', left: 'deviceName', right: 'deviceNo' }"
|
|
/>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { $location2areacode, reqLoad, API_URL_MCH_STORE_LIST, API_URL_SYS_TERMINALS, API_URL_SYS_DEVICE_LIST } 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 emit from '@/commons/utils/emit.js'
|
|
|
|
const jeepayAreacodeSelect = ref()
|
|
const formRef = ref()
|
|
|
|
const jeepayPopupListSelectByScanPos = ref() // 扫码pos列表
|
|
|
|
onLoad((options) => {
|
|
|
|
// test()
|
|
|
|
// 修改页面
|
|
if(options.trmId){
|
|
vdata.isAdd = false
|
|
vdata.trmId = options.trmId
|
|
reqLoad.getById(API_URL_SYS_TERMINALS, vdata.trmId).then(({bizData}) => {
|
|
vdata.formData = bizData
|
|
vdata.formData.areaCode = JSON.parse(bizData.areacode)
|
|
})
|
|
}
|
|
|
|
})
|
|
|
|
|
|
const rules = {
|
|
appId: {
|
|
rules:[ formUtil.rules.requiredSelect('应用') ],
|
|
},
|
|
storeId: {
|
|
rules:[ formUtil.rules.requiredSelect('门店') ],
|
|
},
|
|
trmNo: {
|
|
rules:[ formUtil.rules.requiredInput('') ],
|
|
},
|
|
trmName: {
|
|
rules:[ formUtil.rules.requiredInput('') ],
|
|
},
|
|
trmType: {
|
|
rules:[ formUtil.rules.requiredSelect('设备类型') ],
|
|
},
|
|
detailAddress: {
|
|
rules:[ formUtil.rules.requiredSelect('地址') ],
|
|
}
|
|
}
|
|
|
|
|
|
const vdata = reactive({
|
|
|
|
trmId: null, // 新建 or 修改
|
|
|
|
isAdd: true, // 是否新增页面
|
|
|
|
// 表单数据
|
|
formData: {
|
|
state: 1 // 默认启用
|
|
},
|
|
|
|
bindAppName: '', // 为了组件的回显使用
|
|
bindStoreName: '',
|
|
|
|
|
|
})
|
|
|
|
// 选择地图
|
|
function showMap(){
|
|
|
|
// return testMap()
|
|
|
|
// 打开地图 && 获取省市县
|
|
uni.chooseLocation().then((res) => {
|
|
|
|
vdata.formData.lng = res.longitude
|
|
vdata.formData.lat = res.latitude
|
|
vdata.formData.detailAddress = res.name
|
|
|
|
// 经纬度 --》 获取到省市县编码
|
|
$location2areacode(res.longitude + "," + res.latitude).then(( {bizData} ) => {
|
|
if(bizData && bizData.areacode){
|
|
jeepayAreacodeSelect.value.resetBySingleAreacode(bizData.areacode)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
|
|
function test(){
|
|
vdata.formData.storeId = 1006
|
|
vdata.formData.appId= '6247b241e4b016d586ee28c4'
|
|
vdata.formData.trmType = 1
|
|
vdata.formData.trmNo = '123'
|
|
vdata.formData.trmName = '123东方闪电'
|
|
}
|
|
function testMap(){
|
|
vdata.formData.lng = '116.099'
|
|
vdata.formData.lat = '39.84548'
|
|
vdata.formData.detailAddress = '北京市ccc测试地址'
|
|
// 经纬度 --》 获取到省市县编码
|
|
$location2areacode(vdata.formData.lng + "," + vdata.formData.lat).then(( {bizData} ) => {
|
|
if(bizData && bizData.areacode){
|
|
jeepayAreacodeSelect.value.resetBySingleAreacode(bizData.areacode)
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
function confirmFunc(){
|
|
|
|
formUtil.validate(formRef.value).then(() => {
|
|
|
|
let reqData = Object.assign({}, vdata.formData)
|
|
delete reqData.areaCode
|
|
reqData.areacode = JSON.stringify(vdata.formData.areaCode)
|
|
reqData.areacodeNames = JSON.stringify(jeepayAreacodeSelect.value.getNameListBySingleAreacode(vdata.formData.areaCode[2]))
|
|
|
|
return reqLoad.addOrUpdate(vdata.trmId, API_URL_SYS_TERMINALS, reqData)
|
|
})
|
|
.then(( {bizData} ) => {
|
|
emit.pageEmit(emit.ENAME_REF_TERMINAL_LIST) // 更新列表
|
|
go.back(1, emit.ENAME_REF_TERMINAL_DETAIL) // 返回详情 && 更新详情 && search
|
|
})
|
|
|
|
}
|
|
|
|
// 切换设备类型的函数
|
|
function changeTrmTypeFunc(){
|
|
|
|
// 扫码pos , 选择一个
|
|
if(vdata.formData.trmType == 2){
|
|
|
|
jeepayPopupListSelectByScanPos.value.open().then((v) => {
|
|
if(v){
|
|
vdata.formData.trmNo = v.deviceNo
|
|
vdata.formData.trmName = v.deviceName
|
|
jeepayPopupListSelectByScanPos.value.close()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 是否选中了门店和设备
|
|
function isSelectedStoreAndMchApp(){
|
|
return ( vdata.formData.appId && vdata.formData.storeId )
|
|
}
|
|
|
|
|
|
function reqTableDataByScanPosFunc(params){
|
|
|
|
params.appId = vdata.formData.appId
|
|
params.storeId = vdata.formData.storeId
|
|
params.deviceType = 3 // 扫码pos
|
|
|
|
return reqLoad.list(API_URL_SYS_DEVICE_LIST, params)
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</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 {
|
|
flex-shrink: 0;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
}
|
|
.line {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.confirm-wrapper {
|
|
padding: 50rpx 30rpx;
|
|
.confirm-button {
|
|
height: 110rpx;
|
|
color: #fff;
|
|
border-radius: 20rpx;
|
|
background: $jeepay-bg-primary;
|
|
}
|
|
}
|
|
.align-top {
|
|
align-items: flex-start;
|
|
padding: 40rpx 0;
|
|
height: auto;
|
|
min-height: auto;
|
|
image {
|
|
width: 120rpx;
|
|
height: 40rpx;
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
.border-tb {
|
|
position: relative;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
width: 90vw;
|
|
height: 1rpx;
|
|
background-color: #ededed;
|
|
}
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
width: 90vw;
|
|
height: 1rpx;
|
|
background-color: #ededed;
|
|
}
|
|
}
|
|
</style>
|