NGTools/pages/grid/grid.vue
ldeyun cf227cf306 修改图片资源地址端口;
修改ucenter部分内容页面路径;
调整首页样式
修改图标文件地址及名称
2024-10-05 21:42:34 +08:00

399 lines
8.2 KiB
Vue

<template>
<view class="warp">
<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar title="天然气计算工具集" />
<view>
<!-- 流量计算 -->
<view class="section-box">
<text class="decoration"></text>
<text class="section-text">{{$t('llJs.grid')}}</text>
</view>
<view class="Grid">
<view class="Grid-Item" v-for="(item,index) in llJsgridList" :key="index">
<navigator :url="item.url">
<view class="GSimg">
<image class="Image" :src="getStaticFilePath('mianicon/'+item.icon)" mode="aspectFit">
</image>
</view>
<view class="GStitle">{{ item.type }}</view>
</navigator>
</view>
</view>
<!-- 参数计算 -->
<view class="section-box">
<text class="decoration"></text>
<text class="section-text">{{$t('wxcsJs.grid')}}</text>
</view>
<view class="Grid">
<view class="Grid-Item" v-for="(item,index) in wxcsJsgridList" :key="index">
<navigator :url="item.url">
<view class="GSimg">
<image class="Image" :src="getStaticFilePath('mianicon/'+item.icon)" mode="aspectFit">
</image>
</view>
<view class="GStitle">{{ item.type }}</view>
</navigator>
</view>
</view>
<!-- CNG计算 -->
<view class="section-box">
<text class="decoration"></text>
<text class="section-text">{{$t('CNGJs.grid')}}</text>
</view>
<view class="Grid">
<view class="Grid-Item" v-for="(item,index) in CNGJsgridList" :key="index">
<navigator :url="item.url">
<view class="GSimg">
<image class="Image" :src="getStaticFilePath('mianicon/'+item.icon)" mode="aspectFill">
</image>
</view>
<view class="GStitle">{{ item.type }}</view>
</navigator>
</view>
</view>
<!-- <!-- CNG计算 -->
<view class="section-box">
<text class="decoration"></text>
<text class="section-text">{{$t('QtJs.grid')}}</text>
</view>
<view class="Grid">
<view class="Grid-Item" v-for="(item,index) in QtJsgridList" :key="index">
<navigator :url="item.url">
<view class="GSimg">
<image class="Image" :src="getStaticFilePath('mianicon/'+item.icon)" mode="aspectFill">
</image>
</view>
<view class="GStitle">{{ item.type }}</view>
</navigator>
</view>
</view>
</view>
</view>
</template>
<script>
// import {
// getJsonTree,
// groupBy
// } from "@/js_sdk/util/jsonData";
import deviceinfo from '@/js_sdk/dc-deviceinfo/deviceinfo.js'
import {
saveDepartStore,
saveDictItemStore
} from '@/js_sdk/util/dictTools';
// #ifdef APP-PLUS
import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
// #endif
const db = uniCloud.database();
export default {
// #ifdef APP-PLUS
components: {
statusBar
},
// #endif
data() {
return {
llJsgridList: [],
wxcsJsgridList: [],
CNGJsgridList: [],
QtJsgridList: [],
current: 0,
hasLogin: false,
CPUNo: [],
msgList: []
}
},
onShow() {
this.hasLogin = uniCloud.getCurrentUserInfo().tokenExpired > Date.now()
},
mounted() {
//#ifdef APP
plus.device.getInfo({
success: function(e) {
console.log('getDeviceInfo success: ' + JSON.stringify(e));
},
fail: function(e) {
console.log('getDeviceInfo failed: ' + JSON.stringify(e));
}
});
// this.CPUNo=JSON.stringify(plus.device.getInfo())
//#endif
let that = this;
uni.getSystemInfo({
success: function(res) {
// console.log(res)
}
});
},
onLoad() {
this.getGrid();
saveDictItemStore();
saveDepartStore();
},
methods: {
getGrid() {
let gridList = []
gridList.push({
"type": this.$t('llJs.cysllJs.title'),
"url": this.$t('llJs.cysllJs.url'),
"icon": this.$t('llJs.cysllJs.icon')
})
gridList.push({
"type": this.$t('llJs.sdsllJs.title'),
"url": this.$t('llJs.sdsllJs.url'),
"icon": this.$t('llJs.sdsllJs.icon')
})
gridList.push({
"type": this.$t('llJs.ljlllJs.title'),
"url": this.$t('llJs.ljlllJs.url'),
"icon": this.$t('llJs.ljlllJs.icon')
})
this.llJsgridList = gridList
gridList = []
gridList.push({
"type": this.$t('wxcsJs.ysyzJs.title'),
"url": this.$t('wxcsJs.ysyzJs.url'),
"icon": this.$t('wxcsJs.ysyzJs.icon')
})
gridList.push({
"type": this.$t('wxcsJs.rzJs.title'),
"url": this.$t('wxcsJs.rzJs.url'),
"icon": this.$t('wxcsJs.rzJs.icon')
})
gridList.push({
"type": this.$t('wxcsJs.qtJs.title'),
"url": this.$t('wxcsJs.qtJs.url'),
"icon": this.$t('wxcsJs.qtJs.icon')
})
this.wxcsJsgridList = gridList
gridList = []
gridList.push({
"type": this.$t('CNGJs.srjJs.title'),
"url": this.$t('CNGJs.srjJs.url'),
"icon": this.$t('CNGJs.srjJs.icon')
})
gridList.push({
"type": this.$t('CNGJs.zxcJs.title'),
"url": this.$t('CNGJs.zxcJs.url'),
"icon": this.$t('CNGJs.zxcJs.icon')
})
gridList.push({
"type": this.$t('CNGJs.LNGQhJs.title'),
"url": this.$t('CNGJs.LNGQhJs.url'),
"icon": this.$t('CNGJs.LNGQhJs.icon')
})
this.CNGJsgridList = gridList
gridList = []
gridList.push({
"type": this.$t('QtJs.ZBGJs.title'),
"url": this.$t('QtJs.ZBGJs.url'),
"icon": this.$t('QtJs.ZBGJs.icon')
})
gridList.push({
"type": this.$t('QtJs.srjBGJs.title'),
"url": this.$t('QtJs.srjBGJs.url'),
"icon": this.$t('QtJs.srjBGJs.icon')
})
// gridList.push({
// "type": this.$t('QtJs.SqgyJs.title'),
// "url": this.$t('QtJs.SqgyJs.url')
// })
this.QtJsgridList = gridList
},
/**
* banner加载后触发的回调
*/
onqueryload(data) {
// console.log(JSON.stringify(data))
},
changeSwiper(e) {
this.current = e.detail.current
},
/**
* 点击banner的处理
*/
clickBannerItem(item) {
// 有外部链接-跳转url
if (item.open_url) {
uni.navigateTo({
url: '/uni_modules/uni-id-pages/pages/common/webview/webview?url=' + item.open_url +
'&title=' + item.title,
success: res => {},
fail: () => {},
complete: () => {}
});
}
// 其余业务处理
}
}
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #fff;
min-height: 100%;
height: auto;
}
view {
font-size: 14px;
line-height: inherit;
}
/* #endif */
.section-box {
display: flex;
flex-direction: row;
align-items: left;
padding-left: calc(10vw /2);
padding-top: 10px;
padding-bottom: 10px;
}
.decoration {
width: 4px;
height: 12px;
border-radius: 10px;
background-color: #2979ff;
// margin-left: 30rpx;
}
.section-text {
color: blue;
margin-left: 10rpx;
font-size: 16px;
}
/* #ifdef APP-NVUE */
.warp {
background-color: #fff;
}
/* #endif */
.Grid {
width: 90vw;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: space-between;
padding-left: calc(10vw /2);
column-gap: calc(25% / 3);
row-gap: 5rpx;
box-sizing: content-box;
.Grid-Item {
width: 25%;
height: 150rpx;
text-align: center;
border: 0rpx solid #ccc;
box-sizing: content-box;
background: #ffffff;
background-image: "@/static/uni-center/headers.png";
.GSimg {
width: 100%;
height: 10rpx;
text-align: center;
.Image {
width: 100rpx;
height: 100rpx;
}
}
.GStitle {
width: 100%;
height: 34rpx;
line-height: 34rpx;
color: orangered;
font-size: 26rpx;
padding-top: 15px;
margin-top: 80rpx;
}
}
}
.banner-image {
width: 750rpx;
height: 400rpx;
}
.swiper-box {
height: 400rpx;
}
.search-icons {
padding: 16rpx;
}
.search-container-bar {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
right: 0;
z-index: 10;
background-color: #fff;
}
/* #ifndef APP-NVUE || VUE3*/
::v-deep
/* #endif */
.uni-searchbar__box {
border-width: 0;
}
/* #ifndef APP-NVUE || VUE3 */
::v-deep
/* #endif */
.uni-input-placeholder {
font-size: 28rpx;
}
</style>