first
This commit is contained in:
160
pageDevice/lite/view.vue
Normal file
160
pageDevice/lite/view.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<JeepayBackground :bgColorStyle="{}">
|
||||
<JeepayCustomNavbar textColor="#fff"
|
||||
bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)" title="如意Lite详情"
|
||||
backCtrl="back" />
|
||||
|
||||
<JeepayTableListItem viewClass="list-item-by-detail" logo="/pageDevice/static/detailsLislImg/lite-white.svg"
|
||||
:title="vdata.record.deviceName" :subtitle="vdata.record.deviceNo" :moreBtnList="list" />
|
||||
<JeepayCard editText="编辑信息" @editTap="go.to('PAGES_LITE_EDIT', { deviceId: vdata.record.deviceId })">
|
||||
<JeepayDescview>
|
||||
<JeepayDescviewItem title="设备名称" :desc="vdata.record.deviceName" />
|
||||
<JeepayDescviewItem title="绑定应用" :desc="vdata.record.appId" />
|
||||
<JeepayDescviewItem title="绑定门店" :desc="vdata.record.storeName" />
|
||||
</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>
|
||||
</JeepayCard>
|
||||
<JeepayCard :title="`${!vdata.record.alipayBindState ? '' : '已'}绑定至蚂蚁店铺`" @clickTitle="bindingAlitStore"
|
||||
viewStyle="margin-top: 30rpx;" :isTitleBorder="vdata.record.alipayBindState">
|
||||
<template #titleRight>
|
||||
<image class="selected-qrcId" src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill"
|
||||
v-if="!vdata.record.alipayBindState" />
|
||||
</template>
|
||||
<JeepayTableListItem :title="vdata.aliStoreInfo.storeName" :subtitle="vdata.aliStoreInfo.alipayShopId"
|
||||
v-if="vdata.record.alipayBindState" />
|
||||
|
||||
<view class="un-binding" hover-stay-time="50" hover-class="hover-button" v-if="vdata.record.alipayBindState"
|
||||
@tap="unBindIng">解绑蚂蚁店铺</view>
|
||||
</JeepayCard>
|
||||
</JeepayBackground>
|
||||
|
||||
<JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
|
||||
<JeepayBizinfoSelect ref="refSelectedStore" :params="{alipayShopStatus: 99}" bizType="store" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import { reqLoad, API_URL_SYS_DEVICE_LIST, $deviceUnbind, API_URL_MCH_STORE_LIST, $BindLite } 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'
|
||||
|
||||
const jeepayPopupConfirmRef = ref()
|
||||
|
||||
onLoad((options) => {
|
||||
refData(options.deviceId)
|
||||
})
|
||||
const refSelectedStore = ref(null)
|
||||
const vdata = reactive({
|
||||
record: {},
|
||||
aliStoreInfo: {}
|
||||
})
|
||||
|
||||
// 监听 更新事件
|
||||
onUnload(() => uni.$off(emit.ENAME_REF_AUTOPOS_DETAIL))
|
||||
uni.$on(emit.ENAME_REF_AUTOPOS_DETAIL, function (data) {
|
||||
refData(vdata.record.deviceId)
|
||||
})
|
||||
|
||||
function refData (id) {
|
||||
reqLoad.getById(API_URL_SYS_DEVICE_LIST, id).then(({ bizData }) => {
|
||||
vdata.record = bizData
|
||||
getAliStoreInfo()
|
||||
})
|
||||
}
|
||||
function deleteFunc () {
|
||||
jeepayPopupConfirmRef.value.open('您确认解绑设备吗？', { confirmColor: '#FF5B4C' }).then(() => {
|
||||
$deviceUnbind(vdata.record.deviceId).then(() => {
|
||||
infoBox.showSuccessToast('解绑成功')
|
||||
return go.back(1, emit.ENAME_REF_AUTOPOS_LIST)
|
||||
})
|
||||
})
|
||||
}
|
||||
const list = reactive([
|
||||
{ label: '解绑设备', value: 'delete', color: 'red', fun: deleteFunc },
|
||||
{ label: '编辑设备', value: 'edit', fun: ()=>{
|
||||
go.to('PAGES_LITE_EDIT', { deviceId: vdata.record.deviceId })
|
||||
} },
|
||||
])
|
||||
// 更新状态
|
||||
function updateState (state) {
|
||||
return reqLoad.updateById(API_URL_SYS_DEVICE_LIST, vdata.record.deviceId, { state: state }).then(() => {
|
||||
emit.refPageAndSearchEmit(emit.ENAME_REF_AUTOPOS_LIST) // 修改列表页面。
|
||||
infoBox.showSuccessToast('修改成功')
|
||||
})
|
||||
}
|
||||
// 绑定蚂蚁门店
|
||||
const bindingAlitStore = () => {
|
||||
refSelectedStore.value.open().then(res => {
|
||||
const data = {
|
||||
alipayBindState: 1,
|
||||
deviceId: vdata.record.deviceId,
|
||||
storeId: res.storeId,
|
||||
}
|
||||
jeepayPopupConfirmRef.value.open(`您确认要把[${res.storeName}]绑定至蚂蚁店铺吗？`).then(r => {
|
||||
$BindLite(data).then(res => {
|
||||
infoBox.showSuccessToast('蚂蚁店铺绑定成功')
|
||||
refData(vdata.record.deviceId)
|
||||
})
|
||||
}).catch(er=>{
|
||||
bindingAlitStore()
|
||||
})
|
||||
})
|
||||
}
|
||||
// 获取蚂蚁店铺信息
|
||||
const getAliStoreInfo = () => {
|
||||
reqLoad.list(API_URL_MCH_STORE_LIST, { pageSize: '-1', alipayShopStatus: 99 }).then(({ bizData }) => {
|
||||
vdata.aliStoreInfo = bizData.records.find(v => v.storeId == vdata.record.storeId)
|
||||
})
|
||||
}
|
||||
// 解绑店铺
|
||||
const unBindIng = () => {
|
||||
const data = {
|
||||
alipayBindState: 0,
|
||||
deviceId: vdata.record.deviceId,
|
||||
storeId: vdata.record.storeId,
|
||||
}
|
||||
jeepayPopupConfirmRef.value.open('您确认要解绑蚂蚁店铺吗？', { confirmColor: '#FF5B4C' }).then(res => {
|
||||
$BindLite(data).then(res => {
|
||||
infoBox.showSuccessToast('蚂蚁店铺解绑成功')
|
||||
refData(vdata.record.deviceId)
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.default-image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.selected-qrcId {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.un-binding {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 15px;
|
||||
margin-top: 0;
|
||||
height: 110rpx;
|
||||
background-color: rgba($color: #ec4444, $alpha: 0.1);
|
||||
color: #ec4444;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.hover-button {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user