界面大模式

cuiqian2004

2025-05-23 df481aebfb7a19eea5d6c02f93c6f5776b0fdc19

 pages/login/set.vue

@@ -1,34 +1,46 @@
<template>
   <view class="uni-page-login-set">
      <uni-forms class="form"  label-align="right" label-width="100px" :form="form">
   <view class="uni-page-login-set" :class="form.largeMode?'large-mode':''">
      <uni-forms class="form" label-align="right" label-width="150px" :form="form">
         <uni-section :title="translateSys('page.server')" type="line">
            <input type="text" class="input-wrapper"  v-model="form.server" :placeholder="translateSys('page.input_server')">
            <input type="text" class="input-wrapper" v-model="form.server"
               :placeholder="translateSys('page.input_server')">
         </uni-section>
         <uni-section :title="translateSys('page.mobox3_app_type')" type="line">
            <input type="text" class="input-wrapper" v-model="form.appType" :placeholder="translateSys('page.input_server')">
            <input type="text" class="input-wrapper" v-model="form.appType"
               :placeholder="translateSys('page.input_server')">
         </uni-section>
         <uni-section :title="translateSys('page.mobox3_port')" type="line">
            <uni-forms-item label="OrgSAPI">
               <input type="number" class="input-wrapper"  v-model="form.orgSPort">
               <input type="number" class="input-wrapper" v-model="form.orgSPort">
            </uni-forms-item>
            <uni-forms-item label="MoboxSAPI">
               <input type="number" class="input-wrapper"  v-model="form.moboxSPort">
               <input type="number" class="input-wrapper" v-model="form.moboxSPort">
            </uni-forms-item>
            <uni-forms-item label="DataSAPI">
               <input type="number" class="input-wrapper"  v-model="form.dataSPort">
               <input type="number" class="input-wrapper" v-model="form.dataSPort">
            </uni-forms-item>
            <uni-forms-item label="MongodbSvr">
               <input type="number" class="input-wrapper"  v-model="form.mongodbSPort">
               <input type="number" class="input-wrapper" v-model="form.mongodbSPort">
            </uni-forms-item>
         </uni-section>
      </uni-forms>
      <button id='ok' type="default" @tap="onOk" class="btn_ok">{{translateSys("sys.ok")}}</button>

         <view> {{translateSys('page.interface_large_mode')}}
            <switch :checked="form.largeMode" :style="form.largeMode? '':'transform:scale(0.7)'"
               @change="switchLargeMode" />
         </view>

         <view> {{translateSys('page.mobox3_bind_classes_when_logging_in')}}
            <switch :checked="form.bindClasses" :style="form.largeMode? '':'transform:scale(0.7)'"
               @change="switchBindClasses" />
         </view>
      </uni-forms>
      <button class="btn_ok" type="default" @tap="onOk">{{translateSys("sys.ok")}}</button>
   </view>
</template>

<script>
   import utils from "@/js/utils.js"

   export default {
      data() {
         return {
@@ -39,7 +51,10 @@
               moboxSPort: "",
               dataSPort: "",
               mongodbSPort: "",
            }
               bindClasses: false,
               largeMode: false
            },

         }
      },
      methods: {
@@ -47,15 +62,23 @@

            utils.session.setValue('server', this.form.server);
            utils.session.setValue('app_type', this.form.appType);
            utils.session.setValue('large_mode', this.form.largeMode);
            let bindInfo = utils.session.getValue('bind_classes')
            utils.session.setValue('bind_classes', {
               checked: this.form.bindClasses,
               classes: bindInfo?.classes || ""
            });
            utils.session.setValue('mobox3_port', {
               org: this.form.orgSPort,
               mobox: this.form.moboxSPort,
               data: this.form.dataSPort,
               mongodb: this.form.mongodbSPort
            });
            var eventChannel = this.$scope.eventChannel;

            getApp().globalData.largeMode = this.form.largeMode
            const eventChannel = this.getOpenerEventChannel();
            eventChannel.emit('exitSetEvent', this.form.server);
				

            uni.navigateBack({
               delta: 1, //返回层数，2则上上页
            })
@@ -64,6 +87,13 @@

            // });
         },
         switchBindClasses(e) {
            this.form.bindClasses = e.detail.value
         },
         switchLargeMode(e) {
            this.form.largeMode = e.detail.value
         },

         translateSys(t) {
            if (typeof this.$t == "function") return this.$t(`${t}`)
            else return t;
@@ -71,8 +101,12 @@
      },
      onLoad() {


         this.form.server = utils.session.getValue('server') || "";
         this.form.appType = utils.session.getValue('app_type') || "MES";
         this.form.bindClasses = utils.session.getValue('bind_classes')?.checked || false
         this.form.largeMode = utils.session.getValue('large_mode') ? true : false
         console.log(this.form.largeMode)
         const mobox3Port = utils.session.getValue('mobox3_port');
         this.form.orgSPort = mobox3Port?.org || 5101
         this.form.moboxSPort = mobox3Port?.mobox || 5102
@@ -89,24 +123,31 @@
      display: flex;
      width: 750rpx;
      flex-direction: column !important;
      .form{
         padding: 20rpx;
			
      }
      .input-wrapper {
         border: 1px solid #d5d5d5;
         width: calc(100% - 16rpx);
         padding: 12rpx 8rpx;

      .form {
         padding: 10rpx 20rpx;

         .input-wrapper {
            border: 1px solid #d5d5d5;
            width: calc(100% - 16rpx);
            padding: 12rpx 8rpx;
         }

         .uni-forms-item {
            margin: 20rpx;
         }
      }

      button.btn_ok {
         margin-top: 50rpx;
         width: 100%;
         margin-top: 10rpx 25rpx;
         width: calc(100% - 50rpx);
         padding: 20rpx;
         line-height: 1.5;
         background: #27A6E1;
         border: none;
         color: #fff;
      }


   }
</style>