|
@@ -0,0 +1,188 @@
|
|
|
|
+<template>
|
|
|
|
+<!-- 修改logo -->
|
|
|
|
+ <div class="page flex-col">
|
|
|
|
+ <s-header :name="$t('device.customLogo.customLogo')" :noback="false"></s-header>
|
|
|
|
+
|
|
|
|
+ <div class="wrap1 flex-col">
|
|
|
|
+ <van-field v-model="logoNumber"
|
|
|
|
+ type="digit"
|
|
|
|
+ :label="$t('device.customLogo.logoLabel')"
|
|
|
|
+ :placeholder="$t('device.customLogo.logoPlaceholder')"
|
|
|
|
+ :rules="[{ required: true, message: $t('device.customLogo.logoRequired') }]"
|
|
|
|
+ ></van-field>
|
|
|
|
+
|
|
|
|
+ <van-button round
|
|
|
|
+ :disabled="logoNumber === ''"
|
|
|
|
+ type="primary"
|
|
|
|
+ class="volumeChangeButton"
|
|
|
|
+ @click="submitChange">{{ $t('device.customLogo.registerButton') }}</van-button>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import {defineComponent, onMounted, ref} from 'vue';
|
|
|
|
+import sHeader from "@/components/SimpleHeader.vue";
|
|
|
|
+import {customLogo, getDeviceDetal} from "@/service/device";
|
|
|
|
+import {Toast} from "vant";
|
|
|
|
+import {useRoute} from "vue-router";
|
|
|
|
+import {useI18n} from "vue-i18n";
|
|
|
|
+
|
|
|
|
+export default defineComponent({
|
|
|
|
+ setup() {
|
|
|
|
+ const { t } = useI18n();
|
|
|
|
+ const route = useRoute();
|
|
|
|
+ const logoNumber = ref('');
|
|
|
|
+ const deviceId = route.query.deviceId;
|
|
|
|
+ const deviceDetail = ref(null);
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ // 初始化页面获取列表
|
|
|
|
+ onMounted(async () => {
|
|
|
|
+ await getDeviceDetailFun();
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ const getDeviceDetailFun = async () => {
|
|
|
|
+ const { data } = await getDeviceDetal({id : deviceId});
|
|
|
|
+ if (data.code === '00000') {
|
|
|
|
+ deviceDetail.value = data.data;
|
|
|
|
+ // volume.value = data.data.volume ? data.data.volume : 0;
|
|
|
|
+ } else { Toast.fail(data.message); }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const submitChange = async ()=> {
|
|
|
|
+ console.log('提交:${logoNumber.value}');
|
|
|
|
+ // TODO: 提交逻辑 done
|
|
|
|
+ // if (deviceId.value === "") {
|
|
|
|
+ // Toast.fail(t('device.'))
|
|
|
|
+ // }
|
|
|
|
+ const { data } = await customLogo({
|
|
|
|
+ id: deviceId,
|
|
|
|
+ // adminId:
|
|
|
|
+ })
|
|
|
|
+ if (data.code === '00000') {
|
|
|
|
+ Toast.success(t('device.modificationSucceeded'));
|
|
|
|
+ } else {
|
|
|
|
+ Toast.fail(data.message);
|
|
|
|
+ }
|
|
|
|
+ console.log('submitChange', {equipmentId: deviceId});
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return {
|
|
|
|
+ deviceDetail,
|
|
|
|
+ logoNumber,
|
|
|
|
+ submitChange,
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ components: { sHeader },
|
|
|
|
+
|
|
|
|
+});
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+@import "../../common/style/common";
|
|
|
|
+.page {
|
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
|
+ position: relative;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: calc(100vh - 44px);
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ .van-slider {
|
|
|
|
+ width: 92%;
|
|
|
|
+ height: 4px;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ margin-top: 35px;
|
|
|
|
+ background-color: #dfdfe5;
|
|
|
|
+ .van-slider__bar {
|
|
|
|
+ background-color: rgba(77, 193, 147, 1);
|
|
|
|
+ }
|
|
|
|
+ .van-slider__button {
|
|
|
|
+ background-color: rgba(77, 193, 147, 1);
|
|
|
|
+ width: 16px;
|
|
|
|
+ height: 16px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .volumeChangeButton {
|
|
|
|
+ background-color: #4d6add;
|
|
|
|
+ width: 220px;
|
|
|
|
+ height: 34px;
|
|
|
|
+ margin: 49px auto;
|
|
|
|
+ .van-button__text { font-size: 15px; }
|
|
|
|
+ }
|
|
|
|
+ .wrap1 {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 274px;
|
|
|
|
+ .box2 {
|
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
|
+ z-index: 23;
|
|
|
|
+ height: 54px;
|
|
|
|
+ margin-top: 1px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ position: relative;
|
|
|
|
+ .section3 {
|
|
|
|
+ width: 162px;
|
|
|
|
+ height: 20px;
|
|
|
|
+ margin: 17px 0 0 15px;
|
|
|
|
+ .box3 {
|
|
|
|
+ background-color: rgba(128, 150, 236, 1);
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+ width: 4px;
|
|
|
|
+ height: 12px;
|
|
|
|
+ margin-top: 4px;
|
|
|
|
+ }
|
|
|
|
+ .info1 {
|
|
|
|
+ width: 150px;
|
|
|
|
+ height: 20px;
|
|
|
|
+ overflow-wrap: break-word;
|
|
|
|
+ color: rgba(64, 77, 116, 1);
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-family: PingFangSC-Medium;
|
|
|
|
+ text-align: left;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ display: block;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .img1 {
|
|
|
|
+ z-index: 31;
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0;
|
|
|
|
+ top: 53px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 2px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .box4 {
|
|
|
|
+ width: 147px;
|
|
|
|
+ height: 14px;
|
|
|
|
+ margin: 19px 0 0 15px;
|
|
|
|
+ .word3 {
|
|
|
|
+ width: 104px;
|
|
|
|
+ height: 13px;
|
|
|
|
+ overflow-wrap: break-word;
|
|
|
|
+ color: rgba(64, 77, 116, 1);
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ text-align: left;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ line-height: 13px;
|
|
|
|
+ margin-top: 1px;
|
|
|
|
+ display: block;
|
|
|
|
+ }
|
|
|
|
+ .word4 {
|
|
|
|
+ width: 33px;
|
|
|
|
+ height: 13px;
|
|
|
|
+ overflow-wrap: break-word;
|
|
|
|
+ color: rgba(64, 77, 116, 1);
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ font-family: PingFangSC-Medium;
|
|
|
|
+ text-align: left;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ line-height: 15px;
|
|
|
|
+ display: block;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|