同步代码
This commit is contained in:
GaoHao
300
pageDevice/terminal/edit.vue
Normal file
300
pageDevice/terminal/edit.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<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>
|
||||
64
pageDevice/terminal/index.vue
Normal file
64
pageDevice/terminal/index.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
|
||||
<CommonPageByDevice
|
||||
ref="commonPageByDeviceRef"
|
||||
navTitle="辅助终端管理"
|
||||
searchTitle="搜索辅助终端名称"
|
||||
searchType="storeTerminal"
|
||||
:bottomBtnTitle="ak.ent.has('ENT_TERMINAL_ADD') ? '绑定设备' : null "
|
||||
@bottomBtnClickFunc="bottomBtnClickFunc"
|
||||
:reqTableDataFunc="reqTableDataFunc"
|
||||
>
|
||||
</CommonPageByDevice>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { onReachBottom, onUnload } from '@dcloudio/uni-app'
|
||||
import emit from '@/commons/utils/emit.js'
|
||||
import CommonPageByDevice from '../commons/CommonPageByDevice.vue'
|
||||
import { reqLoad, API_URL_SYS_TERMINALS } from '@/http/apiManager.js'
|
||||
import go from '@/commons/utils/go.js'
|
||||
import DeviceCommonsRender from '@/pages/list/render/DeviceCommonsRender.vue'
|
||||
import ak from '@/commons/utils/ak.js'
|
||||
|
||||
const commonPageByDeviceRef = ref()
|
||||
|
||||
// 监听 更新事件
|
||||
onUnload( () => uni.$off(emit.ENAME_REF_TERMINAL_LIST) )
|
||||
uni.$on(emit.ENAME_REF_TERMINAL_LIST, function(data){
|
||||
commonPageByDeviceRef.value.refTable(true)
|
||||
})
|
||||
|
||||
|
||||
const reqTableDataFunc = (params) => {
|
||||
return reqLoad.list(API_URL_SYS_TERMINALS, params)
|
||||
}
|
||||
|
||||
function bottomBtnClickFunc(){
|
||||
go.to('PAGES_APP_TERMINAL_CREATETERM')
|
||||
}
|
||||
|
||||
|
||||
const codeBind = reactive([
|
||||
{
|
||||
label: '扫码绑定',
|
||||
value: 'scanCode',
|
||||
},
|
||||
{
|
||||
label: '手动绑定',
|
||||
value: 'handBind',
|
||||
fun: () => {
|
||||
go.to('/pageDevice/hornManage/bindHorn')
|
||||
},
|
||||
},
|
||||
])
|
||||
const bindPopup = ref(null)
|
||||
|
||||
|
||||
onReachBottom(() => {})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
162
pageDevice/terminal/view.vue
Normal file
162
pageDevice/terminal/view.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<JeepayBackground :bgColorStyle="{}">
|
||||
<JeepayCustomNavbar textColor="#fff" bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)" title="辅助终端详情" backCtrl="back" />
|
||||
|
||||
<JeepayTableListItem viewClass="list-item-by-detail"
|
||||
logo="/pageDevice/static/detailsLislImg/term-white.svg"
|
||||
:title="vdata.record.trmName" :subtitle="vdata.record.trmNo" :moreBtnList="list" />
|
||||
|
||||
<JeepayCard editText="编辑信息" @editTap="go.to('PAGES_APP_TERMINAL_CREATETERM', {trmId: vdata.record.trmId})">
|
||||
|
||||
<JeepayDescview>
|
||||
<JeepayDescviewItem title="设备名称" :desc="vdata.record.trmName" />
|
||||
<JeepayDescviewItem title="绑定应用" :desc="vdata.record.appId" />
|
||||
<JeepayDescviewItem title="绑定门店" :desc="vdata.record.storeName" />
|
||||
<JeepayDescviewItem title="布放位置" :desc="vdata.record.detailAddress" />
|
||||
</JeepayDescview>
|
||||
|
||||
</JeepayCard>
|
||||
|
||||
<JeepayCard title="其他设置" viewStyle="margin-top: 30rpx;">
|
||||
|
||||
<JeepayTableListItem title="终端状态" subtitle="状态禁用后，当前终端将无法使用">
|
||||
<template #titleRight>
|
||||
<JeepayStateSwitch v-model:state="vdata.record.state" :showSwitchType="true" :updateStateFunc="updateState" />
|
||||
</template>
|
||||
</JeepayTableListItem>
|
||||
|
||||
<JeepayTableListItem title="门店默认设备" subtitle="设为门店默认辅助终端设备后, 该门店将默认使用该设备下单">
|
||||
<template #titleRight>
|
||||
<JeepayStateSwitch v-model:state="vdata.record.defaultFlag" :showSwitchType="vdata.record.defaultFlag == 0" :updateStateFunc="updateDefault" />
|
||||
</template>
|
||||
</JeepayTableListItem>
|
||||
|
||||
</JeepayCard>
|
||||
|
||||
|
||||
<JeepayCard v-if="ak.ent.has('ENT_TERMINAL_SENDUP')" title="报备管理" viewStyle="margin-top: 30rpx;">
|
||||
|
||||
<template v-for="(item) in vdata.channelList">
|
||||
<JeepayTableListItem :logo="item.icon" :logoStyle="{'background': item.bgColor, 'border-radius': '50rpx'}" :title="item.ifName" :subtitle="item.ifCode">
|
||||
|
||||
<template #subtitle>
|
||||
<template v-if="item.channelBindInfo.state == 2 && item.channelBindInfo.errInfo">
|
||||
<text style="color: red;">{{item.channelBindInfo.errInfo}}</text>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template #titleRight>
|
||||
|
||||
<template v-if="item.channelBindInfo.state == 0" >
|
||||
<text class="state-dot state-dot-disable"></text> <text @tap="terminalChannelBindSendFunc(item.ifCode)">未报备</text>
|
||||
</template>
|
||||
|
||||
<template v-if="item.channelBindInfo.state == 1">
|
||||
<text class="state-dot state-dot-enable"></text> <text >报备成功</text>
|
||||
</template>
|
||||
|
||||
<template v-if="item.channelBindInfo.state == 2">
|
||||
<view class="state-dot state-dot-error"></view> <text @tap="terminalChannelBindSendFunc(item.ifCode)">报备失败</text>
|
||||
</template>
|
||||
</template>
|
||||
</JeepayTableListItem>
|
||||
</template>
|
||||
|
||||
</JeepayCard>
|
||||
|
||||
</JeepayBackground>
|
||||
|
||||
<JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import { reqLoad, API_URL_SYS_TERMINALS, $updateTrmDefault, $terminalChannelBindList, $terminalChannelBindSend } from '@/http/apiManager.js'
|
||||
import go from '@/commons/utils/go.js'
|
||||
import emit from '@/commons/utils/emit.js'
|
||||
import infoBox from '@/commons/utils/infoBox.js'
|
||||
import ak from '@/commons/utils/ak.js'
|
||||
|
||||
const jeepayPopupConfirmRef = ref()
|
||||
|
||||
onLoad((options) => {
|
||||
refData(options.trmId)
|
||||
})
|
||||
|
||||
const vdata = reactive({
|
||||
record: {},
|
||||
|
||||
channelList: [], //渠道列表
|
||||
})
|
||||
|
||||
|
||||
// 监听 更新事件
|
||||
onUnload(() => uni.$off(emit.ENAME_REF_TERMINAL_DETAIL))
|
||||
uni.$on(emit.ENAME_REF_TERMINAL_DETAIL, function(data){
|
||||
refData(vdata.record.trmId)
|
||||
})
|
||||
|
||||
function refData(id){
|
||||
|
||||
reqLoad.getById(API_URL_SYS_TERMINALS, id).then(({ bizData }) => {
|
||||
vdata.record = bizData
|
||||
})
|
||||
|
||||
|
||||
if(ak.ent.has('ENT_TERMINAL_SENDUP')){
|
||||
// 查询渠道报备列表
|
||||
$terminalChannelBindList(id).then(({bizData}) => {
|
||||
vdata.channelList = bizData
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function deleteFunc () {
|
||||
jeepayPopupConfirmRef.value.open('您确认删除终端吗？').then(() => {
|
||||
reqLoad.delById(API_URL_SYS_TERMINALS, vdata.record.trmId).then(() => {
|
||||
infoBox.showSuccessToast('删除成功')
|
||||
return go.back(1, emit.ENAME_REF_TERMINAL_LIST)
|
||||
})
|
||||
})
|
||||
}
|
||||
const list = reactive([
|
||||
{ label: '删除终端', value: 'delete', color: 'red', fun: deleteFunc },
|
||||
])
|
||||
|
||||
// 更新状态
|
||||
function updateState(state) {
|
||||
return reqLoad.updateById(API_URL_SYS_TERMINALS, vdata.record.trmId, { state: state }).then(() => {
|
||||
emit.refPageAndSearchEmit(emit.ENAME_REF_TERMINAL_LIST) // 修改列表页面。
|
||||
infoBox.showSuccessToast('修改成功')
|
||||
})
|
||||
}
|
||||
|
||||
// 更新状态
|
||||
function updateDefault(defaultFlag) {
|
||||
|
||||
return $updateTrmDefault(vdata.record.trmId, defaultFlag).then(() => {
|
||||
emit.refPageAndSearchEmit(emit.ENAME_REF_TERMINAL_LIST) // 修改列表页面。
|
||||
infoBox.showSuccessToast('修改成功')
|
||||
})
|
||||
}
|
||||
|
||||
function terminalChannelBindSendFunc(ifCode){
|
||||
$terminalChannelBindSend(vdata.record.trmId, ifCode).then(() => {
|
||||
infoBox.showToast('操作完成').then(() => {
|
||||
refData(vdata.record.trmId)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.default-image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user