<template> <view class="container"> <!-- <view :style="{height: statusBarHeight + 'px'}"></view> --> <!-- <view :style="{height: navBarHeight + 'px'}"></view> --> <u-navbar :is-back="false" title="" :background="{ background: '#f7f7f7' }" :border-bottom="false"> <view class="slot-wrap"> <image src="/static/images/login-icon.png" mode="aspectFit" style="width: 200rpx;"></image> </view> </u-navbar> <view class="page-content"> <swiper class="swiper" circular indicator-dots style="border-radius: 20rpx;overflow: hidden;height: 200px"> <swiper-item v-for="(data, index) in swiperList" style="width: 100%;height: 100%;" :key="index"> <view class="swiper-item" style="width: 100%;height: 100%;"> <image :src="data.tupian" mode="aspectFill" style="width: 100%;height: 100%;"></image> </view> </swiper-item> </swiper> <u-grid :col="4" :border="false" style="margin: 10rpx 0 ;"> <template v-for="(item,index) in navList" :key="index"> <u-grid-item bg-color="none" @click="jumpToPage(item)"> <image :src="`/static/index-icon/${item.image}.png`" style="height: 70rpx;width: 70rpx;"> </image> <view class="grid-text">{{item.title}}</view> </u-grid-item> </template> </u-grid> <u-card padding="20" margin="30rpx 0rpx" border-radius="20" box-shadow="0px 2px 5px rgba(0, 0, 0, 0.1)"> <template v-slot:head> <u-section title="课程预告" sub-title="查看更多" sub-color="#000000"></u-section> </template> <template v-slot:body> <view> <!-- <swiper class="swiper" circular indicator-dots style="border-radius: 20rpx;overflow: hidden;height: 200px"> <swiper-item v-for="(data, index) in swiperList" style="width: 100%;height: 100%;" :key="index"> <view class="swiper-item" style="width: 100%;height: 100%;"> <image :src="data.tupian" mode="aspectFill" style="width: 100%;height: 100%;"></image> </view> </swiper-item> </swiper> --> <swiper class="course-swiper" indicator-dots :autoplay="false" circular :current="current" @change="onSwiperChange"> <swiper-item v-for="(item, index) in swiperList" :key="index" :class="['swiper-item', {'active': current === index}]"> <image :src="item.tupian" mode="aspectFill" style="height: 200px;"></image> <text>{{ item.id }}</text> </swiper-item> </swiper> </view> </template> </u-card> <u-card padding="20" margin="30rpx 0rpx" border-radius="20" box-shadow="0px 2px 5px rgba(0, 0, 0, 0.1)"> <template v-slot:head> <u-section title="研究报告" sub-title="查看更多" sub-color="#000000"></u-section> </template> <template v-slot:body> <view> <view v-for="(data,index) in reportList" :key="index" class="u-body-item u-flex u-p-t-0 " style="align-items: inherit;"> <image :src="data.tupian" mode="aspectFill"></image> <view class="u-body-item-content"> <view class="item-content"> <text class="item-content-title text-ellipsis">{{data.biaoti}}</text> <text class="item-content-type">{{data.leixing}}</text> <text class="item-content-price" v-if="!data.huiyuanmianfei">¥{{data.jiage}}元</text> </view> <view class="item-button"> <view v-if="!data.huiyuanmianfei && data.yigoumai" class="item-button-yigoumai">已购买</view> <view v-else-if="!data.huiyuanmianfei && !data.yigoumai" class="item-button-goumai">点击购买</view> <view v-else-if="data.huiyuanmianfei" class="item-button-huiyuan"> 会员免费 <!-- <image class="item-button-huiyuan-bg" src="/static/images/bg-label.png" mode="aspectFit"></image> --> </view> </view> </view> </view> </view> </template> </u-card> <button @click="toPage">是否登录</button> </view> </view> </template> <script setup> import { ref } from 'vue' import { onReady, onLoad } from '@dcloudio/uni-app' import { useAuthStore } from '@/store/authStore' const authStore = useAuthStore() // 屏幕状态栏高度 const statusBarHeight = ref(0) // 顶部导航栏高度 const navBarHeight = ref(0) // 是否登录 const isLogin = ref(true) // 是否为会员,从缓存里拿取用户信息 // const userInfo = uni.getStorageSync("userinfo") || {} // const isMember = userInfo?.isMember || false // 首页-轮播图 const swiperList = ref([{ tupian: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain', id: '01' }, { tupian: 'https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c', id: '02' }, { tupian: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M03/00/0C/Cg-4zFS8bC-Ie9zBADCvovJAqiEAATJ8wDX__cAMK-6184.jpg', id: '03' }, ]) const current = ref(0) // 首页-导航栏 const navList = ref([{ id: 'notice', title: '通知公告', image: 'notice', url: '/pages/notice/notice/notice', toOtherApp: false, otherAppId: '其他小程序的appid' }, { id: 'dynamic', title: '协会动态', image: 'dynamic', url: '/pages/dynamic/dynamic/dynamic', toOtherApp: false, otherAppId: '其他小程序的appid' }, { id: 'guide', title: '办事指引', image: 'guide', url: '/pages/guide/guide/guide', toOtherApp: false, otherAppId: '其他小程序的appid' }, { id: 'edu', title: '继续教育', image: 'edu', url: '跳转页面的路径', toOtherApp: true, otherAppId: '其他小程序的appid' }, { id: 'level', title: '水平认证', image: 'level', url: '跳转页面的路径', toOtherApp: true, otherAppId: '其他小程序的appid' }, { id: 'report', title: '研究报告', image: 'report', url: '跳转页面的路径', toOtherApp: true, otherAppId: '其他小程序的appid' }, { id: 'index', title: '经理人指数', image: 'pay', url: '跳转页面的路径', toOtherApp: true, otherAppId: '其他小程序的appid' }, { id: 'pay', title: '会费缴交', image: 'pay', url: '跳转页面的路径', toOtherApp: true, otherAppId: '其他小程序的appid' } ]) const reportList = ref( [{ "biaoti": "2023年7月广州市中介促成二手住宅市场交易简报", "tupian": "https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain", "leixing": "月度成交简报", "jiage": 150.80, "yigoumai": true, "huiyuanmianfei": false }, { "biaoti": "成交有望稳中微升————2023年8月中介协会经理人指数报告经理人指数报告经理人指数报告", "tupian": "https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c", "leixing": "经理人指数报告", "jiage": 200.88, "yigoumai": false, "huiyuanmianfei": false }, { "biaoti": "2023年6月广州市住宅租金动态监测报告", "tupian": "https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M03/00/0C/Cg-4zFS8bC-Ie9zBADCvovJAqiEAATJ8wDX__cAMK-6184.jpg", "leixing": "月度租赁简报", "jiage": 300.00, "yigoumai": true, "huiyuanmianfei": true } ]) const jumpToPage = (data) => { if (data.toOtherApp) { // 跳转其他小程序 console.log("跳转至其他小程序", data.otherAppId) return } uni.navigateTo({ url: data.url }) } const toPage = () => { if (!authStore.isAuthenticated) { uni.navigateTo({ url: "/pages/login/login" }) return } } const onSwiperChange = (event) => { this.current = event.detail.current; // 更新当前项 } onReady(() => { uni.getSystemInfo({ success(e) { statusBarHeight.value = e.statusBarHeight; let custom = uni.getMenuButtonBoundingClientRect(); navBarHeight.value = custom.height + (custom.top - e.statusBarHeight) * 2; } }) }) onLoad(() => { uni.setTabBarBadge({ //显示数字 index: 1, //tabbar下标 text: '999' //数字 }) }) </script> <style lang="scss" scoped> .container { width: 100vw; background-color: $uni-bg-color; padding: 0 20rpx; } .slot-wrap { padding-left: 20rpx; } .grid-text { font-size: 28rpx; margin-top: 4rpx; color: $uni-text-color; } .u-card-wrap { background-color: $u-bg-color; padding: 1px; } .u-body-item { font-size: 32rpx; color: #333; margin: 30rpx 0; height: 140rpx; .u-body-item-content { position: relative; flex: 1; /* 剩余空间占用 Flex 规则 */ min-width: 0; // width: 100%; height: inherit; .item-content text { width: inherit; font-size: $uni-font-size-2; display: block; margin: 10rpx; color: $uni-text-color; } .item-content .item-content-price { color: $uni-color-error; // font-weight: bold; } .item-button { position: absolute; right: 0; bottom: 0; font-size: 22rpx; .item-button-huiyuan { padding: 15rpx 0 5rpx; text-align: center; width: 150rpx; background-image: url('~@/static/images/bg-label.png'); background-size: cover; background-repeat: no-repeat; // background-position: center; } .item-button-goumai { padding: 5rpx 0; text-align: center; width: 150rpx; background-color: #fe0000; border-radius: 30rpx; color: #fff; } .item-button-yigoumai { text-align: center; width: 150rpx; padding: 5rpx 0; background-color: #006af4; border-radius: 30rpx; color: #fff; } } } image { width: 200rpx; flex: 0 0 200rpx; height: 100%; border-radius: 20rpx; margin-right: 12rpx; } } .course-swiper { height: 200px; .swiper-item { width: 33.33%; height: 200px; /* 三个一排,宽度为三分之一 */ transition: transform 0.3s ease; /* 加入过渡效果 */ display: flex; flex-direction: column; align-items: center; justify-content: center; } .swiper-item.active { transform: scale(1.1); /* 主项放大 */ } image { width: 80%; /* 图片宽度 */ height: auto; } text { margin-top: 10px; } } .text-ellipsis { overflow: hidden; /* 隐藏超出内容 */ white-space: nowrap; /* 禁止换行 */ text-overflow: ellipsis; } </style>