This commit is contained in:
2024-09-10 10:49:08 +08:00
parent b5fd06b800
commit dd4f5938da
6391 changed files with 722800 additions and 0 deletions

View File

@@ -0,0 +1,53 @@
<template>
<view class="h-wrapper">
<image style="width: 90rpx; height: 90rpx" src="/static/devIconImg/icon-code.svg" mode="scaleToFill" />
<view class="h-info">
<view class="h-title">{{ title }}</view>
<view class="h-code">{{ subTitle }}</view>
</view>
</view>
</template>
<script setup>
import { reactive } from 'vue'
const props = defineProps({
title: { type: String }, //标题
subTitle: { type: String }, //副标题
flag: { type: Boolean }, //状态,
})
</script>
<style lang="scss" scoped>
.h-wrapper {
display: flex;
align-items: center;
padding-left: 40rpx;
height: 170rpx;
.h-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 15rpx;
margin-left: 20rpx;
.h-title {
display: flex;
justify-content: space-between;
align-items: center;
.state {
margin-right: 30rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
}
margin-bottom: 16rpx;
font-size: 30rpx;
}
.h-code {
font-size: 26rpx;
color: #999;
}
}
}
</style>

View File

@@ -0,0 +1,165 @@
<template>
<uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" :safe-area="false">
<view class="card-wrapper">
<view class="card-title flex-center">请勾选播报的码牌</view>
<!-- 循环部分 start -->
<JeepayTableList ref="refQrcTable" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData" :initData="false">
<template #tableBody="{ record }">
<view class="h-wrapper" :style="{ opacity: vdata.qrcList.includes(record.qrcId) ? 1 : 0.6 }">
<image style="width: 90rpx; height: 90rpx" :src="vdata.imageList[record.qrcState]" mode="scaleToFill" />
<view class="h-info">
<view class="h-title">{{ record.qrcAlias }}</view>
<view class="h-code">{{ record.qrcId }}</view>
</view>
<JSwitch
:bol="vdata.qrcList.includes(record.qrcId)"
:confirmTips="false"
@confirm="change($event, record.qrcId)"
:disabled="vdata.bindQrcId == record.qrcId"
@click="isDefaultQrc(record.qrcId)"
/>
</view>
</template>
</JeepayTableList>
<!-- 循环部分end -->
<view class="footer-wrapper">
<view class="footer-main">
<view class="footer-button">
<view class="flex-center" hover-class="touch-button" @tap="popup.close()">取消</view>
<view class="confirm flex-center" hover-class="touch-button" @tap="saveQrcId">确认</view>
</view>
</view>
</view>
</view>
</uni-popup>
</template>
<script setup>
import { nextTick, reactive, ref } from 'vue'
const popup = ref(null)
import { reqLoad, API_URL_SYS_CODE_LIST, API_URL_SYS_DEVICE_LIST } from '@/http/apiManager.js'
import infoBox from '@/commons/utils/infoBox.js'
const refQrcTable = ref(null)
const emits = defineEmits(['updateDetails'])
const vdata = reactive({
searchData: {},
imageList: ['/pageDevice/static/detailsLislImg/code-none.svg', '/pageDevice/static/devIconImg/icon-code.svg'],
})
const open = (storeId, qrcList, deviceId, bindQrcId) => {
vdata.qrcList = JSON.parse(JSON.stringify(qrcList))
vdata.deviceId = deviceId
vdata.bindQrcId = bindQrcId
vdata.searchData = {
qrcBelongType: 2,
storeId,
}
popup.value.open()
nextTick(() => {
refQrcTable.value.refTable(true)
})
}
const reqTableDataFunc = (params) => {
return reqLoad.list(API_URL_SYS_CODE_LIST, params)
}
const change = (e, qrcId) => {
if (e) {
vdata.qrcList.push(qrcId)
} else {
vdata.qrcList.splice(
vdata.qrcList.findIndex((val) => val == qrcId),
1
)
}
}
const isDefaultQrc = (qrcId) => {
if (vdata.bindQrcId == qrcId) return infoBox.showToast('平台指定默认码牌不可更改状态')
}
// 保存
const saveQrcId = () => {
return reqLoad.addOrUpdate(vdata.deviceId, API_URL_SYS_DEVICE_LIST, { qrcIdList: vdata.qrcList, bindType: 1 }).then((res) => {
emits('updateDetails')
popup.value.close()
})
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.card-wrapper {
border-radius: 32rpx 32rpx 0 0;
background-color: #fff;
padding-bottom: 60rpx;
max-height: 70vh;
overflow-y: auto;
.card-title {
margin-bottom: 20rpx;
height: 110rpx;
font-size: 30rpx;
font-weight: 400;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.07);
}
.footer-wrapper {
height: 186rpx;
.footer-main {
position: fixed;
left: 0;
right: 0;
bottom: env(safe-area-inset-bottom);
backdrop-filter: blur(20rpx);
border-top: 1rpx solid #ededed;
.footer-button {
padding: 0 30rpx;
margin-top: 30rpx;
padding-bottom: 30rpx;
display: flex;
justify-content: space-between;
view {
width: 330rpx;
height: 110rpx;
font-size: 33rpx;
font-weight: 500;
color: rgba(0, 0, 0, 0.5);
border-radius: 20rpx;
background-color: #f7f7f7;
}
.confirm {
color: #fff;
background: $jeepay-bg-primary;
}
}
}
}
}
.h-wrapper {
display: flex;
align-items: center;
padding: 0 40rpx;
height: 170rpx;
.h-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 15rpx;
margin-left: 20rpx;
.h-title {
display: flex;
justify-content: space-between;
align-items: center;
.state {
margin-right: 30rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
}
margin-bottom: 16rpx;
font-size: 30rpx;
}
.h-code {
font-size: 26rpx;
color: #999;
}
}
}
</style>

158
pageDevice/speaker/edit.vue Normal file
View File

@@ -0,0 +1,158 @@
<template>
<view class="page-wrapper jeepay-edit-form">
<JeepayCustomNavbar bgDefaultColor="#fff" :title="qrcInfo.deviceId ? '修改云喇叭' : '绑定云喇叭'" backCtrl="back" />
<uni-forms ref="refForm" :rules="rules" :model="qrcInfo" :label-width="120">
<uni-forms-item label="设备号" name="deviceNo" v-if="!qrcInfo.deviceId">
<view class="scan-wrapper">
<uni-easyinput :inputBorder="false" type="text" v-model="qrcInfo.deviceNo" placeholder="请输入设备号" placeholderStyle="color:#B3B3B3" />
<image src="/pageDevice/static/devIconImg/icon-scan-code.svg" mode="scaleToFill" @tap="scanCode" />
</view>
</uni-forms-item>
<uni-forms-item label="设备名称" name="deviceName">
<uni-easyinput :inputBorder="false" type="text" v-model="qrcInfo.deviceName" placeholder="请输入设备名称" />
</uni-forms-item>
<view class="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.bindAppName" />
</uni-forms-item>
<view class="line"></view>
</uni-forms>
<JSwitchCard title="状态" tips="状态禁用后,设备将无法使用" borderWidth="100vw">
<template #right>
<JeepayStateSwitch v-model:state="qrcInfo.state" :showSwitchType="true" :confirm="false" />
</template>
</JSwitchCard>
<view class="confirm-wrapper">
<Button @tap="confirmCreate">{{ qrcInfo.deviceId ? '保存' : '确认绑定' }}</Button>
</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue'
import infoBox from '@/commons/utils/infoBox.js'
import formUtil from '@/commons/utils/formUtil.js'
import emit from '@/commons/utils/emit.js'
import go from '@/commons/utils/go.js'
import { reqLoad, API_URL_SYS_DEVICE_LIST } from '@/http/apiManager.js'
import { onLoad } from '@dcloudio/uni-app'
onLoad((options) => {
console.log(options)
if (options.devId) return getDetails(options.devId)
if (options.deviceNo) return (qrcInfo.deviceNo = options.deviceNo)
})
const qrcInfo = reactive({
state: 1,
bindType: 0,
deviceType: 1,
bindAppName: ''
})
const refForm = ref(null)
const rules = {
deviceNo: {
rules: [formUtil.rules.requiredInput('')],
},
deviceName: {
rules: [formUtil.rules.requiredInput('')],
},
storeId: {
rules: [formUtil.rules.requiredSelect('门店')],
},
}
// 扫码
const scanCode = () => {
uni.scanCode({
success: ({ result }) => {
console.log('result', result)
qrcInfo.deviceNo = result
},
fail: (err) => {
infoBox.showErrorToast('扫码失败')
},
})
}
const confirmCreate = () => {
refForm.value.validate().then((res) => {
reqLoad.addOrUpdate(qrcInfo.deviceId, API_URL_SYS_DEVICE_LIST, qrcInfo).then((res) => {
emit.pageEmit(emit.ENAME_REF_TERMINAL_LIST)
go.back(1, emit.ENAME_REF_SPEAKER_DETAIL)
})
})
}
const getDetails = (devId) => {
reqLoad.getById(API_URL_SYS_DEVICE_LIST, devId).then(({ bizData }) => {
console.log(bizData)
qrcInfo.bindAppName = bizData.storeName
Object.assign(qrcInfo, bizData)
})
}
</script>
<style lang="scss">
input {
font-size: 32rpx;
}
.selected-sex {
display: flex;
justify-content: space-between;
font-size: 32rpx;
color: #b3b3b3;
image {
width: 120rpx;
height: 40rpx;
}
}
.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;
image {
width: 108rpx;
height: 42rpx;
}
}
.scan-wrapper {
display: flex;
align-items: center;
input {
flex: 1;
}
image {
width: 120rpx;
height: 120rpx;
}
}
.store-name {
flex-direction: column;
background-color: #fff;
.name {
width: 392rpx;
color: #000;
}
.store-id {
color: #a1a1a1;
font-size: 30rpx;
}
}
.name-wrapper {
display: flex;
image {
align-self: center;
height: 80rpx;
}
}
</style>

View File

@@ -0,0 +1,67 @@
<template>
<CommonPageByDevice
navTitle="云音响管理"
searchTitle="搜索设备名称、设备编号"
searchType="device"
:searchParams="{ deviceType: 1 }"
:bottomBtnTitle="ak.ent.has('ENT_DEVICE_SPEAKER_ADD') ? '绑定设备' : null "
@bottomBtnClickFunc="bottomBtnClickFunc"
:reqTableDataFunc="reqTableDataFunc"
ref="commonPageByDeviceRef"
>
</CommonPageByDevice>
<JSinglePopup ref="bindPopup" :list="codeBind" />
</template>
<script setup>
import { reactive, ref } from 'vue'
import { onReachBottom, onUnload } from '@dcloudio/uni-app'
import emit from '@/commons/utils/emit.js'
import infoBox from '@/commons/utils/infoBox.js'
import CommonPageByDevice from '../commons/CommonPageByDevice.vue'
import { reqLoad, API_URL_SYS_DEVICE_LIST } 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'
uni.$on(emit.ENAME_REF_SPEAKER_LIST, (data) => {
commonPageByDeviceRef.value.refTable(true)
})
const commonPageByDeviceRef = ref(null)
const reqTableDataFunc = (params) => {
params.deviceType = 1 // 1-云喇叭, 2-云打印, 3-扫码pos, 4-智能pos, 5-收银插件
return reqLoad.list(API_URL_SYS_DEVICE_LIST, params)
}
const bindPopup = ref(null)
function bottomBtnClickFunc() {
bindPopup.value.open()
}
const codeBind = reactive([
{
label: '扫码绑定',
value: 'scanCode',
fun: () => {
uni.scanCode({
success: ({ result }) => {
go.to('PAGES_APP_HORN_BIND', { deviceNo: result })
},
fail: (err) => {
},
})
},
},
{
label: '手动绑定',
value: 'handBind',
fun: () => {
go.to('PAGES_APP_HORN_BIND')
},
},
])
onUnload(() => uni.$off(emit.ENAME_REF_SPEAKER_LIST))
onReachBottom(() => {})
</script>
<style lang="scss" scoped></style>

225
pageDevice/speaker/view.vue Normal file
View File

@@ -0,0 +1,225 @@
<template>
<JeepayBackground :bgColorStyle="{ height: '706rpx' }">
<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/horn-white.svg"
:title="vdata.deviceName"
:subtitle="vdata.deviceNo"
:moreBtnList="list"
/>
<view class="create-time">
<view class="time-title">设备厂商</view>
<view class="dev-info">{{ datamap?.provider(vdata.provider) }}</view>
</view>
<view class="create-time" style="border: none; padding-top: 0">
<view class="time-title">创建时间</view>
<view class="time-info">{{ vdata.createdAt }}</view>
</view>
<JeepayCard editText="编辑信息" @editTap="toEdit">
<JeepayDescview>
<JeepayDescviewItem title="设备编号" :desc="vdata.deviceParams?.deviceNo" />
<JeepayDescviewItem title="设备名称" :desc="vdata.deviceName" />
<JeepayDescviewItem title="绑定门店" :desc="vdata.storeName" />
</JeepayDescview>
</JeepayCard>
<JDetailsSwitch title="设备状态" subTitle="状态禁用后,该设备将无法使用">
<template #titleRight>
<JeepayStateSwitch v-model:state="vdata.state" :showSwitchType="true" :updateStateFunc="confirmSwitch" />
</template>
</JDetailsSwitch>
<view class="store-info">
<JDetailsCell title="播报类型" :info="vdata.bindType == 0 ? '门店所有订单' : '来自受支持码牌的订单'" @tap="refBindType.open(vdata.bindType)" />
</view>
<JeepayCard
viewStyle="margin-top:30rpx"
title="受支持的云音响设备"
subtitle="以下云音响设备将会播报来自当前码牌的订单"
v-if="vdata.bindType == 1"
@clickTitle="qrcId.open(vdata.storeId, vdata.qrcIdList, vdata.deviceId, vdata.bindQrcId)"
>
<template #titleRight>
<image class="selected-qrcId" src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" />
</template>
<block v-for="v in vdata.qrcList" :key="v.qrcId">
<qrcCode :title="v.qrcAlias" :subTitle="v.qrcId" />
</block>
</JeepayCard>
<JSinglePopup ref="more" :list="list" activeColor="#FF5B4C" />
<JSinglePopup ref="refBindType" :list="typeList" @confirm="editBindType" />
<JeepayPopupConfirm ref="tips" />
<uni-popup ref="popupDialog" type="dialog">
<uni-popup-dialog
mode="base"
:before-close="true"
title="播报金额"
@close="
() => {
popupDialog.close();
more.open();
}
"
@confirm="testDevice"
>
<uni-easyinput :inputBorder="false" :clearable="false" v-model="vdata.amount" type="digit" placeholder="请输入播报金额" />
</uni-popup-dialog>
</uni-popup>
<selectedQrcId ref="qrcId" @updateDetails="getDetails(vdata.deviceId)" />
<view class="launch-box" v-if="vdata.provider === 'lkls'">
<button @click="toLaunch(vdata.deviceNo)" style="background: #41b5ff; margin: 0 40rpx; margin-top: 40rpx; color: #fff">发布投放</button>
</view>
</JeepayBackground>
</template>
<script setup>
import { nextTick, reactive, ref } from 'vue';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import infoBox from '@/commons/utils/infoBox.js';
import { reqLoad, API_URL_SYS_DEVICE_LIST, API_URL_SYS_CODE_LIST, $speakTest, $deviceUnbind } from '@/http/apiManager.js';
import qrcCode from './components/qrcCode.vue';
import datamap from '@/commons/utils/datamap.js';
import selectedQrcId from './components/selectedQrcId.vue';
import emit from '@/commons/utils/emit.js';
import go from '@/commons/utils/go.js';
// 监听 更新事件
onUnload(() => uni.$off(emit.ENAME_REF_SPEAKER_DETAIL));
uni.$on(emit.ENAME_REF_SPEAKER_DETAIL, function (data) {
getDetails(vdata.deviceId);
});
onLoad((options) => {
getDetails(options.deviceId);
});
const more = ref(null);
const tips = ref(null);
const refBindType = ref(null);
const popupDialog = ref(null);
const qrcId = ref(null);
const vdata = reactive({
amount: ''
});
// 发布投放
const toLaunch = (deviceNo) => {
uni.navigateTo({
url: `/pages/release/release?deviceNo=${deviceNo}`
});
};
const list = reactive([
{
label: '播报测试',
value: 'test',
fun: () => {
vdata.amount = '';
popupDialog.value.open();
}
},
{ label: '解除绑定', value: 'remove', color: '#FF5B4C', fun: confirm }
]);
function confirm() {
more.value.close();
tips.value
.open('确认解除绑定吗?', { confirmColor: '#FF5B4C' })
.then((res) => {
$deviceUnbind(vdata.deviceId).then((res) => {
infoBox.showSuccessToast('解绑成功').then(() => {
go.back(1, emit.ENAME_REF_SPEAKER_LIST);
});
});
})
.catch((err) => {
more.value.open('remove');
});
}
const typeList = [
{ label: '门店所有订单', value: 0 },
{ label: '来自受支持码牌的订单', value: 1 }
];
const getDetails = (params) => {
reqLoad.getById(API_URL_SYS_DEVICE_LIST, params).then(({ bizData }) => {
vdata.provider = bizData.provider;
console.log(bizData, 'bizDatabizDatabizData');
Object.assign(vdata, bizData);
vdata.deviceParams = JSON.parse(vdata.deviceParams || '{}');
});
};
// 修改设备状态
const confirmSwitch = (bol) => {
return reqLoad.addOrUpdate(vdata.deviceId, API_URL_SYS_DEVICE_LIST, { state: bol }).then((res) => {
emit.refPageAndSearchEmit(emit.ENAME_REF_SPEAKER_LIST);
});
};
// 播报测试
function testDevice() {
if (!vdata.amount) {
return infoBox.showErrorToast('请输入播报金额');
}
$speakTest(vdata.deviceId, { amount: vdata.amount }).then((res) => {
popupDialog.value.close();
});
}
// 修改绑定设备信息
const editBindType = (val) => {
tips.value
.open('确认修改播报类型吗?')
.then((res) => {
vdata.bindType = val.value;
return reqLoad.addOrUpdate(vdata.deviceId, API_URL_SYS_DEVICE_LIST, { bindType: vdata.bindType, qrcIdList: vdata.qrcIdList || [] });
})
.catch(() => {
refBindType.value.open(vdata.bindType);
});
};
// 去编辑页面
const toEdit = () => {
go.to('PAGES_APP_HORN_BIND', { devId: vdata.deviceId });
};
</script>
<style lang="scss" scoped>
.create-time {
display: flex;
justify-content: space-between;
margin: 0 75rpx;
padding: 50rpx 0;
font-size: 30rpx;
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
.time-title {
color: rgba(255, 255, 255, 0.7);
}
.time-info {
color: #fff;
}
}
.store-info {
padding: 0.1rpx;
margin: 0 35rpx;
background-color: #fff;
border-radius: $J-b-r32;
overflow: hidden;
}
.default-img {
width: 50rpx;
height: 50rpx;
}
.dev-info {
padding: 3rpx 15rpx;
border-radius: 6rpx;
background: rgba(255, 255, 255, 0.15);
font-size: 26rpx;
color: #fff;
}
.selected-qrcId {
width: 40rpx;
height: 40rpx;
transform: rotate(90deg);
}
</style>