From 40711118c33369ccad7ceda0fdd729bd9f117f65 Mon Sep 17 00:00:00 2001 From: loulijun2021 <1694218219@qq.com> Date: 星期六, 22 十月 2022 14:03:11 +0800 Subject: [PATCH] 1.安灯响应静态实现 --- pages/xtsy/index.html | 280 ++++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 244 insertions(+), 36 deletions(-) diff --git a/pages/xtsy/index.html b/pages/xtsy/index.html index 576aa1a..619fb75 100644 --- a/pages/xtsy/index.html +++ b/pages/xtsy/index.html @@ -15,42 +15,111 @@ <script src="../../js/vue.min.js"></script> <script src="../../js/vant.min.js"></script> - <!-- <script type="text/javascript" src="../../js/jquery-1.6.4.min.js"></script> --> - <!-- <script type="text/javascript" src="../../js/axios.min.js"></script> --> - <!-- <script type="text/javascript" src="../../js/http.js"></script> --> + <script type="text/javascript" src="../../js/jquery-1.6.4.min.js"></script> + <script type="text/javascript" src="../../js/axios.min.js"></script> + <script type="text/javascript" src="../../js/http.js"></script> + + <script type="text/javascript" src="../../js/global.js"></script> + + + + <!-- <script src="http://121.196.36.24:8001/Scripts/jquery-3.4.1.min.js"></script> + <script src="http://121.196.36.24:8001/Scripts/jquery.signalR-2.2.2.min.js"></script> + <script src="http://121.196.36.24:8001/SignalR/Hubs"></script> --> + + <script src="../../js/jquery-3.4.1.min.js"></script> + <script src="../../js/jquery.signalR-2.2.2.min.js"></script> + <script src="../../js/Hubs.js"></script> + <script type="text/javascript" src="../../js/msg.js"></script> - <link rel="stylesheet" href="../css/global.css" type="text/css" charset="utf-8" /> </head> <body> <div id="app"> <div class="body"> - <div> - <van-nav-bar title="鏍囬" style="height:50px ;" right-text="鎸夐挳" left-arrow - @click-right="onClickRight" /> - </div> - <van-swipe :autoplay="3000"> - <van-swipe-item v-for="(image, index) in images" :key="index"> - <img v-lazy="image" :src='image' style="background-size: 100% 100%;" /> - </van-swipe-item> - </van-swipe> + <!-- <object data="../../components/my_van_nav_bar.html" title='鎴�' width="100%" height="44"></object> --> - <van-grid :gutter="10" square :column-num="3"> - <van-grid-item v-for="item in 9" @click='vanGridItem(item)' :key="item" icon="photo-o" text="鏂囧瓧" /> - </van-grid> + <!-- <van-nav-bar title="宸ヤ綔鍙�" @click-right="onClickRight"> + <template #right> + <van-popover placement="bottom-end" :offset="[13,8]" v-model="showPopover" trigger="click" + :actions="actions" @select="onSelect"> + <template #reference> + <van-badge :content="10" max='99'> + <van-icon name="bars" size='20' color='#fff' /> + </van-badge> + </template> + </van-popover> + </template> + </van-nav-bar> --> - <van-action-sheet lazy-render :closeable='false' close-on-click-action close-on-click-overlay - safe-area-inset-bottom v-model="sheetShow" title="鏍囬"> - <van-grid :gutter="10" square :column-num="3"> - <van-grid-item v-for="item in 9" @click='vanGridItem(item)' :key="item" icon="photo-o" - text="鏂囧瓧" /> + + <van-nav-bar title="宸ヤ綔鍙�" @click-right="onClickRight"> + <template #right> + <van-popover placement="bottom-end" :offset="[13,8]" v-model="showPopover" trigger="click"> + + <div class="topRight"> + <div class="topRightItem" @click="myMessageClick"> + <div> + <van-icon name="comment-o" + :badge="messageNumber!==0?(messageNumber>9?'9+':messageNumber):false" + size="1.28rem" style="margin-right: 8px;margin-top: 18px;" /> + </div> + <div style="font-size: 14px;border-bottom: 1px solid #eee;">鎴戠殑娑堟伅</div> + </div> + <div class="topRightItem" @click="topPopoverClick('閫�鍑虹櫥褰�')"> + <div> + <van-icon name="revoke" style="margin-right: 8px;" /> + </div> + <div style="font-size: 14px;">閫�鍑虹櫥褰�</div> + </div> + </div> + + <template #reference> + <van-badge :content="messageNumber" max='9' v-if='messageNumber!==0'> + <van-icon name="bars" size='20' color='#fff' /> + </van-badge> + <van-icon v-else name="bars" size='20' color='#fff' /> + </template> + </van-popover> + </template> + </van-nav-bar> + + + <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> + <van-swipe :autoplay="3000"> + <van-swipe-item v-for="(image, index) in images" :key="index"> + <img v-lazy="image" :src='image' style="background-size: 100% 100%;width: 100%;" /> + </van-swipe-item> + </van-swipe> + + <van-grid :gutter="20" :border='false' square :column-num="3" + style="margin: 30px auto 0; width: 90%;"> + <van-grid-item v-for="item in firstMenu" @click='vanGridItem(item)' :key="item" + :text="item.name"> + <img :src="item.imgurl" alt="" + style="width: 56px;height:56px;margin-top: 10px;border-radius: 10px;"> + <div style="margin-top: 5px;font-size: 14px;color: #929399;">{{item.name}}</div> + </van-grid-item> </van-grid> - </van-action-sheet> - </div> + <van-action-sheet lazy-render :closeable='false' close-on-click-action close-on-click-overlay + safe-area-inset-bottom v-model="sheetShow" :title="firstMenuName"> + <van-grid :border='false' :gutter="5" square :column-num="3" style="width: 80%; margin: auto;"> + <van-grid-item v-for="item in secondMenu" @click='vanGridSecondItem(item)' :key="item" + icon="photo-o"> + <img :src="item.imgurl" alt="" + style="width: 48px;height:48px;margin-top: 10px;border-radius: 10px;"> + <div style="margin-top: 5px;font-size: 12px;color: #929399;">{{item.name}}</div> + </van-grid-item> + </van-grid> + </van-action-sheet> + </div> + </van-pull-refresh> + + <van-overlay :show="overlayShow" @click="overlayShow=false" /> </div> @@ -60,24 +129,136 @@ el: '#app', data: function() { return { + isLoading: false, //涓嬫媺鍒锋柊 images: [ '../../static/images/swiper01.png', '../../static/images/swiper02.png', ], - sheetShow: false - + sheetShow: false, + overlayShow: false, + showPopover: false, + actions: [{ + icon: 'comment-o', + text: '瀹夌伅鍝嶅簲' + }, + { + icon: 'description', + text: '鎿嶄綔鎸囧' + }, { + icon: 'award-o', + text: '鎴愬搧杩芥函' + }, { + icon: 'revoke', + text: '閫�鍑虹櫥褰�' + } + ], + firstMenu: [], //涓�绾ц彍鍗� + firstMenuName: '', + secondMenu: [], //浜岀骇鑿滃崟 + messageNumber: 0, //鎴戠殑娑堟伅鏁板�� } }, created() { }, - methods: { - vanGridItem(item) { - console.log(item) - this.sheetShow = true - }, - onClickRight() { + mounted() { + this.getfirstMenu() + this.getLoginAppAnDonMessage() + setInterval(() => { + this.getLoginAppAnDonMessage() + }, 1000 * 10) + + }, + methods: { + onRefresh() { + setTimeout(() => { + vant.Toast('鍒锋柊鎴愬姛'); + this.getfirstMenu() + this.getLoginAppAnDonMessage() + // vant.Notify('鍒锋柊鎴愬姛'); + this.isLoading = false; + + }, 1000); + }, + + // 鑾峰彇娑堟伅鎺ュ彛 + async getLoginAppAnDonMessage() { + const data = { + userid: localStorage.getItem('userid'), + usercode: localStorage.getItem('usercode'), + username: localStorage.getItem('username'), + usertype: localStorage.getItem('usertype'), + } + + const res = await post('Login/LoginAppAnDonMessage' + formatParams(data)) + this.messageNumber = res.data.length + // this.messageNumber=9 + }, + + // 鑾峰彇涓�绾ц彍鍗� + async getfirstMenu() { + const data = { + usertype: 'APP', + usercode: localStorage.getItem('usercode') + } + const { + data: res + } = await get('Login/LoginMenu', data) + this.firstMenu = res + }, + // 涓�绾ц彍鍗曠偣鍑� + vanGridItem(item) { + this.sheetShow = true + this.firstMenuName = item.name + this.secondMenu = item.children + }, + // 浜岀骇鑿滃崟鐐瑰嚮 + vanGridSecondItem(item) { + let url = '' + switch (item.code) { + // 璁惧绠$悊 + case '2040': + url = '../sbgl/rcdj.html' + break; + case '2041': + url = '../sbgl/dqby.html' + break; + case '2042': + url = '../sbgl/wxsq.html' + break; + case '2043': + url = '../sbgl/sbwx.html' + break; + case '2044': + url = '../sbgl/wxyz.html' + break; + case '2090': + url = '../adgl/adhj.html' + break; + case '2091': + url = '../adgl/adxy.html' + break; + } + window.location = url + }, + // 椤堕儴鍙冲浘鏍囩偣鍑� + onClickRight() { + this.overlayShow = true + }, + // 椤堕儴鍙冲浘鏍囦笅鎷夐�夋嫨 + // onSelect(action) { + // if (action.text === '鎿嶄綔鎸囧') { + // topPopoverClick('鎿嶄綔鎸囧') + // } else if (action.text === '鎴愬搧杩芥函') { + // topPopoverClick('鎴愬搧杩芥函') + // } else if (action.text === '閫�鍑虹櫥褰�') { + // topPopoverClick('閫�鍑虹櫥褰�') + // } + // this.overlayShow = false + // }, + myMessageClick() { + window.location = '../other/wdxx.html' } } }) @@ -88,16 +269,43 @@ } .body { - width: 96%; height: 600px; background-color: grey; margin-top: 0px; - margin-left: 2%; background-color: #fff; position: relative; - /* display: flex; - justify-content: center; - align-items: flex-start; */ + } + + .van-nav-bar__content { + background-color: #2651d8; + height: 44px; + } + + .van-nav-bar__title { + color: #fff; + letter-spacing: 2px; + } + + .van-nav-bar__right { + padding: 0; + margin-right: 16px; + } + + .topRight { + width: 128px; + min-height: 40px; + display: flex; + flex-direction: column; + /* padding: 10px; */ + } + + .topRightItem { + display: flex; + height: 44px; + align-items: center; + line-height: 44px; + /* border-bottom: 1px dotted #000; */ + padding: 0 16px; } </style> </html> -- Gitblit v1.9.3