From 0ecc402885f332b21923bb12183dc072306f2b39 Mon Sep 17 00:00:00 2001 From: cuiqian2004 <cuiqian2004@163.com> Date: 星期五, 21 三月 2025 18:36:15 +0800 Subject: [PATCH] vue3 --- pages/index/index.vue | 169 ++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 115 insertions(+), 54 deletions(-) diff --git a/pages/index/index.vue b/pages/index/index.vue index 382eb2d..486f506 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -1,32 +1,39 @@ <template> <view class="uni-page-index"> - <view class="v-area" v-for="(area,index) in data"> - <p :data-key="area.ID?area.ID:area.id">{{ area.Name?area.Name:area.name }}</p> - <ul class="areaList"> - <!-- Mobox2 --> - <li v-for="(app,key) in area.App"> - <a @tap="appCreate(app)" class="logo" :style="{'background-color':app.BkColor,'color':app.BkColor}"> - <i :class="app.ImgFontStyle" :style="{'color':app.TxtColor}"></i> - </a> - <p :data-key="app.ID">{{ app.Name }}</p> - </li> - <!-- Mobox3 --> - <li v-for="(app,key) in area.app_list"> - <a @tap="appCreate(app)" class="logo" - :style="{'background-color':app.bk_color,'color':app.bk_color}"> - <i :class="app.img_font_style" :style="{'color':app.txt_color}"></i> - </a> - <p :data-key="app.id">{{ app.list_name|| app.name}}</p> - </li> + <view class="area-list" v-if="isMobox3"> + <view class="v-area" v-for="(area,index) in data"> + <view class="area-name">{{ area.name }}</view> + <view class="app-list"> + <view class="app" v-for="(app,key) in area.app_list" :key="key"> + <a @click="onClickApp(app)" class="logo" + :style="{'background-color':app.bk_color,'color':app.bk_color}"> + <text class="ico" :class="app.img_font_style" :style="{'color':app.txt_color}"></text> + </a> + <view @click="onClickApp(app)" class="app-name">{{app.name}}</view> + </view> + </view> + </view> - </ul> </view> - + <view class="area-list" v-else> + <view class="v-area" v-for="(area,index) in data"> + <view class="area-name">{{ area.Name }}</view> + <view class="app-list"> + <view class="app" v-for="(app,key) in area.App" :key="key"> + <a @click="onClickApp(app)" class="logo" + :style="{'background-color':app.BkColor,'color':app.BkColor}"> + <text class="ico" :class="app.ImgFontStyle" :style="{'color':app.TxtColor}"></text> + </a> + <view @click="onClickApp(app)" class="app-name">{{app.Name}}</view> + </view> + </view> + </view> + </view> </view> </template> <script> - import Base64 from '../../components/js-base64/base64.js' + import {Base64} from '@/js/Base64.js'; import utils from "@/js/utils.js" import { areaFunc @@ -34,23 +41,24 @@ import { getFuncTree } from "@/api/mobox.js" + import buttonClickMixin from '@/mixins/button-click.js'; export default { - modules: { - Base64, - }, + mixins: [buttonClickMixin], onNavigationBarButtonTap(e) { this.loadData() }, data() { return { title: 'Hello', - data: [] + data: [], + isMobox3: getApp().globalData.isMobox3, } }, onLoad(options) { console.log(options); // 鑾峰彇鎵�湁AppType="MES",ClientType="2"(PDA)鐨勫紩鐢ㄩ鍩熷姛鑳界偣淇℃伅 + this.loadData() }, @@ -85,7 +93,7 @@ const appType = utils.session.getValue('app_type') || "MES"; const list = await areaFunc(appType, 1) || [] const app = getApp() - if (app.globalData.isMobox3) { + if (this.isMobox3) { const list2 = [] for (let i in list) { const area = list[i] @@ -114,7 +122,7 @@ title: this.translateSys("error"), content: tip, showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); } @@ -143,18 +151,27 @@ title: this.translateSys("error"), content: tip, showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); return undefined } + }, + onClickApp(appInfo) { + this.handleButtonClick((done) => { + this.appCreate(appInfo) + setTimeout(() => { + done(); // 閲嶇疆鐘舵� + }, 1000); + }); + }, appCreate(appInfo) { //鐐瑰嚮鍔熻兘鐐硅烦杞〉闈� console.log(appInfo); const app = getApp() - var paramStr = app.globalData.isMobox3 ? appInfo.param : appInfo.Param; - var appName = app.globalData.isMobox3 ? (appInfo.list_name || appInfo.name) : appInfo.Name; - var defCode = app.globalData.isMobox3 ? appInfo.def_code : appInfo.DefCode; + var paramStr = this.isMobox3 ? appInfo.param : appInfo.Param; + var appName = this.isMobox3 ? (appInfo.list_name || appInfo.name) : appInfo.Name; + var defCode = this.isMobox3 ? appInfo.def_code : appInfo.DefCode; var param = ""; if (paramStr) { //mobox2鐨刾aram鏄痡son瀛楃涓�@@ -168,12 +185,12 @@ title: this.translateSys("tip"), content: this.translate('tip_no_app_param'), showCancel: false, - confirmText: this.translateSys("cancel") + confirmText: this.translateSys('close') }); return; } if (defCode == '3018') { - if (app.globalData.isMobox3) { //Mobox3 + if (this.isMobox3) { //Mobox3 uni.navigateTo({ // url:'../modal/3018?param='+param+"&titlename="+appName url: '../modal/3018_2?param=' + param + "&titlename=" + appName @@ -184,7 +201,7 @@ }); } } else if (defCode == '3037') { - if (app.globalData.isMobox3) { //Mobox3 + if (this.isMobox3) { //Mobox3 uni.navigateTo({ // url:'../modal/3037?param='+param+"&titlename="+appName url: '../modal/3037_2?param=' + param + "&titlename=" + appName @@ -195,31 +212,31 @@ }); } } else if (defCode == '3200') { - if (app.globalData.isMobox3) { //Mobox3 + if (this.isMobox3) { //Mobox3 uni.navigateTo({ url: '../modal/3200?param=' + param + "&titlename=" + appName }); } } else if (defCode == '3201') { - if (app.globalData.isMobox3) { //Mobox3 + if (this.isMobox3) { //Mobox3 uni.navigateTo({ url: '../modal/3201?param=' + param + "&titlename=" + appName }); } } else if (defCode == '5600') { //鐮佺洏 - if (app.globalData.isMobox3) { //Mobox3 + if (this.isMobox3) { //Mobox3 uni.navigateTo({ url: '../modal/5600?param=' + param + "&titlename=" + appName }); } } else if (defCode == '5601') { //鐮佺洏 - if (app.globalData.isMobox3) { //Mobox3 + if (this.isMobox3) { //Mobox3 uni.navigateTo({ url: '../modal/5601?param=' + param + "&titlename=" + appName }); } } else if (defCode == '5602') { //鍒嗘嫞 - if (app.globalData.isMobox3) { //Mobox3 + if (this.isMobox3) { //Mobox3 uni.navigateTo({ url: '../modal/5602?param=' + param + "&titlename=" + appName }); @@ -234,7 +251,7 @@ // console.log(e.target) getApp().onScan((result) => { // console.log(result.decodedata); - this.$data.data[e.target.dataset['key']] = result.decodedata; + this.data[e.target.dataset['key']] = result.decodedata; }) }, translate(t) { @@ -251,23 +268,67 @@ <style lang="scss"> .uni-page-index { - - width: 100vw; - min-height: 100vh; + width: 750rpx; + height: 100vh; background: #EAEAEA; - padding: 1rpx 0rpx; + display: flex; + .area-list { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + overflow-y: auto; + + .v-area { + border-radius: 12rpx; + margin: 10rpx ; + padding: 10rpx; + background: #FFFFFF; + display: flex; + flex-direction: column; + width:calc(100% - 40rpx); + .area-name { + font-size: 40rpx; + width: 100%; + padding: 10rpx ; + } + .app-list { + width: 100%; + padding: 0; + display: flex; + flex-direction: row; + flex-wrap: wrap; + .app { + padding: 20rpx 25rpx 15rpx 25rpx; + text-align: center; + font-size: 14px; + width: 125rpx; + display: flex; + flex-direction: column; + .logo { + height: 105rpx; + width: 105rpx; + border-radius: 20rpx; + padding: 10rpx; + color: #000000; + border: 0px solid rgb(221, 221, 221); + .ico { + color: #000000; + font-size: 40px; + line-height:105rpx; + } + } - .v-area { - border-radius: 12rpx; - margin: 30rpx; - padding: 10rpx; - background: #FFFFFF; + .app-name { + padding-top: 10rpx ; + } + } + } + } + } - .areaList { - padding: 0; - } .areaList li { /* border: 1px solid #0062CC; */ @@ -277,7 +338,7 @@ padding: 30rpx 10rpx 16rpx 10rpx; text-align: center; font-size: 14px; - width: 100px; + width: 140rpx; vertical-align: text-top; } @@ -295,7 +356,7 @@ .logo i { color: #000000; font-size: 40px; - line-height: 53px; + line-height: 120rpx; } } </style> \ No newline at end of file -- Gitblit v1.9.1