first
This commit is contained in:
225
pageDevice/speaker/view.vue
Normal file
225
pageDevice/speaker/view.vue
Normal 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>
|
||||
Reference in New Issue
Block a user